vercel-react-best-practices
面向 React 与 Next.js 的性能优化规则集，源自 Vercel Engineering，共 62 条规则分 8 类并按影响优先级排序，用于编写、审查或重构代码时参考。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-31 00:15
前端与建站
11,327 个结果
great-interfaces
一套用于打造精致界面的设计工程原则，涵盖排版、表面、动画与性能细节，适合在构建 UI 组件或审查前端代码时参考。
web-clone
Web Clone 是一套把“复刻一个网站”做成可重复流程的方法论技能，配套在 ~/projects/website-clones/ 下为每个复刻建立独立子目录工程。其核心铁律是“真源码至上”，认为 AI 生成的复刻分析中可执行代码块默认为臆造，必须逐行用真源码核对。流程从建立标准工程骨架开始，先搜 GitHub 源码，找不到再走浏览器侦察，按复杂度 L1-L6 定级并选择忠实复刻、视觉复刻或内容爆改模式，随后按静态 HTML、React/Vue/Next、SPA、多页面官网、复杂交互、WebGL/Canvas 等不同路径选择做法。技能内置一组 Node 脚本用于侦察、素材采集、网络捕获、路由爬取、交互探针、sourcemap 搜寻、镜像、视觉对比与审计，并产出 NOTES.md、TEARDOWN.md、CLONE_REPORT.md 等文档。适用场景为静态营销页、企业官网、内容型前端与可获取源码的动画站；登录、支付、服务端业务逻辑等默认不承诺克隆。
tailwind-to-cva
tailwind-to-cva 是一个用于结构化迁移大型 React + TypeScript + Tailwind 代码库的技能：把内联、重复的工具类改为 CVA 变体契约，并将原始组件规范化为 ui/ 包装组件。适用于增量迁移，不用于视觉重设计。
tinyworld-render-performance
Tiny World Builder 的渲染性能优化技能：约束单次渲染通道，管理阴影、烟雾、体素云与幽灵板渲染开销，限制 DPR 并动态调整分辨率，通过几何缓存、实例化合批与材质共享降低 GPU 绘制调用，并处理反射、瀑布、星空等特效的性能与资源释放规则。
tinyworld-settings
Tiny World Builder 的设置弹窗维护技能，用于修改设置界面中的标签页、面板、控件，以及渲染、世界、材质、环境、人群与 AI 等设置项及其无障碍支持。该技能说明设置位于 tiny-world-builder.html 的 #render-modal 内，要求保持单文件静态应用的现有结构：保留 data-settings-tab 取值、控件 ID、ARIA 角色与键盘导航，设置搜索仅作为界面层、不改控件名，并保证移动端卡片高度受控、面板内部滚动。技能还给出各标签页的分组建议、校验要求与响应式检查项。
tinyworld-tool-icons-and-modes
这是 Tiny World Builder 的技能说明，聚焦于模式指示、启动工具选择、Esc 键退回选择工具、构建/游玩模式、展示模式、五种视图模式以及底部工具栏与浮动方块面板的切换等界面行为约束。它主要供修改该项目的界面与交互逻辑时参考，涉及启动流程、欢迎弹窗、多人房间与步行模式的互斥处理、小屏适配和静态测试守卫等细节。
tinyworld-webxr
Tiny World WebXR 是 Tiny World Builder 中用于添加或修改 WebXR、AR 放置、VR 沉浸、头显控制器输入及 XR 渲染模式的技能。它要求 WebXR 集成保持原生单文件形式，使用固定版本的 THREE r185 全局兼容包，不使用运行时模块导入或 ARButton/VRButton 插件。该技能区分 WebXR 与 Apple AR：Android Chrome/Quest 通过 immersive-ar 加 hit-test 实现 Google AR，Apple 设备则通过 AR Quick Look 打开 USDZ 模型。它涵盖按需用 THREE.USDZExporter 导出 USDZ、材质转换与桌面尺寸缩放、基于 navigator.xr 和 relList 的按钮能力检测、renderer.xr 与 setAnimationLoop 的渲染循环、xrWorldRoot 坐标系管理、控制器射线拾取与坐标转换、AR 桌面模式/浮动模式/室内 VR 模式的会话参数与回退策略，以及会话结束后的状态恢复。实际 AR 入口需 HTTPS 和支持 WebXR 的浏览器或头显。
improve-codebase-architecture
该技能扫描代码库中的架构深化机会，将浅模块重构为深模块以提升可测试性与 AI 可导航性，并以可视化 HTML 报告呈现候选方案，供用户挑选后通过 grilling 流程逐步细化。
shopify-storefront-headless
介绍用 Shopify Storefront API 与 Cart API 构建自定义无头店面的技能，涵盖公开访问令牌客户端配置、购物车生命周期、商品查询，以及 Storefront 与 Admin API 的选型对比，适用于自建前端、移动应用和 Hydrogen 项目。
stackblitz-core-workflow-b
用于在网页中集成 StackBlitz JavaScript SDK 嵌入的技能，支持已有 StackBlitz 项目、公开 GitHub 路径或内联项目，并明确加载策略、UI 选项、持久化预期与响应式行为。
vercel-upgrade-migration
用于在 Vercel 上升级 Vercel CLI、Node.js 运行时与 Next.js 框架版本，并检测破坏性变更、迁移 vercel.json 配置、制定回滚策略的技能。
webflow-core-workflow-a
用于操作 Webflow CMS 暂存与线上发布生命周期的技能，支持可审查的内容创建、更新、发布、取消发布与归档，强调先只读发现、分阶段修改并需用户明确授权后才执行写操作。
webflow-migration-deep-dive
该技能用于将外部或跨站点内容迁移到 Webflow CMS，强调模式映射、分批导入、对账与受控发布，要求在操作前只读勘察，发布须单独审批，并保留快照与回滚方案。
components-composition-patterns
一套用于构建可扩展 React 组件组合模式的技能，通过复合组件、状态提升与上下文提供者等方式规避布尔属性膨胀，适合在重构布尔属性过多的组件或设计灵活的多部分组件 API 时使用。
core-web-vitals
Core Web Vitals 参考资料，用于按 Google 阈值测量、诊断并改进 LCP、INP、CLS 页面性能。
css-architecture
用于组织可扩展、易维护 CSS 的技能，涵盖 BEM、SMACSS、CSS-in-JS 等命名与架构方法，适合建立类名规范、分层样式体系和设计令牌。
frontend-delivery-loop
前端交付循环技能：由编排者驱动多个子智能体，反复执行测试、诊断、修复、评审与复测，直到端到端与评审全部通过，适用于前端开发与缺陷修复。
frontend-fundamentals
Frontend Fundamentals 是一个浏览器层面的前端系统设计参考库，采用按需加载的渐进式披露方式，每个参考文件只在任务需要时读取。内容覆盖盒模型与 box-sizing、盒子类型（block/inline/anonymous）、格式化上下文、定位系统与包含块规则；层叠上下文与 DOM→渲染树→重排→重绘→合成管线、GPU 合成动画、渲染层与图形（合成器）层；DOM 类层次结构、查询方法性能、增删性能影响、DocumentFragment 与 <template> 批量插入；Intersection/Mutation/Resize 观察器与 resize 机制决策表；滑动窗口虚拟化技术（上下观察器、元素池、回收与 translateY 定位数学）；客户端状态设计（数据类与属性、1NF–3NF 规范化、Web Worker 上的倒排/复合索引、内存卸载、浏览器存储选项）；网络传输（UDP/TCP 与协议栈、长轮询/SSE/WebSocket 对比、REST 与 GraphQL 启发式）；以及 Web 性能（Core Web Vitals 指标 LCP/INP/CLS、网络与 HTTP、JS 打包、CSS 关键路径、图片格式、字体加载）。其核心准则是：Web UI 应用不要阻塞主线程（UI 线程）。
nextjs-best-practices
Next.js App Router 开发最佳实践指南，涵盖 Server 与 Client 组件划分、数据获取模式、路由约定、API 路由、性能优化、元数据、缓存策略、Server Actions 及常见反模式，帮助开发者按官方推荐方式组织 Next.js 项目结构。
nextjs-performance
用于 Next.js 性能优化的技能，覆盖 Core Web Vitals、图片与字体优化、缓存、流式渲染、包体积和 Server Components，适合排查和修复 LCP、INP、CLS 等问题。
pro-state-machine
面向 React 的专业状态机模式技能，通过类型安全设计让非法状态无法表示，适用于复杂状态逻辑、reducer、多步表单与异步流程。
react-best-practices
面向 TSX/JSX 的 React/Next.js 最佳实践审查技能，在编写或审查 React 组件时触发，检查结构、Hooks、无障碍与性能等。内容基于 Vercel 维护的 React 最佳实践，含 8 类共 64 条按影响优先级排序的规则。
react-query
React Query 使用指南，涵盖数据获取、缓存与服务端状态同步，包含查询、变更、状态管理、性能与错误处理等主题，并列出应避免的反模式。