Agent Skills
› vercel-labs/agent-skills
vercel-labs/agent-skills
GitHub提供React组件组合模式指南，解决布尔prop泛滥问题。适用于重构、构建可复用库、设计API及审查架构，涵盖复合组件、状态提升及React 19新特性。
Install All Skills
npx skills add vercel-labs/agent-skills --all -g -y
Skills in Collection (9)
提供React组件组合模式指南，解决布尔prop泛滥问题。适用于重构、构建可复用库、设计API及审查架构，涵盖复合组件、状态提升及React 19新特性。
重构包含大量布尔prop的组件
构建可复用的组件库
设计灵活的组件API
审查组件架构
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -g -y
用于将应用部署到 Vercel，支持预览和正式环境。通过检测 Git 状态、本地链接及 CLI 认证情况，智能选择最佳部署方式（如 Git Push），并自动获取部署链接，优化长期配置。
用户请求部署应用或网站
要求生成预览部署链接
执行 push live 操作
npx skills add vercel-labs/agent-skills --skill deploy-to-vercel -g -y
提供Vercel工程的React与Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端渲染等规则。适用于编写、审查或重构前端代码以提升应用性能。
编写新的React组件或Next.js页面
实施客户端或服务端数据获取逻辑
审查代码以发现性能瓶颈
重构现有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
指导通过环境变量配置 Vercel CLI 令牌和项目 ID，实现无交互式登录的自动化部署与管理，涵盖令牌定位、环境设置及安全最佳实践。
部署到 Vercel
设置 Vercel 项目
添加 Vercel 环境变量
npx skills add vercel-labs/agent-skills --skill vercel-cli-with-tokens -g -y
用于审查前端UI代码是否符合Web界面指南，检查可访问性和UX最佳实践。通过Fetch获取最新规则并输出文件行号格式的问题报告。
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 中使用 View Transition API 实现原生流畅动画，支持页面过渡、路由切换及共享元素效果。适用于 Next.js 或需手动安装 canary 版本的 React 项目，提供优先级实施模式与浏览器兼容性降级方案。
添加页面过渡动画
实现路由变化动画
创建共享元素动画
组件进入/退出动画
列表重排序动画
方向性导航动画
Next.js 中集成视图过渡
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions -g -y
针对Vercel部署项目（Next.js等）进行成本与性能优化审计。通过收集指标数据，基于信号生成排名建议，降低账单并提升性能。
Vercel费用降低
路由缓慢或昂贵
缓存机会
核心Web指标优化
npx skills add vercel-labs/agent-skills --skill vercel-optimize -g -y
