AI PICKS / FIELD NOTES
前端开发，如何选择 Claude Code Skills
按界面设计、React 性能、可访问性与浏览器测试选择 Skills，查看用途对比、可用提示词与原始来源。
先看答案
先看当前任务，再选择 Skill：frontend-design 负责视觉方向，Vercel React Best Practices 检查加载与渲染，Web Design Guidelines 审查界面规范，webapp-testing 辅助浏览器验证。无需一次装下所有热门合集。
按任务选择
| Skill | 适合任务 |
|---|---|
| frontend-design | 让 Agent 设计并实现有辨识度的网页界面。 |
| vercel-react-best-practices | 检查 React 与 Next.js 性能，改善数据加载和渲染。 |
| web-design-guidelines | 检查界面可访问性、交互与设计规范。 |
| webapp-testing | 使用 Playwright 检查本地 Web 应用的交互。 |
从一个具体需求开始
先明确用户、主要操作、框架、内容与限制。例如：用 React 构建开发者工具导航，蓝色强调色，保留键盘导航，适配 390px 屏幕。先看方向，再开始实现。
Use frontend-design to propose a visual direction for a React developer-tools directory. Include typography, layout and mobile behavior. Show the direction before implementing.示例命令或提示词；不是本页的实际运行记录。
界面可用之后，再检查性能
React 或 Next.js 页面可用后，重点检查串行取数、多余客户端工作与渲染。让 Agent 标出文件位置和修改理由。Vercel 发布的是实践指导，不代表你的项目一定获得某个比例的提速。
Use vercel-react-best-practices to review this page for request waterfalls and unnecessary renders. Explain each finding before changing code. Measure the same user flow before and after.示例命令或提示词；不是本页的实际运行记录。
界面审查与浏览器验证各有用途
Web Design Guidelines 辅助检查界面实现，webapp-testing 提供浏览器测试流程。截图看起来正常、源码审查通过，都不能单独证明表单可用；应验证键盘顺序、提交错误、窄屏布局与实际导航。
浏览器工具可能需要额外运行环境。使用前先核对源仓库及当前 Agent 可用工具。
这份清单如何选择
AI Picks 从现有目录选择设计、性能、界面审查和测试四种不同任务。这是基于用途的编辑清单，不是热度排行或性能榜。页面提示词为编写示例，不是运行记录。
所有 Agent 都能使用吗？
支持 SKILL.md 不代表各客户端执行效果一致。工具权限、配套脚本和客户端特性可能不同。先核对来源，安装一个，再用小任务确认能够运行。
来源与更新
2026-10-02：首版发布，核对来源与安装说明。执行前请查看来源的最新版本。