本文面向实际研发场景，整理并推荐了一组可直接应用于日常开发流程的Agent Skills。这些Skills覆盖前端设计、前后端开发、代码审查、自动化测试、CI/CD、问题修复以及文档维护等常见环节，分别针对具体任务提供明确的能力边界与使用场景说明，帮助你在不同阶段选择合适的Skills，提高开发效率。
一、前端设计
名称：frontend-design
作者：Anthropic
地址：https://github.com/anthropics/skills/tree/main/skills/frontend-design
简介：该Skill旨在创建具有独特性和高设计品质的前端界面，能够达到生产级别标准。其核心目标是避免生成千篇一律的“AI风格”界面，而是通过选择明确的美学方向（如极简、复古、未来感等），并注重排版、色彩、动效、布局等细节，打造出令人印象深刻、具有艺术感的页面。
资源文件：仅包含一个SKILL.md文件。
应用场景：
- 构建网页组件或页面：从零开始创建具体的UI元素（如React组件、HTML/CSS布局），确保功能完善且视觉上有辨识度。
- 开发完整的Web应用或网站：构建完整应用界面（如产品Landing Page、数据仪表盘），确立并贯彻统一且鲜明的设计风格。
- 美化或重塑现有界面：提升已有但设计平庸的网页或应用的视觉品质，通过引入独特字体、创意色彩、精致动效和新颖布局来重塑整体美感。
二、前端开发
名称：cache-components
作者：vercel
地址：https://github.com/vercel/next.js/tree/canary/.claude-plugin/plugins/cache-components/skills/cache-components
简介：该Skill旨在将Next.js的Partial Prerendering（PPR）和缓存组件的最佳实践，通过AI助手无缝集成到开发工作流中。当项目启用cacheComponents: true配置时，该Skill将被激活，提供自动化的代码生成与优化能力。
资源文件：除SKILL.md外，还包含PATTERNS.md（使用示例）、REFERENCE.md（API参考）和TROUBLESHOOTING.md（故障排查指南）。
应用场景：
- 自动生成缓存优化的数据组件：创建数据获取组件时，自动应用最优渲染策略（对可共享数据使用‘use cache’，对用户专属内容添加<Suspense>边界）。
- 自动实现数据变更后的缓存失效：生成修改数据的Server Action时，自动注入缓存失效逻辑（如updateTag()），确保数据一致性。
- 智能化页面构建与代码现代化：构建页面或审查代码时，强制遵循PPR架构规范，并给出现代化改造建议（如用组件级‘use cache’替代过时的页面级缓存配置）。
三、全栈开发
名称：fullstack-developer
作者：Shubhamsaboo
地址：https://github.com/Shubhamsaboo/awesome-llm-apps/tree/main/awesome_agent_skills/fullstack-developer
简介：该Skill扮演精通现代Web开发技术的全栈专家角色，专注于使用JavaScript/TypeScript技术栈（特别是React/Next.js、Node.js和主流数据库）来完成各类Web开发任务。
资源文件：仅包含一个SKILL.md文件。
应用场景：
- 构建完整的Web应用（前后端解决方案）
- 开发API（RESTful或GraphQL）
- 使用React/Next.js创建前端界面
- 设计和设置数据库（如PostgreSQL、MongoDB）
- 实现用户认证与授权（JWT、OAuth等）
- 提供在Vercel、Netlify等平台的部署指导
- 在应用中集成第三方服务
四、代码审查（前端）
名称：frontend-code-review
作者：langgenius
地址：https://github.com/langgenius/dify/tree/main/.agents/skills/frontend-code-review
简介：该Skill自动化审查前端代码（.tsx、.ts、.js等文件），依据预定义规则从代码质量、性能、业务逻辑等维度进行全面分析。审查后生成结构化报告，将问题划分为“紧急待修复”和“改进建议”两类，并标注具体位置、提供修复方案。
资源文件：除SKILL.md外，还包含references/business-logic.md（业务逻辑规则）、references/code-quality.md（通用编码规范）和references/performance.md（前端性能最佳实践）。
应用场景：
- 审查待提交的变更：在提交代码前，审查所有已修改或暂存的文件，提前识别不符合规范的代码。
- 审查指定的文件：对特定文件或模块进行重构、优化或问题排查时，进行针对性深度分析。
- 获取结构化的修复报告：自动输出标准化报告，按紧急程度排序，标注文件路径、行号、代码片段，并给出可执行修复方案。
五、代码审查（通用）
名称：code-reviewer
作者：google-gemini
地址：https://github.com/google-gemini/gemini-cli/tree/main/.gemini/skills/code-reviewer
简介：该Skill引导AI开展专业且全面的代码审查工作，支持审查本地代码改动（已暂存和未暂存）以及远程代码合并请求（Pull Request）。审查核心目标是保障代码的正确性、可维护性，并确保符合项目规范。
资源文件：仅包含一个SKILL.md文件。
应用场景：
- 审查远程PR：提供PR编号或URL，AI会自动检出代码，运行项目预设检查脚本，阅读PR描述，随后进行深度分析并给出反馈。
- 审查本地代码变更：无需PR信息，AI通过git status、git diff等命令检查工作区中的代码改动并进行分析反馈。
- 提供深度分析与结构化反馈：从正确性、可维护性、可读性、效率、安全性与测试完整性等多维度分析，以结构化形式输出反馈（总体概述、具体发现、明确结论）。
六、网页应用测试
名称：webapp-testing
作者：Anthropic
地址：https://github.com/anthropics/skills/tree/main/skills/webapp-testing
简介：该Skill是一个基于Playwright构建的本地Web应用测试工具集，支持前端功能验证、UI行为调试、页面截图及浏览器控制台日志采集，适配“先侦查后行动”的测试流程。
资源文件：除SKILL.md外，还包含示例脚本（如console_logging.py、element_discovery.py、static_html_automation.py）和辅助脚本with_server.py（用于管理多服务生命周期）。
应用场景：
- 自动验证前端功能：用自然语言告知测试需求（如“测试登录功能”），AI自动编写Playwright脚本模拟用户操作并反馈结果。
- 调试与分析UI行为：下达指令（如“截取首页完整截图”），AI执行脚本捕获截图或获取HTML内容，帮助快速定位问题。
- 处理需要后台服务的复杂交互：告知项目结构与启动命令，AI借助with_server.py脚本同时启动所有必需服务，再运行测试脚本。
- 测试静态HTML文件：提供文件路径与测试需求，AI编写脚本通过file://协议打开文件并完成验证操作。
七、CI/CD：PR 创建
名称：pr-creator
作者：google-gemini
地址：https://github.com/google-gemini/gemini-cli/tree/main/.gemini/skills/pr-creator
简介：该Skill的核心作用是引导并自动化创建高质量、符合规范的拉取请求（PR）。它通过标准化工作流程，确保每一次代码提交均遵循项目预设的模板与质量检查标准，提升代码审查效率与团队协作一致性。
资源文件：仅包含一个SKILL.md文件。
应用场景：
- 一键创建符合规范的PR：本地完成开发并提交代码后，调用此Skill，AI自动执行分支检查、应用PR模板、运行预检脚本，生成符合规范的PR。
- 引导贡献者完成首次代码提交：为新成员或外部贡献者提供智能向导，自动完成模板查找、脚本执行等操作，降低贡献门槛。
- 自动执行创建PR前的质量检查：在正式创建PR前，调用该Skill自动运行项目预设的preflight脚本（构建、单元测试、代码风格检查），若检查失败则中止流程并提示修复。
八、Linting 和格式错误修复
名称：fix
作者：facebook
地址：https://github.com/facebook/react/tree/main/.claude/skills/fix
简介：该Skill自动化地修复代码格式并检查代码规范（linting）错误。通过执行两个关键命令来保证代码质量：yarn prettier（自动格式化）和yarn linc（检查linting错误）。最终目标是确保代码在提交前符合项目规范，顺利通过CI/CD流程。
资源文件：仅包含一个SKILL.md文件。
应用场景：
- 提交代码前的预防性检查：在git commit之前运行，自动清理代码格式，并提示需要手动修复的linting错误。
- 修复已发现的linting或格式问题：在开发过程中发现格式混乱或linting错误提示时，立即运行以快速解决代码质量问题。
- 解决持续集成（CI）失败问题：当CI流水线报告因linting或格式错误导致失败时，在本地对应分支上运行此Skill，自动修复格式问题并列出需要手动更正的错误，帮助快速定位并解决问题。
九、技术文档更新
名称：update-docs
作者：vercel
地址：https://github.com/vercel/next.js/tree/canary/.claude/skills/update-docs
简介：该Skill是一套用于更新Next.js项目文档的引导式工作流，核心作用是帮助你根据源代码的变更来分析、更新和创建相关文档，确保代码和文档保持同步。特别为审查Pull Request时的文档完整性检查而设计。
资源文件：除SKILL.md外，还包含references/CODE-TO-DOCS-MAPPING.md（源代码与文档映射关系）和references/DOC-CONVENTIONS.md（文档风格指南）。
应用场景：
- 分析代码变更对文档的影响：提交代码变更后，调用该Skill分析哪些文档文件需要更新。它会通过git diff检查分支差异，并根据映射关系找出对应的文档文件。
- 更新现有的文档：当功能或API发生变化时，引导你更新现有文档（如添加/修改props表格、更新代码示例、添加废弃通知），并遵循项目文档规范。
- 为新功能创建脚手架文档：添加全新功能时，帮你快速创建符合规范的新文档（如API参考、指南），提供标准模板确保结构、命名和元信息符合项目要求。
十、查找 Skill
名称：find-skills
作者：vercel
地址：https://github.com/vercel-labs/skills/tree/main/skills/find-skills
简介：该Skill帮助你发现并安装Agent Skill。它依托名为skills的命令行工具（CLI），让你可以从开放的Agent Skill生态中搜索、安装与管理各类模块化技能包，扩展Agent的特定领域知识、标准化工作流与工具能力。
资源文件：仅包含一个SKILL.md文件。
应用场景：
- 探索未知的Skill：当希望Agent处理特定领域任务但不确定其能力时，使用此Skill进行探索（如询问“你能帮我评审代码吗？”），AI会在技能市场中搜索相关能力并呈现结果。
- 查找特定的Skill：明确需要某个Skill解决特定问题但不知具体是哪个时，主动调用进行精确查找（如“帮我找一个用于React性能优化的skill”）。
- 提供可执行的Skill安装建议：找到匹配技能后，自动整理并输出标准化推荐信息，包括技能名称、功能简介、一键安装指令（npx skills add ...）以及官方链接。