说一下有哪些好用的前端skill

你说的应该是给 Claude Code、Codex 这类编程 Agent 用的 Skill 吧。前端可以先看这四个，分别管设计、性能、审查和测试。 ① frontend-design：做页面、改善视觉效果 Anthropic 的 Skill。适合让 Agent 写落地页、后台界面、组件，强调明确的视觉风格、排版和细节，而不是每次都生成差不多的模板页面。 比如：“做一个开发者工具官网，深色工业风，突出产品演示，不要常见的紫色渐变大卡片。” 来源： https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design ② react-best-practices：React / Next.js 代码优化 Vercel Labs 出的，适合审查请求瀑布流、包体积、重复渲染等问题。比单纯让模型“优化一下代码”更有具体检查方向。 比如：“检查这个商品详情页，找出串行请求和不必要的重渲染，按收益排序修改。” 如果你用 Vue，就不必优先装这个。 https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices ③ web-design-guidelines：检查界面是否好用 也是 Vercel 的。更偏 UI 规范和可访问性审查，和 frontend-design 互补：前者指导怎么做，后者检查有没有漏掉基本体验。 比如：“审查登录表单的标签、键盘操作、焦点状态和错误提示。” 注意，它偏代码审查，不等于真的打开浏览器把所有交互跑一遍。 https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines ④ webapp-testing：实际验证网页交互 Anthropic 的 Skill，指导 Agent 用 Playwright 测试本地 Web 应用，包括验证交互、查看页面截图、排查浏览器日志等。需要配好对应运行环境，不是装了 Skill 就自动拥有浏览器能力。 比如：“启动项目，验证登录失败提示、弹窗关闭和表单提交，失败时截图定位。” 在这个仓库里找 webapp-testing： https://github.com/anthropics/skills 选法很简单：做页面先用 frontend-design；React 项目加 react-best-practices；交付前用 web-design-guidelines 审查，再用 webapp-testing 实测。它们提供的是工作指南，不保证一次生成就能达到上线质量。