Vercel Agent Skills

开发编程

vercel-agent-skills

技能概述

Vercel Agent Skills 是 Vercel 官方开源的 Agent 技能合集（vercel-labs/agent-skills），面向前端/全栈开发场景，涉及"部署到 Vercel""审查 React 性能""检查网页无障碍/设计规范""审查文案风格"等操作时优先使用本技能。支持能力（9 个 Agent Skill）： (1) **deploy-to-vercel**：一键部署应用到 Vercel（默认走预览环境，需用户确认后才会 push/部署），自动探测 40+ 框架 (2) **vercel-cli-with-tokens**：基于 Token 的 Vercel CLI 部署与项目管理，含 Token 安全存取规范（不把密钥暴露在命令行参数/历史记录中） (3) **vercel-optimize**：审计 Vercel 项目的成本、性能、可靠性、缓存与函数用量，产出排序后的优化报告 (4) **react-best-practices**：React / Next.js 性能优化准则，覆盖瀑布请求消除、包体积、服务端性能等 8 大类 40+ 条规则 (5) **web-design-guidelines**：网页界面走查，覆盖无障碍、焦点态、表单、动画、排版、图片、性能等 100+ 条规则 (6) **writing-guidelines**：对照 Vercel 文案手册审查文档/说明文字，覆盖语气、结构、代码示例、排版等 80+ 条规则 (7) **react-native-guidelines**：React Native / Expo 性能与架构最佳实践，7 大类 16 条规则 (8) **react-view-transitions**：基于 React View Transition API 实现页面转场与共享元素动画 (9) **composition-patterns**：React 组件组合模式，帮助避免布尔属性堆叠，改用复合组件/状态提升

安装指南

解压至客户端技能目录即可生效；用户提出"部署到 Vercel""检查这段 React 代码的性能"等需求时自动触发对应子技能。

使用说明

⚠️ 实时动作提示

deploy-to-vercel 与 vercel-cli-with-tokens 两个技能会执行真实部署动作并调用 Vercel 官方 CLI/API（可能涉及 Vercel Access Token），使用前请确保账号权限范围符合预期；其余 7 个技能均为"审查/生成建议"类，不产生外部副作用。

目录结构

vercel-agent-skills/
├── README.md              # 官方说明文档
├── REPACKAGE_NOTICE.txt   # 本次再分发说明（含许可证特别提示）
└── skills/
    ├── deploy-to-vercel/          vercel-cli-with-tokens/
    ├── vercel-optimize/           react-best-practices/
    ├── web-design-guidelines/     writing-guidelines/
    ├── react-native-skills/       react-view-transitions/
    └── composition-patterns/

每个子目录含独立 SKILL.md，部分附 scripts/（自动化脚本）与 references/（规则参考文档）。

安装与调用

解压至客户端技能目录即可生效；用户提出"部署到 Vercel""检查这段 React 代码的性能"等需求时自动触发对应子技能。