Vercel 官方前端 Agent 技能包（React / Next.js 性能与设计规范）
==============================================================
来源：GitHub 开源仓库 vercel-labs/agent-skills（Vercel 官方维护）
打包日期：2026-09-24
技能数量：9 个（原文件为 SKILL.md 标准格式，本包附中文说明）

【这个包是干什么的】
把 Vercel 团队内部写的"前端工程规矩"交给 AI 编码助手执行。
装上以后，AI 写 React / Next.js 代码时会自动按大厂的性能清单、可访问性清单
和文案写作规范来改，而不是随手生成一堆能跑但很慢、无障碍糟糕的代码。
其中 react-best-practices 收录了 40+ 条 React / Next.js 性能规则（异步瀑布流、
包体体积、重渲染优化等），web-design-guidelines 收录 100+ 条交互与可访问性
检查项。

【包含哪些技能】
  react-best-practices        React / Next.js 性能优化规则集（40+ 条）
  web-design-guidelines       Web 设计规范 / 可访问性检查（100+ 条）
  writing-guidelines          官方文案与写作规范
  composition-patterns        React 组件组合模式
  react-native-skills         React Native 移动端开发规范
  react-view-transitions      页面转场动画（View Transitions）
  vercel-optimize             项目性能体检与优化建议
  deploy-to-vercel            一键部署到 Vercel
  vercel-cli-with-tokens      用令牌免登录操作 Vercel CLI

【支持的 AI 编码工具】
Claude Code、Cursor、Codex CLI、Gemini CLI 等兼容 Agent Skills 开放标准
（SKILL.md）的工具。

【怎么安装】
方式一（推荐，一条命令）：
  在项目根目录执行  npx skills add vercel-labs/agent-skills
  只装指定技能：     npx skills add vercel-labs/agent-skills --skill react-best-practices

方式二（手动，离线可用）：
  1. 解压本压缩包，得到 skills 文件夹。
  2. 把 skills 下的技能目录复制到你的工具技能路径：
     - Claude Code：项目内 .claude/skills/
     - Cursor：项目内 .cursor/skills/
  3. 重新加载 AI 编码工具即可生效。

方式三（Claude Code 插件市场）：
  /plugin marketplace add vercel-labs/agent-skills
  然后按需选择安装。

【怎么用（示例提问）】
  "用 React 最佳实践审查这个页面的性能问题"
  "这个组件的重渲染为什么这么多？给出修改方案"
  "按可访问性规范检查这个表单"
  "帮我把这个站点部署到 Vercel"

【注意事项】
- 技能本质是 Markdown 规则文件，不会自动执行代码，请先审阅内容再用。
- 仓库根目录的 README 为英文原版，已一并保留（README-原版英文.md）。
- 本包为官方源码整理打包，内容未做二次修改，仅供学习研究使用，请遵守原
  仓库授权协议。
