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。适用于重构复杂组件、构建可复用库及审查组件架构。
重构包含大量布尔属性的组件
构建可复用的React组件库
设计灵活的组件API
审查组件架构
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -g -y
用于将应用部署到 Vercel 平台。支持自动检测项目状态、选择团队，并通过 Git Push 或 CLI 命令执行预览或生产环境部署，旨在引导用户建立最佳的长期 Git 集成配置。
用户请求部署应用
获取部署链接
创建预览部署
npx skills add vercel-labs/agent-skills --skill deploy-to-vercel -g -y
基于Vercel工程的React和Next.js性能优化指南，涵盖消除瀑布流、包体积优化及服务端性能等70条规则，用于指导代码编写、审查与重构以确保最佳性能。
编写或审查React/Next.js组件
实施数据获取策略
重构现有代码以提升性能
优化包体积或加载速度
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
提供基于 Token 认证的 Vercel CLI 自动化部署与管理指南，涵盖环境变量配置、项目定位及安全实践，支持无交互登录下的预览及生产环境发布。
部署到 Vercel
设置 Vercel 项目
向 Vercel 添加环境变量
npx skills add vercel-labs/agent-skills --skill vercel-cli-with-tokens -g -y
审查 UI 代码是否符合 Web 界面指南，支持检查可访问性、UX 审计及最佳实践。通过获取最新规则并比对指定文件，输出文件行号格式的问题发现。
review my UI
check accessibility
audit design
review UX
check my site against best practices
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/Next.js 中实现原生 View Transition API，涵盖页面路由、共享元素及列表重排等动画效果。提供组件用法、浏览器兼容处理及 CSS 样式指南，无需第三方库即可创建平滑 UI 状态过渡。
需要添加页面或组件间的平滑过渡动画
实现共享元素动画或路由切换动效
使用 React View Transition API 替代第三方动画库
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions -g -y
针对Vercel部署项目（Next.js等）的性能与成本优化审计。基于生产指标而非代码扫描，生成可验证的优化建议。支持账单降低、路由慢、缓存优化及核心Web指标提升，确保推荐有据可依。
Vercel账单费用优化
路由性能缓慢或昂贵
缓存策略优化
构建分钟数减少
数据传输加速
Core Web Vitals优化
npx skills add vercel-labs/agent-skills --skill vercel-optimize -g -y
