最近在整理研发工具链时，我发现团队在日常开发中重复做着很多标准化的事情——代码审查、格式检查、文档更新、自动化测试……这些任务本身没有太高的创意门槛，却占用了大量时间。

于是我系统地梳理了一组Agent Skills，这些是可以直接集成到开发流程中的模块化能力包。

今天想和大家分享这10个技能，它们覆盖了从前端设计、代码开发、质量检查到CI/CD的全链路场景。

前端设计类

1. Frontend Design

作者：Anthropic

项目地址：https://github.com/anthropics/skills/tree/main/skills/frontend-design

核心功能：

该Skill面向生产级别的前端界面设计，强调设计的独特性和审美品质。它避免生成通用的"AI风格"界面，而是通过明确的设计方向选择（极简、复古、未来感、野兽派等）以及对排版、色彩、动效、空间布局等细节的精心处理，创建具有辨识度的UI组件和页面。

适用场景：

• 从零创建网页组件或独立页面（React组件、HTML/CSS布局）
• 构建完整的Web应用或网站（Landing Page、数据仪表盘、小型网站）
• 重塑现有界面的视觉品质（通过引入独特字体、色彩方案、动效和布局）

2. 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）和缓存组件最佳实践集成到开发工作流。当项目启用cacheComponents: true配置时激活，提供自动化的代码生成与优化能力。包含的资源文件覆盖使用模式（PATTERNS.md）、API参考（REFERENCE.md）和故障排查指南（TROUBLESHOOTING.md）。

适用场景：

• 自动生成缓存优化的数据组件（根据数据类型自动选择缓存策略或Suspense边界）
• 实现数据变更后的自动缓存失效（自动注入updateTag()逻辑）
• 智能化页面构建与代码现代化（强制遵循PPR规范，识别过时的缓存配置）

开发工具类

3. 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应用开发周期。

适用场景：

• 完整Web应用构建（前端到后端的端到端解决方案）
• API开发（RESTful或GraphQL接口）
• 前端界面开发（React/Next.js应用）
• 数据库设计与配置（PostgreSQL、MongoDB等）
• 用户认证与授权实现（JWT、OAuth集成）
• 应用部署与扩展（Vercel、Netlify等平台指导）
• 第三方服务集成

代码审查类

4. Frontend Code Review

作者：Langgenius

项目地址：https://github.com/langgenius/dify/tree/main/.agents/skills/frontend-code-review

核心功能：

自动审查前端代码（.tsx、.ts、.js等文件），基于预定义规则清单从代码质量、性能、业务逻辑等维度分析。生成结构清晰的报告，问题分为"紧急待修复"和"改进建议"两类，标注具体代码位置并提供可落地的修复方案。

资源文件包括：

• business-logic.md：业务逻辑规则（如禁用特定场景下的workflowStore以防白屏）
• code-quality.md：编码规范（推荐使用cn工具函数处理动态类名而非字符串拼接）
• performance.md：性能最佳实践（用useMemo包裹复杂属性以防不必要重渲染）

适用场景：

• 审查待提交的变更（git commit前识别不规范代码）
• 审查指定的文件或模块（重构、优化或问题排查时的针对性分析）
• 获取结构化的修复报告（按紧急程度排序，包含文件路径、行号、修复方案）

5. Code Reviewer（通用）

作者：Google Gemini

项目地址：https://github.com/google-gemini/gemini-cli/tree/main/.gemini/skills/code-reviewer

核心功能：

引导AI开展专业的全面代码审查，支持审查本地代码改动（已暂存和未暂存的变更）和远程PR。核心目标是保障代码正确性、可维护性，确保符合项目规范标准。

适用场景：

• 审查远程PR（提供PR编号或URL，AI自动检出代码、运行预检脚本、阅读PR描述，进行深度分析）
• 审查本地代码变更（通过git status、git diff检查工作区改动）
• 深度分析与结构化反馈（多维度覆盖正确性、可维护性、可读性、执行效率、安全性、测试完整性）

测试与质量保证

6. Webapp Testing

作者：Anthropic

项目地址：https://github.com/anthropics/skills/tree/main/skills/webapp-testing

核心功能：

基于Playwright构建的本地Web应用测试工具集，支持前端功能验证、UI行为调试、页面截图及浏览器控制台日志采集。采用"先侦查后行动"的测试流程。提供的示例脚本覆盖静态HTML自动化测试、元素定位、日志抓取，可在多服务场景下统一管理服务器生命周期。

包含资源：

• console_logging.py：捕获并保存网页控制台日志用于调试
• element_discovery.py：自动发现页面上的按钮、链接、输入框等可交互元素
• static_html_automation.py：直接对本地静态HTML文件进行自动化操作
• with_server.py：辅助脚本，先启动依赖服务再执行测试，完毕后自动关闭

适用场景：

• 自动验证前端功能（用自然语言描述测试需求，AI编写Playwright脚本模拟用户操作）
• 调试与分析UI行为（获取截图、检查DOM结构、定位页面异常）
• 处理需要后台服务的复杂交互（前后端分离架构下的完整环境测试）
• 测试静态HTML文件（无需服务器的纯静态页面验证）

CI/CD与工作流

7. PR Creator

作者：Google Gemini

项目地址：https://github.com/google-gemini/gemini-cli/tree/main/.gemini/skills/pr-creator

核心功能：

自动化创建高质量、符合规范的Pull Request。通过标准化工作流程确保每次代码提交遵循项目模板与质量检查标准，提升代码审查效率，保障团队协作一致性。

适用场景：

• 一键创建符合规范的PR（完成开发后自动执行分支检查、应用PR模板、运行预检脚本、生成规范的标题和描述）
• 引导新贡献者完成首次代码提交（智能向导形式降低代码贡献门槛）
• 自动执行创建PR前的质量检查（运行构建、单元测试、代码风格检查）

8. Fix（Linting和格式修复）

作者：Facebook

项目地址：https://github.com/facebook/react/tree/main/.claude/skills/fix

核心功能：

自动化修复代码格式和检查代码规范错误。执行yarn prettier自动格式化已修改文件，以及yarn linc检查linting错误（Prettier无法自动修复的问题如未使用的变量、逻辑错误等）。

适用场景：

• 提交代码前的预防性检查（git commit前自动清理格式、提示linting错误）
• 修复已发现的问题（工作区中明显的格式混乱或linting提示）
• 解决CI失败问题（当因格式或linting错误导致CI失败时，快速定位并修复）

文档维护

9. Update Docs

作者：Vercel

项目地址：https://github.com/vercel/next.js/tree/canary/.claude/skills/update-docs

核心功能：

用于更新Next.js项目文档的引导式工作流。根据源代码变更来分析、更新和创建相关文档，确保代码和文档同步。特别设计用于PR审查时的文档完整性检查。

包含资源：

• CODE-TO-DOCS-MAPPING.md：定义源代码与文档的映射关系，指导哪个代码变化应更新哪个文档
• DOC-CONVENTIONS.md：风格指南和规则手册，规定文档格式、结构和写作风格

适用场景：

• 分析代码变更对文档的影响（通过git diff检查分支差异，根据映射关系找出需更新的文档）
• 更新现有文档（当功能或API变更时，更新props表格、代码示例、废弃通知等）
• 为新功能创建脚手架文档（快速创建符合规范的新文档，提供API参考、指南等标准模板）

技能生态管理

10. Find Skills

作者：Vercel Labs

项目地址：https://github.com/vercel-labs/skills/tree/main/skills/find-skills

核心功能：

帮助发现和安装Agent Skill。依托skills命令行工具，从开放的Agent Skill生态中搜索、安装与管理模块化技能包，扩展Agent能力。

适用场景：

• 探索未知的Skill（当需要处理特定领域任务但不确定Agent是否具备能力时，主动搜索相关技能）
• 查找特定的Skill（明确需求但不知道具体skill名称时的精确查找）
• 获取可执行的安装建议（整理标准化推荐信息，包含功能简介、一键安装指令npx skills add ...和官方链接）

总体思考

这10个Skills形成了一条相对完整的开发链路——从设计阶段的Frontend Design，到开发阶段的Cache Components和Fullstack Developer，再到质量检查的代码审查工具，以及CI/CD环节的自动化能力。我的观察是，真正有价值的Skill往往具备以下特征：

• 规范化程度高：这些工具通常会附带参考文档、映射表、规则清单等，确保工作流的一致性
• 集成度深：与既有的开发工具链紧密结合（git、npm、框架配置等），而非孤立存在
• 上下文感知：能理解项目特定的约定和模式，而非生成通用方案

如果你的团队也在做重复性高的标准化工作，不妨尝试从Find Skills开始探索，找到适合当前项目的Skill组合。

关键是先从学会"用"Skills开始，再逐步理解它们如何改进你的开发流程。