* 构建网页组件或页面 当你需要从零开始创建一个具体的 UI 元素时，例如一个 React 组件、一个 HTML/CSS 布局，或一个独立的静态页面。该 Skill 会确保这个组件不仅功能完善，而且在视觉上具有辨识度。 * 开发完整的 Web 应用或网站 当你需要构建一个完整的应用界面时，比如一个产品的 Landing Page、一个数据仪表盘或一个小型网站。该 Skill 会从整体出发，确立一个统一且鲜明的设计风格，并将其贯彻到应用的每一个角落。 * 美化或重塑现有界面 当你有一个已经存在的、但设计平庸的网页或应用，并希望提升其视觉品质时。该 Skill 会专注于美化层面的工作，通过引入独特的字体、创意的色彩方案、精致的动效和新颖的布局，来重塑界面的整体美感。

除 SKILL.md 文件外，该 Skill 中还包含以下文件：

• rig-template.md：用于梳理项目的构建、运行、鉴权、测试账号和部署验证方式，并生成可复用的 instant-nav.rig.md。
• test-template.md：提供 instant() 自动化测试模板，覆盖首次加载和客户端导航两类路径，并包含迁移前的基线验证方式。
• patterns.md：整理常见阻塞模式的改造方案，例如顶层 await、cookies()、headers()、searchParams、非确定性值，以及未缓存的数据读取。
• real-app-patterns.md：补充真实应用中的复杂场景，包括并行路由、鉴权门禁、空外壳、响应式骨架屏，以及首次加载与客户端导航之间的差异。
• red-test-robustness.md：用于验证失败测试的可信度，避免因为选择器、测试账号、权限、空状态或过期部署等问题，误判真正需要优化的目标。

* 优化具体路由的即时导航体验 当某个页面虽然已经通过 Cache Components 的构建检查，但首次加载或客户端跳转仍然需要等待动态数据后才展示内容时，该 Skill 会建立测试驱动的优化流程，验证页面的静态外壳是否能够立即呈现。 * 扩大静态外壳并减少空白等待 当页面的 <Suspense> 边界过高、fallback 为空、骨架屏不匹配，或主要内容被整体推迟时，该 Skill 会引导开发者下沉边界、复用已有的 loading UI，让布局、标题、导航和关键外壳内容优先展示。 * 为体验优化建立自动化回归保护 当团队希望长期保证某条导航路径保持即时响应时，该 Skill 会生成 instant() e2e 测试，并通过先红后绿、差异验证和生产构建验证，确保测试能够真实捕捉体验回退。 * 处理真实应用中的复杂导航结构 当项目包含并行路由、鉴权门禁、客户端路由容器、响应式布局，或首次加载与客户端导航之间存在差异时，该 Skill 会提供对应的判断方法，避免只让测试变绿，却没有真正改善用户实际看到的页面。

• 构建完整的 Web 应用：从前端到后端，提供完整的解决方案。
• 开发 API：创建 RESTful 或 GraphQL 风格的后端接口。
• 创建前端界面：使用 React 或 Next.js 构建现代化的用户界面。
• 数据库和数据建模：设计和设置如 PostgreSQL 或 MongoDB 等数据库。
• 实现用户认证与授权：集成 JWT、OAuth 等认证机制。
• 部署与扩展应用：提供在 Vercel、Netlify 等平台上的部署指导。
• 集成第三方服务：在应用中接入外部服务。

除 SKILL.md 文件外，该 Skill 中还包含以下文件：

• references/business-logic.md：定义与特定业务场景相关的规则，以防止出现逻辑错误或 Bug。例如 : 规定在某些组件中不能使用 workflowStore ，因为在特定使用场景下（如从模板创建管道时）它会导致页面白屏。
• references/code-quality.md：包含一系列通用编码规范，旨在保持代码的整洁、一致和可维护性。例如 : 推荐使用 cn 这样的工具函数来处理动态的 CSS 类名，而不是手动拼接字符串，以保证代码风格统一。
• references/performance.md：专注于前端性能，提供避免常见性能问题的最佳实践。例如 : 建议将传递给子组件的对象或数组等复杂属性用 useMemo 包裹起来，以防止不必要的组件重渲染。

* 审查待提交的变更 在你准备提交代码（git commit）前，可使用该 Skill 审查所有已修改或已暂存的文件，提前识别并标记不符合规范的代码，避免潜在的 Bug 或性能问题被合入代码库。 * 审查指定的文件 当你需对特定文件或模块进行重构、优化或问题排查时，可将相关文件交由该 Skill 审查，从而对目标文件开展针对性深度分析，快速获取该文件的质量评估结果及改进建议。 * 获取结构化的修复报告 代码审查发现问题后，该 Skill 会自动整理并输出标准化报告。这份报告不仅罗列问题，还会按紧急程度排序，同时标注问题对应的文件路径、行号、相关代码片段，并给出可执行的修复方案。

* 审查远程 PR 当你完成功能开发或问题修复并提交 PR 后，可发起 AI 审查请求。你只需提供 PR 编号或 URL（例如："Review PR #123"），AI 会自动检出（checkout）该 PR 的代码，运行项目预设的检查脚本（如 npm run preflight），同时阅读 PR 描述与评论以理解开发目标，随后对代码开展深度分析并给出反馈。 * 审查本地代码变更 若你希望在提交代码或创建 PR 前，先对本地修改进行审查，只需发出 “审查我的代码” 等类似指令即可，无需提供 PR 相关信息；AI 会通过 git status、git diff 等命令，检查工作区中已暂存（staged）和未暂存（unstaged）的代码改动，进而对这些变更进行分析并反馈。 * 提供深度分析与结构化反馈 无论是审查远程 PR 还是本地代码变更，AI 都会从多维度开展深度的代码质量分析，涵盖正确性、可维护性、可读性与执行效率、安全性与测试完整性等维度。最终，AI 会以结构化形式输出反馈，内容包括总体概述、具体发现（关键问题、改进建议）以及明确的结论（如批准合并或要求修改）。

除 SKILL.md 文件外，该 Skill 中还包含以下文件：

• examples/console_logging.py：演示了在自动化测试时如何捕获并保存网页的控制台日志，用于调试和监控。
• examples/element_discovery.py：展示了如何自动发现和列出页面上所有的按钮、链接和输入框等可交互元素，是编写自动化脚本前的重要步骤。
• examples/static_html_automation.py：示范了如何直接对本地的静态 HTML 文件进行自动化操作（如点击、填表），而无需通过网络服务器。
• scripts/with_server.py：自动化辅助脚本。在执行一个主命令（例如自动化测试脚本）之前，先启动一个或多个依赖的服务（如前端或后端服务器），并确保这些服务完全就绪后，再执行主命令，最后在命令结束后自动关闭所有服务。

* 自动验证前端功能 当你在本地开发 Web 应用（如使用 React、Vue、Svelte 等框架），并希望验证某个新功能是否正常运行时，只需用自然语言告知 AI 测试需求（例如：“帮我测试登录功能”），AI 会自动编写 Playwright 脚本来模拟用户操作，并向你反馈页面状态或内容是否符合预期。 * 调试与分析 UI 行为 若你发现页面中某元素渲染异常或交互行为异常，可向 AI 下达指令（例如：“截取首页完整截图” 或 “检查按钮的 DOM 结构”），AI 会执行对应脚本，捕获截图或获取 HTML 内容，并将侦察结果返回给你，助力快速定位问题。 * 处理需要后台服务的复杂交互 若你的应用为前后端分离架构，测试前端功能需后端 API 服务同步运行，只需告知 AI 项目结构与启动命令，AI 会借助 with_server.py 脚本来同时启动所有必需服务，再运行测试脚本，确保测试在完整的环境中执行。 * 测试静态 HTML 文件 若你有不依赖服务器的纯静态 HTML 页面，需验证其内容或结构，只需向 AI 提供文件路径与测试需求，AI 会编写脚本并通过 file:// 协议在浏览器中打开该文件，完成验证操作。

* 一键创建符合规范的 PR 当你在本地完成新功能开发或 Bug 修复，并已提交代码（git commit）后，可调用此 Skill，让 AI 自动执行分支检查、查找并应用 PR 模板、运行预检脚本（如测试和 linting），并最终生成一个标题和描述都完全符合项目规范的 PR。 * 引导贡献者完成首次代码提交 当新团队成员或外部贡献者不熟悉项目的提交流程和规范时，可以使用此 Skill，让 AI 以智能向导的形式，自动完成模板查找、脚本执行等繁琐操作，仅需用户填写必要的标题与描述，大幅降低代码贡献门槛。 * 自动执行创建 PR 前的质量检查 在正式创建 PR 之前，可以调用该 Skill，让 AI 自动运行项目预设的 preflight 脚本，执行所有必要的构建、单元测试和代码风格检查。如果任何检查失败，AI 会中止提交流程并提示开发者进行修复，节约了审查者的时间和精力。

这个 skill 的核心作用是自动化地修复代码格式并检查代码规范（linting）错误 。它通过执行两个关键命令来保证代码质量：

• yarn prettier：自动格式化已修改的文件，统一代码风格。
• yarn lint：检查代码中是否存在 linting 错误（这些是 Prettier 无法修复的，例如未使用的变量、逻辑错误等），这些错误通常会导致持续集成（CI）失败。

最终目标是确保代码在提交前符合项目规范，从而顺利通过 CI/CD 流程。

* 提交代码前的预防性检查 在你完成编码，执行 git commit 之前，运行该 Skill，让 AI 自动清理代码格式，并提示任何需要手动修复的 linting 错误。 * 修复已发现的 linting 或格式问题 当你在编码过程中或接手他人代码时，发现当前工作区内存在明显的格式混乱或 linting 错误提示（例如，IDE 的警告），可以立即运行该 Skill，快速解决当前已知的代码质量问题，从而在开发过程中保持代码的整洁和可读性。 * 解决持续集成（CI）失败问题 当一个提交被推送到服务器后，CI 流水线报告了因 linting 或格式错误导致的失败。此时你可以在本地对应的分支上运行此 Skill，让 AI 自动修复格式问题，并列出需要手动更正的 linting 错误，帮助你快速定位并解决问题，然后提交修复。

除 SKILL.md 文件外，该 Skill 中还包含以下文件：

• references/CODE-TO-DOCS-MAPPING.md：定义了源代码和文档之间的映射关系。简单来说，它就像一张地图，告诉 AI 当某个代码文件发生变化时，应该去更新哪个文档文件。
• references/DOC-CONVENTIONS.md：风格指南和规则手册，详细规定了文档的格式、结构和写作风格，以确保所有文档都保持一致性和高质量。

* 分析代码变更对文档的影响 提交代码变更后，可以调用该 Skill 来分析哪些文档文件需要更新。 它会通过 git diff 命令检查你的分支与 canary 分支之间的差异，并根据预定义的映射关系 (references/CODE-TO-DOCS-MAPPING.md)，找出与变更的代码文件相对应的文档文件。 * 更新现有的文档 对于已经存在的文档，当其对应的功能或 API 发生变化时（例如组件新增了 props、函数行为变更），该 Skill 会引导你更新现有文档。 它会提示你如何添加或修改 props 表格、更新代码示例、添加废弃通知等，并遵循项目固有的文档规范（例如，使用 <AppOnly> / <PagesOnly> 来区分不同路由的内容）。 * 为新功能创建脚手架文档 当你在项目中添加了一个全新的功能时（例如一个新的组件、函数或配置项），该 Skill 可以帮你快速创建符合规范的新文档。 它为不同类型的文档（如 API 参考、指南）提供了标准模板，确保新文档的结构、命名和元信息（Frontmatter）都符合项目要求。

该 Skill 主要作用帮助你发现并安装 Agent Skill。

它依托名为 skills 的命令行工具（CLI），让你可以从开放的 Agent Skill 生态中搜索、安装与管理各类模块化技能包；这些技能可扩展 Agent 能力，为其补充特定领域知识、标准化工作流与工具能力。

* 探索未知的 Skill 当你希望 Agent 帮忙处理某个特定领域的任务，但不确定 Agent 是否具备相应能力时，可以使用此 Skill 进行探索。例如，当你询问 “你能帮我评审代码吗？” 或 “如何为我的项目生成文档？” 时，该 Skill 会被激活，主动在技能市场中搜索与 “代码评审” 或“ 文档生成” 相关的能力，并将找到的可用技能呈现给你. * 查找特定的 Skill 当你明确知道需要一个 Skill 来解决特定问题，但不知道具体是哪个 Skill 时，可以主动调用此 Skill 进行精确查找。例如，你可以直接说 “帮我找一个用于 React 性能优化的 skill”，该 Skill 会将 “React 性能优化” 作为关键词进行搜索，并返回最匹配的技能选项，如 “vercel-react-best-practices”。 * 提供可执行的 Skill 安装建议 当该 Skill 找到一个或多个匹配的 skill 后，它会自动整理并输出一份标准化的推荐信息。这份信息不仅包含技能的名称和功能简介 ，还会提供 一键安装指令 (npx skills add ...) 以及指向技能详情页的官方链接 。