website-cloner
Website Cloner 是一个用于克隆网站的智能体工作流技能，通过多个专用子智能体协作，以像素级保真度复制目标网站。它提供 /clone-website <url> 斜杠命令来编排整个流程，包含截图、资源提取、React 组件实现和 QA 审查四个阶段，最终输出使用 Tailwind CSS 与 motion 的单个 React 组件。适用于需要复刻网站视觉与结构的场景。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-15 00:40
前端与建站
8,767 个结果
react-native-unistyles-v3
中文介绍正在整理，稍后补充。
tiptap
中文介绍正在整理，稍后补充。
accessibility-compliance
该技能用于按照 WCAG 2.1/2.2 无障碍标准实现网页无障碍功能，涵盖屏幕阅读器兼容、键盘导航与无障碍测试。适用于构建面向公众的 Web 应用、满足 AA 或 AAA 合规要求、支持 NVDA/JAWS/VoiceOver、实现纯键盘操作、满足 ADA 与 Section 508 等法规、改善 SEO 与整体体验以及开展无障碍审计等场景。技能提供语义化 HTML 与 ARIA、React 无障碍组件、键盘导航处理、颜色对比度校验、屏幕阅读器播报、焦点管理等参考指南与最小可用示例。
web-performance-optimization
本技能（web-performance-optimization）用于优化 Web 应用性能，涵盖代码分割（code splitting）、懒加载（lazy loading）、缓存（caching）、压缩（compression）与性能监控（monitoring）等策略，目标是改善 Core Web Vitals 与用户体验。技能建议在页面加载缓慢、Largest Contentful Paint（LCP）偏高、打包体积过大、Cumulative Layout Shift（CLS）频繁出现以及移动端性能问题时使用。技能提供了快速开始示例，演示基于 React 的懒加载工具函数与路由配置写法，并列出了五份参考指南：React 代码分割与懒加载、图片优化、HTTP 缓存与 Service Workers、Gzip 压缩与资源优化、性能监控。最佳实践方面，要求遵循既有模式与约定、编写整洁可维护的代码、补充适当文档、部署前充分测试；同时提醒不要跳过测试或验证、不要忽略错误处理、不要硬编码配置值。
react-spring
React Spring 动画原则技能，用于在 React 项目中借助 React Spring 的弹簧物理动画系统实现迪士尼十二项动画原则。资料以代码示例形式覆盖挤压与拉伸、预备动作、舞台调度、逐帧与关键帧、跟随与重叠动作、慢入慢出、弧线、次要动作、时间节奏、夸张、立体造型、吸引力等十二项原则，并展示 useSpring、useSprings、useTrail、useChain、useTransition 等核心 API 以及 tension、friction、mass、velocity 等物理参数和 gentle、stiff、slow、molasses 等配置预设的用法。
sveltekit-data-flow
中文介绍正在整理，稍后补充。
frontend-state-management
前端状态管理技能，用于使用 Redux、MobX、Zustand 和 Context API 管理应用状态。适用于多组件共享状态的复杂应用，帮助集中管理状态、副作用与组件间的数据流。技能提供 Redux Toolkit、Zustand、Context API + useReducer、MobX 等参考实现，并给出最佳实践建议。
tailwindcss-responsive-darkmode
中文介绍正在整理，稍后补充。
architecture-diagram
中文介绍正在整理，稍后补充。
mjml-email-templates
MJML Email Templates 是一个用于构建响应式邮件模板的技能，基于 MJML 标记语言编写模板，并编译为可在 Outlook、Gmail、Apple Mail 等客户端中正常显示的跨客户端 HTML。该技能面向 .NET 项目，提供模板结构、布局模板、内容模板、模板渲染器、邮件组装器以及开发期预览端点等完整示例，并给出模板设计与变量处理的最佳实践。
react-native-architecture
中文介绍正在整理，稍后补充。
react-patterns
React Patterns 是一份面向现代 React 开发的技能指南，聚焦 React 18+ 的函数式组件、Hooks、组件组合、状态管理与性能优化，帮助构建可扩展的 Web 应用。内容涵盖 useState、useReducer、useContext、useEffect、useLayoutEffect、useMemo、useCallback、useRef、useTransition、useDeferredValue、useActionState 等内置 Hooks 的语法、示例与最佳实践，并介绍 React.memo、自定义 Hook、Server Components 与客户端组件等模式。适合在构建现代 React 应用、实现复杂状态管理、优化渲染性能、抽取复用逻辑、处理表单与副作用、重构类组件以及排查不必要重渲染时参考。
motion
中文介绍正在整理，稍后补充。
data-table-filters
data-table-filters 是一个基于 shadcn 注册表分发的 React 数据表格系统，用于构建可筛选、可排序、支持无限滚动与虚拟化的数据表格。它以核心块（data-table）为基础，提供表格引擎、状态存储、四种筛选类型（复选框、输入框、滑块、时间范围）以及内存适配器，并可通过可选块扩展命令面板、单元格渲染器、侧边详情面板、URL/客户端状态适配器、声明式 schema、Drizzle ORM 服务端助手、React Query 集成、AI 自然语言筛选、MCP 服务端点、行与批量操作、无头远程表格和时间线图表等能力。所有块通过 npx shadcn@latest add 命令安装，CLI 会自动处理依赖、路径重写和 CSS 变量注入。
inertia-rails-forms
Inertia Rails Forms 是面向 Inertia.js + Rails 的全栈表单处理技能，覆盖创建、编辑、删除、多步向导和文件上传等表单场景，并处理验证错误与上传进度。它指导开发者优先使用 Inertia 的 <Form> 组件，仅在多步向导、动态增删字段或表单数据需与兄弟组件共享时使用 useForm hook，同时明确禁止使用 react-hook-form 等第三方表单库。内容包含 React 示例，并提供 Vue 3 与 Svelte 的对应参考文件。
cc-skill-frontend-patterns
中文介绍正在整理，稍后补充。
extract
stardust:extract 是 stardust 工作流中的一个描述性提取子命令，用于爬取现有网站并生成当前状态的快照。它以给定 URL 为起点，在限定页数上限内多页爬取站点，逐页用 Playwright 真实浏览器渲染并解析，提取品牌表面与页面结构信息，输出到 stardust/current/ 目录。产出内容包括 PRODUCT.md、DESIGN.md、DESIGN.json、逐页清单（pages/<slug>.json 及渲染后的 HTML）、截图、字体与媒体资源、_brand-extraction.json、_crawl-log.json 等，并更新 stardust/state.json。该技能只做描述：不发明方向、不做评判、不修改线上站点，后续子命令会消费这些结果来判断站点应当变成什么。支持 --cap、--all、--pages、--refresh、--single、--wait、--concurrency、--brand-source、--design-source、--prep、--dynamics 等可选参数控制范围与行为；默认爬取 5 页，可提升上限或全量爬取。爬取前需先完成主技能的 setup 流程，并确认 Playwright 可被模块导入（仅 npx 探测不够）。每页需满足实时渲染证据契约，否则视为失败并记录。资料未提供收费与价格信息。
expo-liquid-glass
中文介绍正在整理，稍后补充。
react-development
该技能基于 React 官方文档，提供现代 React 应用开发的综合指导，涵盖 hooks、组件、状态管理、context、副作用与性能优化。适用于构建单页应用、可复用 UI 组件库、表单与数据获取、全局状态管理、自定义 hooks，以及将类组件迁移为函数组件等场景。
novu-inbox-integration
中文介绍正在整理，稍后补充。
frontend-tailwind-best-practices
Tailwind CSS 前端样式规范与约定集合，包含 10 条规则，覆盖布局工具类、视觉可供性、配色方案、响应式设计和 className 合并处理。适用于编写组件样式、创建布局或处理 CSS 类时参考，帮助统一前端项目的 Tailwind 使用方式。
frontend-design-ultimate
Frontend Design Ultimate 是一个用于从纯文本需求生成独特、生产级静态网站的技能。它无需设计稿或 Figma，直接根据描述产出大胆、令人印象深刻的界面。技术栈为 React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion，输出形式可选 Vite（静态 HTML）或 Next.js（可部署至 Vercel）。技能强调先确定鲜明的美学方向（如极简、复古未来、编辑杂志风等），并给出排版、配色、动效、空间构图、背景氛围与移动端适配的规范，同时提供初始化脚本、项目结构、siteConfig 内容配置模式以及上线前检查清单。
angular-development
这是一个面向 Angular 框架开发的技能，覆盖组件、指令、服务、依赖注入、路由和响应式编程等核心内容。资料以示例代码形式讲解了现代 Angular 开发方式：使用独立组件（standalone component）构建界面，用 inject() 函数替代构造函数注入服务，通过 Signals（signal、computed、effect）实现细粒度响应式状态管理，并配合 RxJS 处理异步数据。资料还展示了路由懒加载（loadComponent）、函数式路由守卫（CanActivateFn）、带参数路由与 switchMap 用法、基于 ReactiveFormsModule 的响应式表单与内置校验、自定义校验器，以及结构型指令（如自定义重复指令）的实现。该技能适用于需要使用 Angular 构建、维护或迁移应用的开发者，帮助其采用较新的模式和最佳实践。