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变更，适用于重构复杂组件、构建可复用库或审查架构设计。
重构包含大量布尔属性的组件
构建可复用的组件库
审查组件架构设计
使用复合组件或上下文提供者
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -g -y
用于将应用部署到 Vercel，支持预览和生产环境。通过检测 Git 远程、Vercel 链接状态及 CLI 认证情况，智能选择 Git Push 或 CLI 命令进行部署，并处理团队选择与 URL 获取。
deploy my app
deploy and give me the link
push this live
create a preview deployment
npx skills add vercel-labs/agent-skills --skill deploy-to-vercel -g -y
提供Vercel官方React与Next.js性能优化指南，涵盖消除瀑布流、包体积优化及服务端性能等70条规则。适用于编写、审查或重构代码时的性能改进任务。
编写新的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
通过CLI和Token认证在Vercel上部署和管理项目，自动处理Token、项目ID及团队范围的配置，确保环境变量安全使用。
部署到 Vercel
设置 Vercel 环境
向 Vercel 添加环境变量
npx skills add vercel-labs/agent-skills --skill vercel-cli-with-tokens -g -y
用于审查 Web 界面代码是否符合设计规范、可访问性及 UX 最佳实践，通过获取最新指南并检查文件输出问题。
review my UI
check accessibility
audit design
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
npx skills add vercel-labs/agent-skills --skill writing-guidelines -g -y
指导在 React 中使用 View Transition API 实现原生流畅动画，涵盖页面切换、共享元素及组件状态变化，支持 Next.js 集成与优雅降级。
需要添加页面过渡或路由变化动画
实现共享元素动画或列表重排序
询问 ViewTransition 组件或 startViewTransition 用法
在不使用第三方库的情况下为 UI 状态变化添加动画
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
