figma-storybook-workflow
一个用于将 Figma 设计严格还原为 Storybook 组件的技能工作流，强调逐组件提取、实现与迭代，要求像素级精确并需用户确认后才继续。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-26 00:15
前端与建站
11,100 个结果
storybook-docs
Storybook Docs 技能：用 Storybook 作为组件的可视化事实来源，通过 CSF 3 stories、Docs/Autodocs、Controls/Args 与 a11y 等插件记录组件状态与契约，适用于编写或审查 stories、记录设计系统。
android-cicd
android-cicd 是一个用于搭建 Android 多阶段 CI/CD 流水线的技能，通过 GitHub Actions 自动构建并发布到 Google Play，支持 TWA、React Native、Flutter 和原生 Android 项目。运行 npx android-cicd 启动交互式向导完成配置。
i18n-automation
i18n Automation 是一个面向 Web 应用的国际化与本地化自动化技能，可完成翻译、翻译键生成、i18n 库安装配置及语言区域设置。支持 Next.js、React、Vue，涵盖键结构设计、RTL、SEO 元数据本地化与语言切换器等流程。
nextjs-react-expert
来自 Vercel Engineering 的 React 与 Next.js 性能优化技能，包含按影响优先级排序的 57 条优化规则，覆盖消除瀑布请求、包体积、服务端性能、客户端数据获取、重渲染、渲染性能、JavaScript 微优化与高级模式。
polish
polish 是一个在交付前进行最终质量检查的技能，用于修复区分“良好”与“卓越”的细节。它检查对齐、间距一致性、悬停状态、焦点样式、加载状态、空状态、边缘情况以及整体一致性，确保界面在发布前达到精修标准。
scan-ui-system
scan-ui-system 是 easyplatform 仓库中的文档扫描技能，用于并行编排三项 UI 系统扫描：设计系统、SCSS 样式与前端模式，最终汇总发现与缺口，仅填充 docs/project-reference/ 下的参考文档，不修改应用代码。
shadcn-tailwind
面向 React 项目的 shadcn/ui + Tailwind CSS 组件库技能，结合 Radix UI 无障碍原语与工具类样式，用于构建对话框、表单、表格等可访问界面，支持 Next.js、Vite、Remix、Astro 等框架。
har-to-vue
将 HAR（HTTP Archive）抓包文件转换为 Vue 源代码的工具，支持批量把网络请求转成 Vue 组件、API 服务或完整页面，用于复刻网站或基于现有 API 快速生成 Vue 应用。
editframe-composition
Editframe 视频合成技能：用 HTML Web Components 或 React 构建视频合成，支持视频、音频、图片、文字、字幕、转场与云端渲染，两种语法共享同一合成模型与渲染管线。
frontend-design
frontend-design 是一个用于创建高品质前端界面的技能，旨在帮助开发者构建具有独特设计风格、可达到生产级标准的前端组件、页面或应用。该技能强调在动手编码前先进行设计思考，明确界面要解决的问题、目标用户、审美方向和技术约束，并鼓励选择鲜明、明确的美学立场并以精确的方式执行。它适用于需要避免通用化、模板化“AI 风格”外观的场景，引导在字体、配色与主题、动效、空间构图、背景与视觉细节等方面做出有意识的创意选择，最终输出可运行的真实代码（如 HTML/CSS/JS、React、Vue 等）。使用时应根据美学愿景匹配实现复杂度：极繁主义设计需要更精细的动画与效果，极简或精致设计则需要克制、精准和对间距、排版与细节的关注。
wcag-audit-patterns
用于按 WCAG 2.2 指南审计网页可访问性的技能，结合自动化测试、人工验证与修复建议，适用于无障碍审计、修复违规、构建无障碍组件及满足 ADA/Section 508、VPAT 等合规要求。
inertia
AdonisJS 应用中集成 Inertia 与 React 19 的实践规范：控制器用 inertia.render 渲染页面，页面按模块目录解析，共享属性经中间件下发，表单用 useForm，URL 用 Tuyau 的 urlFor 保证类型安全，模态框也作为 Inertia 响应处理。
layout-shells
AdonisJS + Inertia 应用中的布局外壳（Layout Shells）方案：每个页面显式导入所需外壳，不使用运行时布局选择器，外壳的变体、折叠、方向、最大宽度等均硬编码在文件内，而非通过 props 或用户设置控制。
css-styling-standards
一套面向响应式、可访问且易维护的 Web 界面的 CSS 样式规范，强调多语言内容支持，并针对 Chuukese 词典类 React 前端给出 Mantine UI v8 集成与纯 CSS 架构示例。
react-useeffect
一份关于 React useEffect 最佳实践的技能资料，强调为每个 useEffect 使用具名函数、明确依赖与清理，并借助命名判断代码是否应改用渲染期计算、事件处理或 key。
check-props-drilling
该技能用于检查代码中是否存在 Props Drilling（透传 Props）问题，识别那些本应从 Zustand Store 直接获取、却通过多层组件逐层传递的数据。触发词包括：检查 props 透传、props drilling、消除透传、检查组件依赖。使用时会先阅读 Props Drilling 规范，了解什么是 Props Drilling 以及何时应该使用 Store，再对照检查清单逐项扫描目标组件，最后对发现的问题提供重构建议，将透传数据改为从 Store 直接获取。核心原则是：数据应该从哪里使用就从哪里获取，避免为了传递给子组件而接收不必要的 props。
check-ui-components
该技能用于检查代码中是否违规使用原生 HTML 元素（如 button、input、select 等），确保符合组件库规范，优先使用组件库组件而非原生元素。触发词包括：检查 UI 组件、检查原生元素、ui 组件规范检查。使用流程为：读取 ui-components-best-practice 规范，对照检查清单逐项扫描目标代码，标记所有违规使用的原生元素并输出报告。核心判断标准是：标准 UI 交互元素必须使用组件库组件，禁止直接使用原生 HTML 元素。
component-design-best-practice
针对设计或审查 React 组件时的技能规范，帮助组件符合 shadcn/ui 设计哲学：单一职责、可组合、可访问、可复制粘贴，并界定组件拆分时机、组件边界与命名规范。
component-unit-best-practice
用于创建或审查 React 组件文件夹单元的规范技能，强制每个组件以独立文件夹存在，并同时包含组件本身、单元测试（*.test.tsx）与 Storybook 故事文件（*.stories.tsx），三者缺一不可。
refactor-ui-components
该技能用于将代码中的原生 HTML 元素（如 button、input、select 等）自动重构为项目组件库组件，确保符合组件库规范并保持功能不变。触发词包括重构 UI 组件、替换原生元素、迁移到组件库。
ui-components-best-practice
这是一项面向 UI 组件代码编写与审查的技能规范，要求在标准场景下优先使用项目组件库中的组件（如 shadcn/ui），并明确禁止直接使用原生 HTML 元素。该技能提供三项参考材料：组件库规范指南，用于判断何时必须使用组件库组件；检查清单，用于逐项验证代码是否符合规范；最佳实践示例，用于了解标准写法。整体定位为开发过程中的代码质量与一致性约束，服务于创建或审查 UI 组件代码的场景，帮助统一组件使用方式，避免绕过组件库直接书写原生标签。其核心要求为：遇到标准 UI 场景时，必须使用组件库组件。
optimize
一个用于诊断和修复 UI 性能问题的技能，覆盖加载速度、渲染、动画、图片和打包体积等方向。当用户提到「慢」「卡顿」「不流畅」等性能相关诉求时使用。其核心方法是先测量再优化，避免过早优化，并通过前后对比验证改进效果。
web-artifacts-builder
用于创建复杂多组件 claude.ai HTML 构件的工具套件，基于 React、Tailwind CSS 与 shadcn/ui 等现代前端技术，包含初始化与打包脚本，可将项目打包为单个 HTML 文件在对话中展示。