vercel-react-best-practices
Vercel 官方维护的 React 和 Next.js 性能优化指南，包含 8 大类别下按优先级排序的 70 条规则，覆盖瀑布流消除、包体积优化、服务端性能、数据获取、重渲染优化等场景，用于自动化重构和代码生成。
适合编写或重构 React 组件、Next.js 页面时的性能优化
前端产品质量栈
从 React 性能、组件组合、设计系统到浏览器测试，适合把前端界面做成可上线、可维护的产品。
- 收录
- 6 个 Skill
- 顺序
- 按专题推荐流程
从第一项开始使用
专题内 Skills
6 个结果
vercel-composition-patterns
一套用于构建灵活、可维护 React 组件的组合模式，避免布尔属性泛滥，通过复合组件、提升状态和组合内部结构来构建可扩展的组件 API，并包含 React 19 API 变更。
适合重构具有许多布尔属性的组件
frontend-design
为构建具有独特视觉设计的 UI 提供指导，涵盖美学方向、排版和避免模板化默认选择。
适合构建新 UI 时追求独特视觉风格
web-design-guidelines
该技能通过从指定 URL 获取最新的 Web Interface Guidelines，读取用户指定的文件或模式，并对照所有规则进行审查，最终以简洁的 file:line 格式输出发现的问题。
适合审查 UI 代码与设计规范的一致性
webapp-testing
该技能提供使用 Playwright 测试本地 Web 应用的指南，包括单元、集成和端到端测试模式。它包含辅助脚本（如 with_server.py）用于管理服务器生命周期，并指导用户采用先侦察后行动的模式：先等待网络空闲，检查渲染后的 DOM，再选择选择器执行操作。强调将脚本作为黑盒调用，避免污染上下文窗口。
适合测试本地 React 或前端 Web 应用
playwright-cli
playwright-cli 是微软官方仓库 microsoft/playwright-cli 提供的浏览器自动化 CLI 技能，用于通过命令行控制实时浏览器完成交互、检查与回放。命令覆盖核心操作（open/goto/click/type/fill/drag/drop/hover/select/upload/check/snapshot/find/eval/dialog/resize）、导航、键盘鼠标、截图与 PDF、多标签页、存储状态（cookies/localStorage/sessionStorage 及 state-save/state-load）、环境模拟、网络路由 mock、DevTools 调试（console/requests/run-code/tracing/recording/video）、WebMCP 页面工具调用，以及从 ref 或选择器生成 Playwright locator。默认每条命令后输出当前页面快照，可用 refs、CSS 选择器或 Playwright locator 定位元素；支持 --raw、--json 结构化输出，并可通过 --extension、--cdp 连接已有浏览器、使用命名会话管理多个浏览器实例。
适合让 Agent 打开真实浏览器并执行点击、填写、上传、拖拽、悬停等页面交互