很多人聊 Skill，第一反应还是怎么让 AI 写得更快。

但对前端团队来说，更现实的问题往往不是 AI 写得够不够快，而是它一动代码，就容易把项目边界、类型、组件结构和联调稳定性一起带乱，最后把问题变成返工。

所以这篇直接整理 20 个更适合前端长期装着用的 Skill，重点就是把返工尽量拦在前面。

1. vercel-react-best-practices

简介：适合补 React 项目的组件边界、副作用位置和渲染方式，减少 AI 把功能改对了、结构却改乱的返工。
链接：https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices

2. react:components

简介：适合处理“组件到底该怎么拆”这类高频问题，避免 AI 一上来就把页面写成超大组件。
链接：https://skills.sh/google-labs-code/stitch-skills/react:components

3. typescript-advanced-types

简介：适合给复杂类型、泛型约束和工具类型兜底，把很多返工拦在类型系统这一层。
链接：https://skills.sh/wshobson/agents/typescript-advanced-types

4. openapi-to-typescript

简介：适合把接口契约固定下来，减少 AI 联调时靠猜字段、手抄类型带来的返工。
链接：https://skills.sh/softaworks/agent-toolkit/openapi-to-typescript

5. nextjs-app-router-patterns

简介：适合 Next.js App Router 项目，重点是把目录、边界、服务端组件和客户端组件的职责收住。
链接：https://skills.sh/wshobson/agents/nextjs-app-router-patterns

6. ui-component-patterns

简介：适合复杂组件和中后台交互，减少“这次能做出来，下次还得重写一遍”的情况。
链接：https://skills.sh/supercent-io/skills-template/ui-component-patterns

7. design-system-patterns

简介：适合组件多、业务重的项目，重点是把组件之间的体系感补起来。
链接：https://skills.sh/wshobson/agents/design-system-patterns

8. tailwind-design-system

简介：适合 Tailwind 项目，避免 AI 把样式写成一次性类名堆叠，后面越改越散。
链接：https://skills.sh/wshobson/agents/tailwind-design-system

9. frontend-design-system

简介：适合把页面开发往系统建设推进，帮助前端把设计系统真正落到组件、交互和规范上。
链接：https://skills.sh/supercent-io/skills-template/frontend-design-system

10. web-design-guidelines

简介：适合补 UI 细节、交互一致性和通用 Web 规范，减少“功能没问题但看起来不像正式产品”的返工。
链接：https://skills.sh/vercel-labs/agent-skills/web-design-guidelines

11. typescript-react-reviewer

简介：适合 React + TypeScript 项目的 Review 场景，帮助把组件设计和类型质量慢慢收成固定检查项。
链接：https://skills.sh/dotneet/claude-code-marketplace/typescript-react-reviewer

12. frontend-code-review

简介：适合做更通用的前端改动检查，先把 AI 改完之后最容易漏掉的问题筛一遍。
链接：https://skills.sh/langgenius/dify/frontend-code-review

13. testing-strategies

简介：适合先把测试层次想清楚，避免单测、组件测、E2E 都写了一点，关键风险却还是没拦住。
链接：https://skills.sh/supercent-io/skills-template/testing-strategies

14. webapp-testing

简介：适合补 Web 应用层的交互验证，更关注页面流程、状态切换和真实用户路径。
链接：https://skills.sh/anthropics/skills/webapp-testing

15. playwright-best-practices

简介：适合已经在做 E2E 的团队。Playwright 能补回归，但如果写法不稳，它自己也会变成返工来源。
链接：https://skills.sh/currents-dev/playwright-best-practices-skill/playwright-best-practices

16. e2e-testing-patterns

简介：适合关键路径多、业务流程长的项目，重点是先守住最值得测的那一层流程。
链接：https://skills.sh/wshobson/agents/e2e-testing-patterns

17. vitest

简介：适合补最轻量、最高频的一层验证，把很多小改动和工具函数的问题提前暴露。
链接：https://skills.sh/pproenca/dot-skills/vitest

18. responsive-design

简介：适合多端页面和响应式布局，减少 AI 改桌面端时顺手把移动端挤坏的返工。
链接：https://skills.sh/supercent-io/skills-template/responsive-design

19. web-accessibility

简介：适合表单、弹窗、交互组件较多的项目，把语义、焦点和键盘可达性这类问题提前补掉。
链接：https://skills.sh/supercent-io/skills-template/web-accessibility

20. performance-optimization

简介：适合页面复杂度持续增长的项目，把渲染、资源加载和交互成本这类性能返工尽量提前处理。
链接：https://skills.sh/supercent-io/skills-template/performance-optimization

推荐收藏方式

如果你不想一次装太多，可以先按用途分：

• • 收项目边界：vercel-react-best-practices、react:components、typescript-advanced-types、openapi-to-typescript

• • 收组件和界面：ui-component-patterns、design-system-patterns、tailwind-design-system、web-design-guidelines

• • 收 Review 和测试：typescript-react-reviewer、frontend-code-review、testing-strategies、playwright-best-practices

• • 收体验和交付：responsive-design、web-accessibility、performance-optimization