review-react
来自 Vercel Engineering 的 React 与 Next.js 性能优化准则，用于编写、审查或重构 React/Next.js 代码时参考，包含 8 大类共 57 条按影响优先级排序的规则，指导自动化重构与代码生成。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-30 00:12
前端与建站
11,293 个结果
vercel-react-best-practices
来自 Vercel Engineering 的 React 与 Next.js 性能优化指南技能，包含按影响优先级划分的 70 条规则，用于编写、审查或重构 React/Next.js 代码时参考。
web-design-guidelines
依据 Web Interface Guidelines 审查 UI 代码的合规性技能，适用于“review my UI”“check accessibility”“audit design”“review UX”等请求，输出简洁的 file:line 格式检查结果。
ship-docs
ship-docs 是 trailhq/trail-code 提供的一个技能，用于构建并发布文档站点。当需要将已完成或已更新的文档发布上线时，可使用该技能。根据资料，其操作方式为运行 make docs 构建文档，再运行 make publish-docs 发布文档；在执行发布前需先运行 make docs-check 进行检查，因为存在断链会导致发布失败。资料未提及具体的部署平台、托管方式、收费模式、支持的文档格式或回滚机制，这些信息暂未提供。该技能适合在维护项目文档、需要将文档站点更新对外可见的场景中使用，依赖项目内已有的 Makefile 目标。
Shade new component
Shade 新增或修改组件/模式的验收清单，涵盖文件命名、同级 stories、className 转发、cva 变体、必需状态与语义 token 等要求，完成前需逐项通过。
Shade ShadCN install
Shade 项目中使用 ShadCN CLI 添加组件时的安全护栏：只用 pnpm，先建干净分支，已存在组件不得覆盖，需改用暂存仓库移植；新增文件后要把原始颜色换成语义 token、删除 dark: 变体、统一用 @/ 别名，并补齐状态、故事与 forwardRef。
umbraco-multilingual
该技能用于在 Umbraco 17+ 的 Razor 站点上搭建和调试多语言（多 culture）站点，适用于同一份内容存在多语言版本的情况。介绍内容涵盖语言与回退、按 culture 变化的文档类型与属性、按 culture 配置域名、变体渲染、语言切换器与 hreflang，以及附加 culture 的注册方式。技能面向 Razor 站点，Headless/Content Delivery API 前端暂不在范围内；使用前需确认站点为 Umbraco 17+，其中区块的语言回退需 17.4+。
vccs-usage
vccs-usage 是 vccs（Vue 3 图表库）随 npm 包提供的使用指南检索工具，用于在 Vue/Nuxt 应用中查找并获取针对具体图表任务的实现指南。它通过消费项目自身的包管理器运行，确保指南与应用所用的 vccs 版本一致。用户先用面向动作的查询搜索使用场景，再用逗号分隔的 ID 检索所选图表指南及任务所需的共享指南（如 installation、vue-api、typed-rows、ssr-testing），随后按检索到的数据结构和最小示例实现，并核对属性与插槽、运行类型检查与构建。
frontend-ui-engineering
前端 UI 工程技能，覆盖组件架构、设计系统一致性、状态管理、响应式设计与 WCAG 2.1 AA 无障碍标准。适用于构建或修改面向用户的界面，强调可访问、响应式与一致性是完成标准。
forms-and-validation
面向 Vaadin 25 Flow 的 Claude 技能，指导使用 Binder 构建表单并实现多层校验，涵盖缓冲/直写模式、字段绑定、转换器、验证器与 FormLayout 布局，适合需要用 Java 编写 Vaadin 表单的开发者。
frontend-design
frontend-design 是一个面向 Vaadin 25 的 Claude 技能，用于指导 Claude 创建视觉上更具辨识度、更精致的 Vaadin 界面，突破默认主题样式，产出生产级代码。它要求使用 Vaadin MCP 工具查询最新文档，并固定 vaadin_version 为 25、ui_language 为 java。技能涵盖设计思考、主题系统、排版、颜色、间距、阴影与边框、动效以及组件打磨，并给出 Aura 与 Lumo 两套主题的自定义方式、Lumo 工具类和 CSS ::part() 的用法，同时列出常见反模式与最佳实践。
responsive-layouts
该技能用于指导 Claude 构建适配不同屏幕尺寸的 Vaadin 25 响应式布局。它明确了响应式的设计理念：让界面根据可用屏幕空间呈现恰当的信息量与交互方式，而非简单压缩或拉伸元素。技能给出三种递进策略：小屏幕减少功能、构建响应式界面（推荐默认方案）、构建独立界面。它列举了 Vaadin 内置响应式组件（AppLayout、Dashboard、FormLayout、MenuBar、Tabs、Context Menu、Dialog、CRUD、Date Picker/Select 等）的自动适配行为，并说明 CSS 媒体查询、CSS 容器查询以及 Lumo 工具类（仅 Lumo 主题可用）三种实现方式及断点体系，还提供可折叠筛选面板、响应式卡片网格等模式与最佳实践（以 CSS 而非服务端检测实现响应式、移动优先、复用内置组件、优先容器查询、面向流式尺寸）。
theming
面向 Vaadin 25 的主题配置技能，指导在 Aura 与 Lumo 两套主题间选择、加载与定制，覆盖颜色、暗色模式、字体、间距、阴影、组件变体与最佳实践。
third-party-components
该技能指导 Claude 在 Vaadin 25 Flow 应用中集成来自 npm 的第三方 Web Components 与 React 组件，帮助选择合适的集成路径并正确使用相关注解、状态同步与事件机制。
vaadin-layouts
Vaadin Layouts 是一个面向 Claude 的技能，用于指导其在 Vaadin 25 中正确使用 HorizontalLayout 与 VerticalLayout。技能强调在不确定 API 细节时，应通过 Vaadin MCP 工具（search_vaadin_docs、get_component_java_api、get_component_styling）查询最新文档，并将 vaadin_version 设为 "25"、ui_language 设为 "java"。内容涵盖何时不应使用这两种布局（应用外壳用 AppLayout、卡片网格用 Dashboard、二维网格用 CSS Grid、表单用 FormLayout），FlexLayout 的定位，两者的默认行为差异（VerticalLayout 宽度 100%、内边距开启；HorizontalLayout 宽度自适应、内边距关闭），对齐、间距、内边距、外边距、flex 扩展、Vaadin 25 中 setWidthFull/setHeightFull 的新行为、溢出处理、换行以及最佳实践。
views-and-navigation
该技能为 Claude 提供在 Vaadin 25（Java/Flow）中创建视图与实现导航的指导。内容涵盖用 @Route 创建视图、派生与显式路径、@RouteAlias 路由别名、@PageTitle 与动态标题、@Menu 菜单注册，以及路由布局（RouterLayout、@Layout、AppLayout、嵌套布局 @ParentLayout 与 @RoutePrefix）。同时讲解视图间导航（RouterLink、UI.navigate()、封装静态导航方法）、向 React/Hilla 视图跳转，以及数据传递方式（HasUrlParameter、@OptionalParameter、@WildcardParameter、路由模板与正则约束、查询参数），并给出主从（master-detail）模式示例。
fast-link
Fast Link 是一款前端导航优化工具，核心思路是在用户按下鼠标（pointerdown）时即开始页面跳转，而不必等到点击完成（click），从而让符合条件的链接导航显得更快。它通过 @fast-link/next 与 @fast-link/react 等包提供集成，覆盖 Next.js 与普通 React/DOM 场景，可用于快速链接的接入、迁移、排障与代码审查。该工具仅对主鼠标按键生效，触摸、触控笔、键盘激活、带修饰键的点击、下载、外部 URL、非 _self 目标、纯哈希链接以及嵌套控件上的按下仍走正常路径；对发布敏感的操作（确认、购买、破坏性操作、表单、拖拽收藏等链接）应保持原生行为。它提供区域（region）、每条链接选项、data-no-fast-link 退出机制、enabled={false} 禁用区域处理、守卫与基础路径配置等能力。使用时需先检查依赖清单、链接组件与路由配置，复用已有集成，再选择 createFastLink 或 React 的 useFastLink 适配器，并验证键盘与修饰激活、守卫与退出、历史与滚动、ref 与控制器生命周期等行为。
next-partial-prefetching-adoption
这是 Next.js 官方维护者技能，用于在应用中启用部分预取（Partial Prefetching），并借助 dev 覆盖层的洞察排查并逐项完成改造，让每个 Link 复用共享的 App Shell。
styled-jsx
styled-jsx 是 Vercel 的 CSS-in-JS 库，为 React 组件提供作用域隔离的完整 CSS 支持，随 Next.js 默认集成。本文介绍组件内样式、动态样式、全局样式、外部样式与子组件样式等用法及主要限制。
frontend-design
面向前端界面设计的思维与决策技能，用于设计组件、布局、配色、字体与美学界面，强调先分析约束、主动向用户提问，并避免AI常见的模板化设计倾向。
nextjs-best-practices
面向 Next.js App Router 开发的实践原则，涵盖服务端与客户端组件划分、数据获取、路由约定、API 路由、性能优化、元数据、缓存、Server Actions 及项目结构。
tailwind-patterns
Tailwind CSS v4 原则与模式参考，涵盖 CSS-first 配置、容器查询、现代布局、设计令牌架构与性能要点，适合前端与设计系统开发时查阅使用方法与常见反模式。
async-effect-race-contracts
针对 React 中裸 useEffect/useLayoutEffect 处理异步副作用（fetch、订阅、事件监听、定时器）的排查契约，覆盖竞态、清理、StrictMode 幂等、陈旧闭包、依赖数组和晚订阅问题，附命令与审查门槛。
react-effect-decision
一项针对 React 项目的编码规范技能：在编写、审查组件时优先避免直接使用 useEffect，把可派生状态放在渲染中计算，事件逻辑放回事件处理器，用 key 重置状态，并仅在真正的外部同步场景才使用 effect。