vercel-react-best-practices
Vercel 官方维护的 React 和 Next.js 性能优化指南，包含 8 大类别下按优先级排序的 70 条规则，覆盖瀑布流消除、包体积优化、服务端性能、数据获取、重渲染优化等场景，用于自动化重构和代码生成。
适合编写或重构 React 组件、Next.js 页面时的性能优化
SKILL 分类
前端与 React
React 组件、性能、前端工程质量和生产级界面开发相关的 Agent Skills。
- Skill
- 6
- 主要指标
- 安装量
按榜单顺序
前端与 React Skills
6 个结果
vercel-composition-patterns
一套用于构建灵活、可维护 React 组件的组合模式，避免布尔属性泛滥，通过复合组件、提升状态和组合内部结构来构建可扩展的组件 API，并包含 React 19 API 变更。
适合重构具有许多布尔属性的组件
shadcn
shadcn/ui 技能用于管理 shadcn 组件和项目，涵盖添加、搜索、修复、调试、样式化及组合 UI（包括聊天界面）。提供项目上下文、组件文档和使用示例，适用于使用 shadcn/ui、组件注册表、预设（--preset）或任何带 components.json 文件的项目。
适合使用 shadcn/ui 构建组件和设计系统
webapp-testing
该技能提供使用 Playwright 测试本地 Web 应用的指南，包括单元、集成和端到端测试模式。它包含辅助脚本（如 with_server.py）用于管理服务器生命周期，并指导用户采用先侦察后行动的模式：先等待网络空闲，检查渲染后的 DOM，再选择选择器执行操作。强调将脚本作为黑盒调用，避免污染上下文窗口。
适合测试本地 React 或前端 Web 应用
tailwind-design-system
用于用 Tailwind 实现设计系统，覆盖 design token、组件变体与组件模式，方便统一页面视觉规范和复用结构。
适合搭建 Tailwind 设计系统时。
typescript-advanced-types
typescript-advanced-types 是 wshobson/agents 仓库中的一项技能，归入“前端与 React”类别，在安装热度榜中排第 409 位，安装量 83604（据 skills.sh 公开 all-time 榜单）；其描述为 TypeScript 高级类型模式，涵盖可辨识联合（discriminated unions）、条件类型（conditional types）、模板字面量（template literals）与工具类型模式（utility type patterns）。该技能属于一个包含 94 个插件、202 个 agents、184 个 skills、105 个 commands 的集合，可通过 npx skills add 以“仅技能”方式安装，安装器直接从 GitHub 读取技能而不克隆仓库，且不会一并安装插件的 agents、commands 或 hooks。
适合在 TypeScript 项目中使用可辨识联合组织类型