accessibility
这是一个 Claude 技能（Skill），名为 accessibility，来自 jezweb/claude-skills，用于构建符合 WCAG 2.1 AA 标准的无障碍网站。它涵盖语义化 HTML、正确的 ARIA 使用、焦点管理、屏幕阅读器支持、颜色对比度（正文文本 4.5:1）、键盘导航、表单可访问性以及自动化与手动测试流程。该技能与框架无关，无依赖，状态为 Production Ready，最后更新于 2026-01-14。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-16 00:02
前端与建站
9,062 个结果
stardust
stardust 是 Adobe skills 体系中的一项网站重设计技能，用于对现有网站进行引导式的多页重设计。它采用四阶段流水线：extract（抓取并捕获当前站点）、direct（确定视觉方向）、prototype（逐页重设计原型）、migrate（全站平台无关的静态 HTML 迁移）。该技能本身不执行具体设计工作，而是将设计工作委托给 impeccable 技能，且对 impeccable 存在硬依赖、不提供回退方案。用户只需表达意图，stardust 负责推理含义、提出计划并通过一组子命令执行。它支持断点续跑（通过 stardust/state.json 记录状态）、全自动 hands-off 模式（关闭交互式审批门），并涵盖预迁移规格、站点审计、部署、动态功能处理、保真度对比等一系列子技能。迁移流程分为保留设计的 replica 流程与重新设计的 redesign 流程，二者不可混用。
react-patterns
React Patterns 是一套面向生产级 React 应用开发的现代模式与原则集合，涵盖组件设计、Hook 模式、状态管理选型、React 19 新特性、组合模式、性能优化、错误处理、TypeScript 类型实践、测试原则以及常见反模式。它强调以组合为核心，通过小而专注的组件、合理的状态放置和按需优化来构建可维护的 React 应用，适合作为团队开发规范或学习参考。
react-dev
中文介绍正在整理，稍后补充。
tailwindcss
Tailwind CSS 开发技能，面向 JARVIS AI 助手界面的 utility-first 样式开发，帮助构建一致、可维护的 HUD（平视显示）设计。该技能以测试驱动开发（TDD）为先，要求先编写组件测试再实现样式；强调性能意识，需优化 CSS 输出体积与渲染性能；采用工具类优先的组合方式，在模式重复时提取组件或使用 @apply；在配置中定义 JARVIS 配色与间距以形成设计系统；遵循移动优先的响应式断点策略；默认暗色主题，HUD 始终为深色风格，并要求保持足够的对比度以满足可访问性。技能文件采用拆分结构，高级模式见 references/ 目录。风险等级为 LOW，属于样式框架，安全暴露面较小。主要用例包括全息 UI 面板样式、响应式 HUD 布局、过渡动画工具类以及自定义 JARVIS 主题配置。推荐依赖版本包括 tailwindcss ^3.4.0、@nuxtjs/tailwindcss ^6.0.0、tailwindcss-animate ^1.0.0，并建议使用 @tailwindcss/forms 与 tailwindcss-animate 插件。
setup-react-native-storybook
该技能用于在 React Native 项目中搭建 Storybook（@storybook/react-native v10），支持 Expo、Expo Router、React Native CLI 以及 Re.Pack（rspack/webpack）四种项目类型。它会根据项目结构自动选择对应的安装流程，通过 CLI 初始化生成 .rnstorybook/ 配置目录，并指导启用 WebSocket、配置故事文件匹配路径、包装打包器配置以及创建入口文件。适用于需要为 React Native 组件添加独立开发、预览与远程控制环境的场景。
typeset
typeset 是一个用于改进 UI 排版的技能，帮助修复字体选择、字号体系、层级、字重与可读性问题，让文字显得有意为之。它适用于用户提到字体、排版或文字可读性等场景。该技能通过评估当前排版的薄弱点，制定系统化改进方案，再逐项落实字体选择、层级建立、可读性修复、细节打磨、字重一致性和字号体系完整性，最后验证效果。适合希望提升界面文字清晰度与品牌调性的前端设计与开发工作。
i18n-sync
i18n-sync 是一个用于翻译与同步应用 JSON 语言文件的技能。它通过读取每个字符串在产品中出现的位置来翻译语言文件，保留项目原有的 JSON 结构、插值语法以及无关的翻译内容，并生成可审查的补丁，再通过项目现有的序列化器或精准文件编辑来应用，避免引入第二套本地化引擎。适用场景包括：新增源键需要目标语言翻译、引入新的目标语言、源文案变更后需复查现有翻译，以及用户要求翻译、本地化或同步 JSON 语言文件。使用时需先确认授权项目、源语言、目标语言和具体文件，确认源文件存在且可解析，并检查语言配置与解析后的文件路径（含符号链接）；若所有权或写入范围不清晰则只提出方案。工作流程包括：建立待办清单、收集用法上下文、按项目语气翻译、准备并应用和校验补丁、最终报告。翻译时遵循术语表与不翻译词，保留占位符、复数语法与必要标记。
adapt
Adapt 是一项用于将已有设计适配到不同 Web 使用情境的技能，覆盖窄屏、中等宽度、宽屏、嵌入式和打印等场景，帮助在不牺牲可用性、层级结构与目标尺寸的前提下完成调整。它属于 better-web-ui 技能集，使用时需先加载 $frontend-design 并遵循其中的情境收集协议；若尚无设计情境，则必须先加载 $setup。该技能强调适配不是简单缩放，而是重新思考体验：窄屏需重新布局、保证 44x44px 最小触控目标、使用渐进披露与精简导航；中等宽度适合双栏、主从视图与侧边面板；宽屏可展开多栏、常驻侧栏与丰富信息；打印与邮件则有各自的版式、内容与兼容要求。实现层面涉及 CSS Grid/Flexbox、容器查询、clamp()、媒体查询、响应式图片与触控适配，并需在真实设备上跨浏览器、跨方向、跨输入方式验证。文档还给出了明确的禁止事项，例如不得在窄屏隐藏核心功能、不得盲目使用通用断点、不得按比例缩小桌面布局充当响应式设计。
empty-state
empty-state 是一个用于设计空状态界面的技能，覆盖零数据、无结果、权限受限和错误等场景，帮助把空白区域变成有用的产品时刻，提供清晰的价值说明、明确的行动按钮，并减少无效界面元素。
form-validation
该技能用于实现表单验证，涵盖客户端验证、服务端同步以及实时错误反馈，并支持 TypeScript 类型安全。它整合了 React Hook Form、Formik、Vee-Validate 以及自定义验证器，适用于构建健壮的表单处理逻辑。当需要进行用户输入验证、表单提交处理、实时错误反馈、复杂验证规则或多步骤表单时，可以使用该技能。
accessibility-advocate
Accessibility Advocate 是一个面向无障碍动画设计的技能，用于在设计包容性动画、处理前庭功能障碍与运动敏感问题，或确保动画无障碍合规时使用。它把迪士尼动画十二原则放在包容性设计视角下逐条审视，给出每条原则的无障碍考量与包容性实现建议，并列出 WCAG 动画相关要求与实现清单，帮助开发者与设计师在保留动画表现力的同时降低对运动敏感用户的影响。
design-taste-frontend
这是一个面向前端开发的高能动性技能（Skill），定位为资深 UI/UX 工程师，用于在生成数字界面时覆盖大语言模型默认的设计偏好。它通过一组可配置的基线参数（设计变化度 8、动效强度 6、视觉密度 4）驱动生成逻辑，并强制执行基于度量的规则、严格的组件架构与 CSS 硬件加速等性能约束。技能涵盖默认技术栈约定（React/Next.js、Tailwind CSS、RSC 安全、依赖校验）、设计工程指令（字体、配色、布局、材质、交互状态、表单模式）、反 AI 套路规则（禁用 emoji、禁用 Inter 字体、禁用 AI 紫、禁用纯黑、禁用三列卡片等），以及一套高端创意组件与动效参考库。适用于需要产出高质量、非模板化前端界面的场景。
a11y
a11y 是一个用于系统性审计与修复 UI 无障碍问题的技能，重点覆盖键盘导航、屏幕阅读器支持、颜色对比度、语义化 HTML、ARIA、焦点管理、动效与动画等。它强调修复与实现，而不仅是评分，目标是以 WCAG 2.1 AA 为基线，让界面在键盘、屏幕阅读器、缩放、色觉缺陷和减少动效等场景下仍可用。使用前需先加载 $frontend-design 并遵循其上下文收集协议，必要时先加载 $setup。
animation-micro-interaction-pack
Animation & Micro-interaction Pack 是一套可复用的交互动效模式与动画预设集合，用于让 UI 呈现更精致、更打磨过的观感。该技能包汇集了常见的动画模式，包括悬停效果、过渡、入场动画、手势反馈以及加载状态动效，并给出 Tailwind CSS 配置与 Framer Motion 代码示例。其内容涵盖悬停放大、上浮、发光与颜色变化，入场淡入、滑入、缩放入场与列表错峰效果，退场淡出、滑出与缩放消失，加载脉冲、骨架波纹与进度条，以及点击涟漪、拖拽反馈、滑动指示等手势动画。同时提供性能与体验层面的最佳实践：微交互使用 200–300ms 时长、遵循 prefers-reduced-motion、优先动画 transform 与 opacity、加入缓动函数、对列表项做错峰处理，并为元素提供 hover/active 状态。适合前端开发与界面动效设计场景下参考与复用。
bun-sveltekit
bun-sveltekit 是一份用于在 Bun 运行时上构建和运行 SvelteKit 应用的技能文档，涵盖 SSR、适配器以及 Bun 专有 API 的使用。它提供了从项目创建、依赖安装、开发与构建到部署的完整流程示例，包括使用 svelte-adapter-bun 适配器、在服务端加载函数、表单动作、API 路由、文件操作和服务端钩子中调用 bun:sqlite、Bun.file、Bun.write 等 Bun 原生能力，并给出 Docker 部署与适配器配置示例。文档还包含安全安装建议（如阻止安装后脚本、设置冷却期、安装前审计）以及常见错误排查表。适用于需要在 Bun 上开发或部署 SvelteKit 应用的开发者。
webmcp
WebMCP 是一个面向浏览器 WebMCP 集成的开发技能，用于在 JavaScript 或 TypeScript Web 应用中实现和调试浏览器端 WebMCP 能力。当需要通过 document.modelContext 暴露命令式工具、将 HTML 表单流程声明为可由智能体调用、或排查注册失败、schema 序列化错误与智能体驱动的表单执行问题时，可以使用该技能。它提供了一套分步骤的处理流程：先定位浏览器集成入口与前端边界，再根据需求选择命令式或声明式 API 形态，然后实现工具注册与表单注解，接着安全地接入智能体驱动的用户体验，最后对注册与注销生命周期、非法输入、执行取消等行为进行验证。该技能还给出了针对 Chrome 预览版本兼容性、权限策略、重复名称、序列化错误等常见问题的错误处理指引，并要求高风险操作仍须保留可见的用户确认与既有授权流程。
inertia-rails-pages
Inertia Rails Pages 是一个面向 Inertia Rails 应用的页面开发技能，聚焦页面组件、持久化布局、导航与客户端 API。它指导开发者用持久化布局避免导航时组件重挂载，从而保留滚动位置、音频播放和组件状态；用 <Link> 与 router 完成站内跳转与编程式导航，并支持 prefetch 预取、部分重载 router.reload({ only: [...] })、无服务端往返的 router.replaceProp 等客户端 prop 操作。它还强调 URL 驱动状态：URL 即服务端状态，须由控制器读取参数并以 prop 传入，组件只从 prop 派生 UI，避免用 window.location.search 或 useState/useEffect 同步。技能涵盖 <Head>、<Deferred>、<WhenVisible>、<InfiniteScroll> 等组件用法，并附带常见问题排查与 Vue 3、Svelte 对应写法参考。
angular-best-practices-material
该技能是 Angular Material 与 CDK 的最佳实践规则集，属于 angular-best-practices 核心技能的补充插件。内容涵盖按需选择性导入 Material 模块、使用 M3 主题系统与设计令牌、优先采用 CDK 工具（如覆盖层、拖放、虚拟滚动、无障碍原语）而非自行实现，以及为 Material 组件编写测试时使用测试工具（Test Harnesses）。适用于导入和配置 Material 组件、搭建 M3 主题、使用 CDK 工具、编写 Material 组件测试等场景。
diagram-maker
中文介绍正在整理，稍后补充。
zustand
Zustand 是一个面向 React 的极简、无倾向性的状态管理库。它不依赖 Provider 包裹组件，也没有 Redux 那样的样板代码，通过基于 Hook 的 API 提供全局状态管理。核心用法是使用 create 函数创建 store，在组件中通过选择器读取状态，通过 set 更新状态，并支持在 React 组件外直接读写。它提供 persist、devtools、immer 等中间件，支持 TypeScript 类型推断、切片模式、异步操作、乐观更新、选择器与性能优化，并可用于 SSR（如 Next.js）场景。
extract
extract 是 ui-craft 技能下的一个重构子技能，专注于从代码中提取可复用片段。它会扫描目标代码，找出重复出现三次及以上的 Tailwind 类名组合、以字面量形式出现的魔法值（十六进制颜色、像素尺寸、阴影定义、字号、z-index 等）以及仅靠文本或属性区分的重复标记，并将它们分别抽取为组件、设计令牌或带 props 的单一组件。该技能强调遵循项目既有约定（命名、文件位置、令牌命名），不引入平行体系，并对每个新组件执行 Anti-Slop 测试，要求组件名具备领域语义而非泛化命名，同时更新所有调用点，避免半迁移。
website-cloner
Website Cloner 是一个用于克隆网站的智能体工作流技能，通过多个专用子智能体协作，以像素级保真度复制目标网站。它提供 /clone-website <url> 斜杠命令来编排整个流程，包含截图、资源提取、React 组件实现和 QA 审查四个阶段，最终输出使用 Tailwind CSS 与 motion 的单个 React 组件。适用于需要复刻网站视觉与结构的场景。
accessibility-compliance
该技能用于按照 WCAG 2.1/2.2 无障碍标准实现网页无障碍功能，涵盖屏幕阅读器兼容、键盘导航与无障碍测试。适用于构建面向公众的 Web 应用、满足 AA 或 AAA 合规要求、支持 NVDA/JAWS/VoiceOver、实现纯键盘操作、满足 ADA 与 Section 508 等法规、改善 SEO 与整体体验以及开展无障碍审计等场景。技能提供语义化 HTML 与 ARIA、React 无障碍组件、键盘导航处理、颜色对比度校验、屏幕阅读器播报、焦点管理等参考指南与最小可用示例。