codebase-to-course
一个把代码库转化为面向非技术读者的单页 HTML 交互课程的技能。输出为包含 styles.css、main.js、各模块 HTML 与组装后 index.html 的目录，可直接在浏览器打开，无需环境配置（仅依赖 Google Fonts CDN）。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-24 00:15
前端与建站
11,040 个结果
artifacts-builder
用于构建复杂多组件 claude.ai HTML 工件的工具集，基于 React、Tailwind CSS 与 shadcn/ui，适合需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单单文件 HTML/JSX 工件。
saleor-paper-storefront
Saleor Paper Storefront 是面向 Saleor Paper 电商前端的项目专属技能指南。该前端基于 Next.js 16、TypeScript 和 Tailwind CSS 构建，并通过 Saleor GraphQL API 获取数据。技能包含 8 个类别共 32 条规则，覆盖架构、Vercel 成本控制、缓存、店铺内容、商品详情页（PDP）架构、结账 v2、设计与组合（令牌系统、设计质量、区块目录、页面组合、从图片设计、验证）、组件、UI 模式、区域路由、国际化以及 SEO。使用前提是同时安装 saleor-storefront 技能，以获取通用 Saleor API 知识（数据模型、权限、结账生命周期、渠道）。适用于处理商品详情页、变体选择、高基数目录、筛选、结账流程、支付集成、GraphQL 查询与类型生成、缓存调试、Vercel 成本优化、店铺内容编辑、区域与渠道路由、国际化、SEO 元数据、测试以及真机调试等场景。
accessibility-guide
这是 SAP fundamental-styles 组件库的无障碍（Accessibility）编写指南技能，用于在编写组件文档示例、创建新组件演示、审查组件无障碍性以及修复示例中的无障碍问题时提供规范。核心原则包括：优先使用语义化 HTML 而非 ARIA 角色；表单控件必须正确关联标签；ID 引用必须有效。指南还详细规定了各类 ARIA 角色所需的配套属性，如范围控件需 aria-valuenow/min/max，可选中控件需 aria-checked 或 aria-selected，可展开控件需 aria-expanded，弹窗触发器需 aria-haspopup，模态对话框需 aria-modal 与 aria-labelledby 等，并给出单选组、标签页、菜单、列表框、树、网格等复合组件的容器与子元素要求，以及表单、图标按钮、下拉选择、复选框组、对话框、标签页等常见组件模式示例。
scenario-roblox-ui
该技能用于在 Roblox 中构建或修复游戏 UI 与输入系统，包括 HUD（生命条、货币、技能冷却）、主菜单、带滚动网格的商店、设置界面等。它基于 Roblox Studio（2026 年 10 月版本）与 scenario-roblox-expert 工具包，强调用一棵 UI 树适配所有设备，通过测量而非按设备复制来布局。核心做法：在 Edit 中以实例搭建 UI，外观放入 StyleSheet，控件放入 Input Action System（IAS）上下文，再用 Studio 设备预设测量并用真实点击和按键驱动。技能覆盖构建、审计、布局矩阵、鼠标、键盘与上下文、手柄、样式与主题、偏好与动效、重生、本地化以及 Scenario UI 美术等阶段，并给出可量化的质量门禁。
frontend-data-contracts
Frontend Data Contracts 是一套面向 React 与 React Native 应用网络边界的类型安全规范，强调可移植、与框架无关。它要求只保留一个类型化 API 客户端作为唯一 fetch 边界，组件与 hooks 不得直接调用 fetch/axios；在数据进入应用前用 schema 解析（parse, don't validate）把网络 JSON 转换为可信的领域类型；统一使用 { data } / { error } 响应信封；把所有失败归一为单一 ApiError（含机器码、状态码、可选字段错误）；并用 branded 标识符区分 InvoiceId、CustomerId 等 ID 类型，避免传错。该技能与 frontend-architecture、frontend-optimistic-mutations 配合使用，适用于需要统一网络层、减少防御性判空和深层 undefined 问题的前端项目。
robius-widget-patterns
Robius Widget Patterns 是一套面向 Makepad 框架的可复用组件设计实践指南，源自 Robrix（Matrix 聊天客户端）与 Moly（AI 聊天应用）两个代码库的真实模式。它覆盖组件结构、文本/图片切换、动态样式、折叠展开、加载状态、虚拟列表等常见场景，并给出对应的 Rust 与 DSL 代码示例。适合在开发 Makepad 界面、设计组件 API 或实现模态、拖拽、下拉、悬停等交互时参考。
markstream-svelte
面向 Svelte 5 与 SvelteKit 的 markstream-svelte（beta）集成技能，用于接入 Markdown 渲染与流式 AI 聊天输出，涉及 runes、CSS、可选依赖与平滑流式等配置。
React 19
React 19 是一个用于构建现代 Web 应用的前端库，本资料围绕其新特性、Hooks、组件模式与服务端能力展开。内容涵盖基础组件与自定义 Hook 示例、Server Actions 与表单处理、Server Components、Context 状态管理、Suspense 数据获取、乐观更新、错误边界、性能优化（useMemo、useCallback、懒加载）以及组件结构与 PropTypes 等最佳实践。资料还列出了运行要求（React 19.0+、Node.js 18+、支持 ES6+ 的现代浏览器）、安装命令与推荐工具库。适合希望了解或上手 React 19 开发的前端开发者参考。
frontend-observability
面向前端现场的可移植、框架无关可观测性技能，适用于 React 与 React Native。建立类型化事件词典、尽力而为的多提供方分发、真实用户 Core Web Vitals、错误上报与同意门控。
rive-react
Rive React 是用于在 React 应用中集成 Rive 动画的组件与 Hooks 方案，支持 @rive-app/react-canvas 与 @rive-app/react-webgl 两种渲染器，提供 useRive 与 RiveComponent 等接口。
animation-gen
Animation Generator 是一款将自然语言描述转换为动画代码的命令行工具，由 LXGIC Studios 开发，属于 LXGIC Dev Toolkit 系列。用户只需用英文描述想要的动画效果，例如“fade in from left with bounce”，工具即可生成对应的 CSS keyframes 或 Framer Motion variants 代码。它支持复杂多步骤动画，输出可直接用于生产环境的代码。使用方式为通过 npx 运行，无需安装，推荐 Node.js 18+，并需要设置 OPENAI_API_KEY 环境变量。该工具适合构建落地页、添加 UI 微交互、快速原型设计等场景，采用 MIT 许可证，免费使用。
syncfusion-angular-drop-down-list
Syncfusion Angular DropDownList 是 Syncfusion Angular UI 组件库中的下拉列表组件，用于从预定义列表中单选一个值。它支持本地与远程数据源、筛选、分组、自定义模板、大数据集虚拟滚动，并能与 Angular 表单完整集成。组件通过 @syncfusion/ej2-angular-dropdowns 包提供，模板中使用 <ejs-dropdownlist> 标签，支持 [dataSource]、[fields]、[(value)] 等属性绑定，以及 change、filtering 等事件。
syncfusion-react-combobox
Syncfusion React ComboBox 是 Syncfusion 提供的 React 下拉输入组件，兼具文本输入与列表选择能力。用户既可以键入内容进行过滤，也可以直接从下拉列表中选择。它支持字符串数组、JSON 对象、OData、Web API 和 DataManager 等多种数据源，可通过字段映射（text、value、groupBy、iconCss、disabled）适配复杂数据结构。组件内置文本过滤、分组、排序、模板定制、虚拟滚动、本地化、RTL 和 ARIA 无障碍支持，并提供完整键盘导航。安装方式为 npm install @syncfusion/ej2-react-dropdowns，需同时引入对应主题样式。适用于可搜索下拉框、大数据量选择、远程数据加载、级联下拉等场景。
devtools
TanStack Table 的 Angular Devtools 技能，用于在 Angular 注入上下文中通过 injectTanStackTableDevtools 注册 Table v9 实例，支持响应式注册与注销，需配合 table-core 与 table-devtools 使用。
css
该技能用于按 Google CSS 风格指南规范编写与整理 CSS 代码，强调有效 CSS、语义化类名、低特异性、统一格式与可维护性，适合需要统一团队 CSS 编码规范的开发场景。
tailwind-css
Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架，通过扫描 HTML、JavaScript 组件和模板中的类名来生成 CSS。它提供单一用途的工具类，可直接在标记中组合使用，从而无需编写自定义 CSS 即可快速开发现代响应式网页界面。支持移动优先的响应式设计、状态变体、暗色模式、任意值语法和主题定制，并可与 Vite、PostCSS、Tailwind CLI 及 Next.js、Vue、Angular 等框架集成。
frontend-design
frontend-design 是一个用于创建富有设计感、可直接投入生产的前端界面的技能，目标是避免千篇一律的「AI 味」审美。用户提供前端需求（组件、页面、应用或界面）后，该技能先进行设计思考并确定明确的审美方向，再实现真正可运行的代码（如 HTML/CSS/JS、React、Vue 等）。当用户提供截图、图片或设计参考时，技能要求先提取设计规范（颜色十六进制值、字体、字号、字重、间距体系、布局模式、视觉层级），写入项目文档，再依据规范编码，最后对照原图验证质量，不得跳过提取直接实现。从零构建时，技能建议先明确用途、基调、约束与差异化，再实现兼具功能性、视觉冲击力与细节打磨的代码。其前端审美指南涵盖字体、配色与主题、动效、空间构图、背景与视觉细节、视觉素材等方面，强调独特的字体搭配、统一的 CSS 变量、高冲击力的动效、非对称与破格布局、纹理与渐变氛围，以及用 ai-multimodal 生成与设计一致的素材。该技能明确要求避免 Inter、Roboto、Arial 等通用字体、紫色渐变白底等陈词滥调配色和可预测的布局，并强调实现复杂度应与审美愿景匹配。
404-page
该技能用于检查网站是否提供自定义 404 错误页面，并验证其是否返回真实的 HTTP 404 状态码。它适用于审查模板、服务端渲染 HTML 或共享组件中与 404 页面相关的标记，关注浏览器最终呈现的标记而非仅源码。检查要点包括：页面是否包含搜索、导航和热门内容链接等恢复路径，是否保持一致的品牌与站点设计，是否便于追踪 404 错误以发现并修复失效链接，以及是否返回真实 404 而非以 200 响应的软 404。技能提供检查、修复、解释和代码审查四类操作，并指向 references/rule.md 获取完整实现细节、代码示例和框架相关指导。
keyboard-navigation
来自前端检查清单的可访问性规则技能，用于审查渲染后的 HTML、交互组件或设计系统，确保所有元素都能通过键盘操作，检查焦点顺序、隐藏内容与键盘陷阱。
login
登录表单（Login Form）是用户进行身份验证、访问受保护内容与功能的主要入口。它通常由标识字段（邮箱或用户名）、密码字段和提交按钮组成，并常配有“记住我”“忘记密码”和社交登录选项。该模式的核心是在安全性与可用性之间取得平衡：既尽量减少合法用户的登录阻力，又防止未授权访问。适用于需要在访问功能前进行身份验证的 Web 应用、查看订单与收藏的电商站点、以账号为门槛的 SaaS 平台、需要身份参与的社区或社交平台，以及基于角色访问的管理后台和内部工具。不适合无需认证的公开页面、开放访问的只读内容（博客、文档）、一次性交互，以及会话管理不便的共享设备或自助终端界面。实现时应先确认模式与问题、约束匹配，再从解剖结构与示例中选择最小可行变体，先落实无障碍、性能和交互护栏，再做视觉打磨，并按测试指引验证键盘、屏幕阅读器、响应式和失败场景下的行为。
progress-indicator
Progress Indicator 是一个用于展示操作完成状态的 UX 模式，帮助团队在系统能够如实估算进度时，可靠地呈现任务已推进的程度与剩余工作量。它最适用于文件上传与导出任务、多步骤设置或结账流程，以及可衡量完成度的后台任务。该模式强调在不隐藏状态、规则和恢复路径的前提下减少使用摩擦，并配套键盘交互、屏幕阅读器支持与视觉无障碍等实现准则，同时提醒避免过度提示、反馈时机与任务不匹配、以及忽略状态播报策略等常见错误。
wizard
Wizard / Stepper（向导/步骤条）是一种用于多步骤表单与流程的 UI 模式，帮助团队把冗长流程拆分为有序步骤，并提供可见的进度与检查点。它最适用于引导与设置场景，例如 onboarding、结账与申请流程、多步骤内部工具。该模式要求在不隐藏状态、规则与恢复路径的前提下减少摩擦。使用前需确认模式与问题及约束匹配，然后参考 references/pattern.md 中的结构与示例，选择最小可行变体，先落实无障碍、性能与交互保障，再做视觉打磨。需避免在产品面尚小时过度使用，避免团队无法支撑状态复杂度时强行采用高级交互，也避免在基础路径未完善前引入隐藏的高级用户行为。
heroui-native-skill
HeroUI Native 是一个面向 React Native 与 Expo 的移动端 UI 组件库，基于 Uniwind（React Native 版 Tailwind CSS）构建，底层使用 Tailwind v4。组件自带流畅动画、精细细节与内置无障碍支持。适用于使用 React Native 或 Expo 构建移动应用时快速搭建美观、可访问的界面。安装方式为 npm install heroui-native，并需安装一系列 peer 依赖（如 react-native-screens、react-native-reanimated、react-native-gesture-handler、react-native-worklets、react-native-safe-area-context、react-native-svg、tailwind-variants、tailwind-merge、@gorhom/bottom-sheet），随后按 Uniwind 指南配置 Tailwind，在 global.css 中引入相关样式，并用 HeroUINativeProvider 与 GestureHandlerRootView 包裹应用。该库仅适用于原生移动端，不应套用 HeroUI React（Web）的写法。