Agent Skills
› vercel-labs/agent-skills
vercel-labs/agent-skills
GitHub提供React组件组合模式指南，解决布尔属性泛滥问题，涵盖复合组件、状态提升及React 19新API，助力构建可复用、易维护的组件架构。
Install All Skills
npx skills add vercel-labs/agent-skills --all -g -y
Skills in Collection (9)
提供React组件组合模式指南，解决布尔属性泛滥问题，涵盖复合组件、状态提升及React 19新API，助力构建可复用、易维护的组件架构。
重构含大量布尔属性的组件
构建可复用组件库
设计灵活的组件API
审查组件架构
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -g -y
用于将应用部署到 Vercel，支持预览和生产环境。自动检测项目状态（Git远程、Vercel链接、CLI认证），智能选择最佳部署方式（如Git Push或直接部署），并处理多团队选择，最终返回部署链接。
用户请求部署应用
要求获取部署链接
发布到生产环境
创建预览部署
npx skills add vercel-labs/agent-skills --skill deploy-to-vercel -g -y
基于Vercel工程团队的React和Next.js性能优化指南，涵盖70条规则。用于指导代码编写、审查与重构，解决瀑布流请求、包体积过大及渲染性能等问题，确保应用达到最佳性能标准。
编写或重构React组件和Next.js页面
实施客户端或服务端数据获取逻辑
审查代码以识别和修复性能瓶颈
优化JavaScript包体积或加载速度
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices -g -y
提供 React Native 和 Expo 应用开发的最佳实践，涵盖性能优化、动画实现、UI 模式及原生模块配置等规则。
构建 React Native 或 Expo 应用
优化列表滚动性能
实现 Reanimated 动画
处理原生模块或字体配置
npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills -g -y
通过配置环境变量而非交互式登录，使用 Vercel CLI 进行项目部署、环境管理及团队关联，支持 Token 自动识别与快速部署。
用户要求部署到 Vercel
用户需要在无交互环境下管理 Vercel 项目
用户需要设置或读取 Vercel 相关环境变量
npx skills add vercel-labs/agent-skills --skill vercel-cli-with-tokens -g -y
审查Web界面代码是否符合设计规范与最佳实践。自动获取最新指南，检查文件合规性，输出具体行号问题，支持UI、UX及无障碍审计。
review my UI
check accessibility
audit design
review UX
npx skills add vercel-labs/agent-skills --skill web-design-guidelines -g -y
审查文档或文本是否符合写作规范。自动获取最新指南，检查文件并输出违规行号，支持指定文件或提示用户选择。
review my docs
check writing style
audit prose
review docs voice and tone
check this page against the writing handbook
npx skills add vercel-labs/agent-skills --skill writing-guidelines -g -y
指导在React中实现原生View Transition API，用于页面路由切换、共享元素及组件状态动画。支持Next.js集成与优雅降级。
用户希望添加页面过渡动画
需要实现路由变化或组件进入/退出动画
询问ViewTransition组件或CSS伪元素用法
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions -g -y
针对 Vercel 部署项目的成本与性能优化技能，支持 Next.js 等框架。通过收集指标、使用确定性门控筛选候选项，生成基于证据的优化建议，旨在降低账单并提升性能。
Vercel 账单费用过高
路由响应缓慢或计算昂贵
缓存策略优化需求
构建分钟数或数据传输成本分析
核心 Web 指标（CWV）改善
npx skills add vercel-labs/agent-skills --skill vercel-optimize -g -y
