前端开发者的 AI Agent Skills 完全指南
2026-06-24 · frontend react vue css performance
前端开发不只是写 HTML/CSS/JS——组件化、状态管理、性能优化、可访问性，每个领域都需要专业知识。这 10 个 Skill 让你的 AI 覆盖前端全栈。
前端开发者的痛点
前端开发越来越复杂： - 框架选型（React/Vue/Svelte/Angular） - 状态管理（Redux/Zustand/Pinia） - 构建工具（Vite/Webpack/Turbopack） - 样式方案（Tailwind/CSS Modules/styled-components） - 测试（Jest/Vitest/Playwright） - 性能优化（Core Web Vitals） - 可访问性（WCAG）
AI 可以帮你处理这些，但它需要"前端 Skill"来理解前端的最佳实践。
Top 10 前端 Skills
1. shadcn ⭐ 117K
- 适用场景：UI 组件开发
- 一句话：shadcn/ui 组件库的最佳实践。
shadcn/ui 是 2026 年最流行的 React 组件库。这个 Skill 教 AI 正确使用 shadcn 组件：导入、组合、定制、主题。
2. banner-design ⭐ 95K
- 适用场景：UI/UX 设计
- 一句话：UI 设计最佳实践。
教 AI 设计原则：间距系统、排版层级、颜色理论、响应式布局。装上之后，AI 生成的界面会好看很多。
3. accessibility ⭐ 220K
- 适用场景：可访问性
- 一句话：WCAG 可访问性标准的实现指南。
教 AI 检查和修复可访问性问题：ARIA 标签、键盘导航、颜色对比度、屏幕阅读器兼容性。这是很多前端开发者忽略但非常重要的领域。
4. react-doctor ⭐ 13K
- 适用场景：React 代码质量
- 一句话：React 专属的代码审查工具。
教 AI 审查 React 代码：不必要的 re-render、缺失的 key、不正确的 hook 使用、内存泄漏风险。
5. webapp-testing ⭐ 154K
- 适用场景：E2E 测试
- 一句话：用 Playwright 做端到端测试。
教 AI 用 Python Playwright 测试 Web 应用：渲染组件、模拟用户交互、验证状态、截图对比。
6. design-system ⭐ 15K
- 适用场景：设计系统
- 一句话：构建和维护设计系统的方法论。
教 AI 定义 Design Token、组织组件层级、写组件文档、维护 Storybook。
7. frontend-slides ⭐ 22K
- 适用场景：技术演示
- 一句话：用前端技术做幻灯片。
教 AI 用 Slidev/Reveal.js 做技术分享幻灯片。适合需要做技术演讲的前端开发者。
8. css-optimization ⭐ 5K
- 适用场景：CSS 性能
- 一句话：CSS 性能优化最佳实践。
教 AI 写高效的 CSS：避免深层嵌套、减少重排重绘、使用 CSS 变量、优化动画。
9. api-design ⭐ 10K
- 适用场景：API 集成
- 一句话：RESTful API 设计和集成。
教 AI 设计 API、用 React Query/SWR 做数据获取、处理加载状态和错误。
10. coding-standards ⭐ 8K
- 适用场景：代码规范
- 一句话：通用的编码规范。
教 AI 遵循一致的代码风格：命名规范、文件组织、导入顺序、注释规范。
按框架推荐
React 开发者
必装：shadcn + react-doctor + webapp-testing
推荐：accessibility + design-system + coding-standards
Vue 开发者
必装：accessibility + webapp-testing + coding-standards
推荐：design-system + css-optimization + api-design
Svelte / 其他
必装：accessibility + webapp-testing + coding-standards
推荐：css-optimization + api-design + design-system
推荐工作流
新功能开发
1. 用 writing-plans 规划组件结构
2. 用 shadcn 选择基础组件
3. 用 design-system 确保设计一致性
4. 用 react-doctor 审查代码质量
5. 用 webapp-testing 写 E2E 测试
6. 用 accessibility 检查可访问性
组件库开发
1. 用 design-system 规划组件架构
2. 用 shadcn 作为参考实现
3. 用 accessibility 确保可访问性
4. 用 coding-standards 确保代码质量
5. 用 webapp-testing 写组件测试
安装示例
以 shadcn 为例：
# Claude Code
git clone --depth 1 https://github.com/shadcn-ui/ui.git && cp ui/skills/shadcn ~/.claude/skills/shadcn
# Windows
git clone --depth 1 https://github.com/shadcn-ui/ui.git && xcopy ui\skills\shadcn %USERPROFILE%\.claude\skills\shadcn /Y
常见问题
Q: 我用 CSS-in-JS，css-optimization 有用吗？ A: 有用。CSS 优化原则是通用的，不管用什么方案。
Q: 哪个 Skill 效果最明显？ A: shadcn。如果你用 shadcn/ui，装上之后 AI 生成的组件质量会有质的飞跃。
Q: 需要装多少个 Skill？ A: 建议 3-5 个。太多会占用 context window，反而降低效果。
前端生态变化很快。建议定期查看 SkillsNav Frontend 分类 获取最新的前端 Skill。