modal-drawer-system
用于生成可访问的模态框（Modal）与抽屉（Drawer）组件的技能，基于 React、TypeScript 与 Tailwind CSS，内置焦点陷阱、ESC 关闭、滚动锁定、Portal 渲染和 ARIA 属性，并提供确认对话框、编辑表单、详情抽屉等示例。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-17 00:11
前端与建站
10,794 个结果
specsfy-specialist-react
针对 React 纯框架场景的设计、实现与评审技能，覆盖组件、Hook、Context、表单、列表、状态、副作用、并发、无障碍、性能与测试，并规定何时应改用 Next.js、UI 组件库、TypeScript 等相邻技能。
hiui-page-workflow
HiUI Page Workflow 是一个面向 React / HiUI 页面的端到端交付编排技能，目标是把页面从需求细化、实现、工程验收到体验验收串成闭环。它本身不复制下游技能的详细规则，而是作为门禁型编排层，控制阶段状态、输入契约和证据门禁。它编排 hiui-refine（需求澄清、产品方案、页面清单、页面级提示词、HiUI 交接包）、hiui-design（页面规划、生成、源码约束、contract、工程 gate）与 ux-walkthrough（UX 检查标准、证据门禁、P 级问题、正式 docx 报告）。核心铁律包括：生成输入门禁未确认或未获授权假设时不得生成或修改页面源码；UX 证据未就绪时不得输出确定性完整报告；standard-e2e / formal-e2e 未覆盖 P0 场景时不得只输出 P2 表面问题。适用于从模糊产品需求生成并验收页面、HiUI 页面提测前检查、页面生成后做体验走查、页面从需求到实现再到 UX 验收闭环等任务。
shop-theme-development
Bagisto 店铺主题开发技能：将自定义店面主题打包为 Laravel 包，涵盖主题配置、视图与资源路径、Vite 资源编译、服务提供者注册、视图发布与主题激活等流程。
syncfusion-angular-notifications
Syncfusion Angular 通知组件实现指南，涵盖 Message、Skeleton、Toast、Badge 四类 UI 通知组件。Message（ejs-message）用于展示带严重级别图标与颜色的上下文提示信息，支持五种 severity（Normal、Success、Info、Warning、Error）、三种视觉样式（Text、Outlined、Filled）、图标与关闭图标、自定义模板、内容对齐与无障碍支持。Skeleton（ejs-skeleton）为加载中的内容提供占位骨架，支持 Text、Circle、Square、Rectangle 形状与 Wave、Pulse、Fade 动画效果，用于提升感知性能。Toast（ejs-toast）为非阻塞式轻量通知，在指定位置显示简短消息，支持超时自动关闭、模板、操作按钮、图标与进度条。本资料为 Syncfusion Angular UI 组件技能文档，包含各组件安装方式（ng add @syncfusion/ej2-angular-notifications）、模块导入、CSS 主题引入、常用代码模式、属性表、事件与 API 参考及各类使用场景示例。
lynx-ui
lynx-ui 是一个面向 Lynx 生态的 UI 组件库技能（skill），用于在构建界面时选择合适的组件、核对公开 API、改编示例、配置 Luna 主题、选择动效包以及组合页面。该技能强调按需加载最小范围的参考资料：组件选择查阅 component-overview.md，安装与故障排查边界查阅 foundation.md，Luna 主题与 token 查阅 theming-and-tokens.md，动画选择查阅 motion.md，常见组件组合查阅 component-composition.md。选定组件后，进一步查看该组件目录下的 guide.md（如有）、api.md（精确的公开 props、方法与导出）和 examples.md（实现模式）。规则要求：除非 API 参考要求特定包导入，否则统一从 @lynx-js/lynx-ui 导入；保留文档中记录的组件组合与状态处理方式；在 api.md 中核实 props、方法与导出；将示例视为用法模式并在 api.md 中核实其 API；遇到未覆盖的内容应报告缺失而非猜测。
react-server-components
面向 Next.js App Router 的 React Server Components（RSC）实践技能，讲解服务端与客户端组件划分、数据获取、流式渲染、Server Actions 与缓存策略，并给出常见场景的代码模式与最佳实践清单。
swc-plugin-compatibility
用于诊断和修复 Lingui SWC 插件与 Next.js、Vite、Rspack 等 SWC 宿主运行时的兼容性错误，核心是版本配对与精确锁定。
syncfusion-angular-splitter
Syncfusion Angular Splitter 是 Syncfusion Angular UI 组件库中的布局组件，用于将容器划分为多个可调整大小的窗格，窗格之间由可拖动的分隔条隔开。该技能面向 Angular 开发者，帮助构建分栏界面、仪表盘、编辑器、侧边导航加内容区、数据浏览界面以及嵌套布局等场景。支持水平与垂直方向、固定像素/百分比/自动三种尺寸策略、可折叠窗格、固定窗格、最小/最大尺寸约束、嵌套 Splitter、通过 addPane() 与 removePane() 动态增删窗格，以及 HTML、字符串、ng-template、DOM 选择器等多种内容加载方式。组件提供 8 个事件和完整公开方法，支持 Material3、Bootstrap 等主题、RTL 语言与本地化，并包含 HTML 净化与 XSS 防护等安全实践。技能文档按主题拆分为多个参考文件，涵盖入门、API、窗格方向与布局、尺寸配置、展开折叠、调整大小、布局模式、样式定制、全球化、内容加载、动态操作和安全最佳实践。
react-19
React 19 编码规范技能，配合 React Compiler 使用。核心要求是编写 React 组件时不再手动做记忆化（memoization），即不需要 useMemo 和 useCallback，由 React Compiler 自动完成优化。同时规定使用具名导入而非默认导入 React、优先使用服务端组件、仅在需要时添加 "use client" 指令，并介绍 use() Hook、Actions 与 useActionState、以及 ref 作为普通 prop（不再需要 forwardRef）等 React 19 新写法。
syncfusion-angular-stepper
Syncfusion Angular Stepper 是 Syncfusion Angular UI 组件库中的步骤条组件，用于展示分步流程或工作流，适合向导、引导流程和多步骤表单。该技能指导开发者实现、配置和自定义 Stepper 组件，可控制步骤外观、校验、事件与动画。组件支持多种步骤类型（默认图标加标签、仅指示器、仅标签）、水平与垂直两种方向、丰富的事件系统（created、stepChanged、stepChanging、beforeStepRender、stepClick）、线性流程与步骤校验、图标标签与自定义模板、动画与工具提示，并具备 WCAG 无障碍、键盘导航和 RTL 支持。
syncfusion-angular-toolbar
Syncfusion Angular Toolbar 是一个 Angular 容器组件技能，用于创建横向排列的命令按钮工具栏。它支持按钮项、分隔符、输入组件（NumericTextBox、DropDownList、CheckBox、RadioButton）、自定义模板、CSS 与 Font Awesome 图标样式、工具提示、路由链接、切换按钮、响应式溢出（滚动或弹出模式）、键盘导航、RTL 与无障碍支持。技能文档涵盖快速入门、项配置、样式定制、命令事件、模板、工具提示与链接、响应式滚动、高级特性及完整 API 参考，并提供多种常见使用模式示例。
angular-best-practices-spartan
Spartan UI（Angular 版的 shadcn）最佳实践技能，聚焦无头（headless）组件的 Brain/Helm 架构。Brain 负责可访问行为，Helm 负责样式，配合 Tailwind CSS 实现工具类优先的样式方案。适用于为 Spartan Brain 指令添加无障碍行为、使用 Helm 与 Tailwind 为组件设置样式，以及用 Spartan 原语构建对话框、标签页、菜单或手风琴等组件。该技能为 angular-best-practices 核心技能的补充，建议配合使用以获得完整的 Angular 覆盖。
casper-design-system
Casper Studios 内部设计系统，用于生成一致、生产级 SaaS UI，基于 shadcn/ui、Tailwind CSS v4 与 React（Vite），适用于客户演示、内部工具或原型。
performance-optimization
用于诊断并修复 Web 性能问题的 Claude 技能，聚焦 Core Web Vitals（LCP、INP、CLS）、包体积、资源优化、渲染性能与运行时效率，可产出性能审计报告。
syncfusion-angular-card
Syncfusion Angular Card 是一个基于纯 CSS 的轻量级布局组件，用于在 Angular 应用中构建灵活、可复用的卡片式内容容器。它通过语义化 HTML 结构和一组 CSS 类（如 e-card、e-card-header、e-card-content、e-card-image、e-card-actions 等）实现卡片布局，不依赖 JavaScript。该技能帮助开发者创建带标题、副标题、图片、说明文字和交互按钮的卡片，支持水平布局、堆叠区域、分隔线、圆角图片等样式，并可在卡片内集成其他 Syncfusion 组件。适用于产品目录、用户资料、博客预览、仪表盘小组件、待办列表、图片画廊、团队成员展示和功能亮点等场景。
gravity-ui
Gravity UI 是一个多包 React 设计系统，由一系列 @gravity-ui/* 包组成（如 uikit、charts、table、navigation 等）。本技能用于基于真实的 Gravity UI 组件构建、修复、样式化和组合 UI，而不是凭记忆编写代码。核心流程包括：先通过生态系统目录选定正确的包（避免 charts 与 chartkit、uikit Table 与 @gravity-ui/table、date-components 与 date-utils 等易混淆包）；再依据本地 node_modules 中安装的版本文档或对应主版本的在线 llms.txt 文档接地，确定实际可用的 API；最后仅使用已确认安装的包进行实现，并运行类型检查（tsc --noEmit）验证。技能强调不要臆造组件属性或图标名称、不要混用 MUI/Ant Design 等非 Gravity 库、不要硬编码颜色而应使用语义化 --g-* token，避免部分品牌覆盖、使用 [class*=] 覆盖内部结构等常见错误。
nextjs-shadcn-builder
这是一个用于构建全新 Next.js 应用，或将现有前端（React、Vue、Angular、原生 JS 等）系统性迁移到 Next.js + shadcn/ui 的技能。它强调严格遵循 shadcn/ui 设计原则：所有主题使用 CSS 变量、仅使用标准 shadcn/ui 组件、不硬编码颜色/间距/字体、统一设计令牌、移动优先响应式设计，并符合 WCAG 2.1 AA 无障碍标准。技能提供从代码库分析、迁移规划、Next.js 与 shadcn 环境搭建、分批组件转换到验证清理的完整工作流，并包含分析脚本、硬编码值检测脚本、迁移报告生成脚本以及 MCP 组件发现等工具支持。
rails-design-system
面向 Ruby on Rails 的设计系统最佳实践技能，含 51 条规则、分 9 类并按影响优先级排列，覆盖 Turbo、Stimulus、ERB partial、设计令牌、表单构建器与视图辅助方法，用于构建一致且易维护的 UI。
frontend-ui-ux
这是一个面向 AI 编码助手的“设计师转开发者”角色技能，帮助在没有设计稿的情况下打造视觉出众的 UI/UX。它提供了一套设计流程与美学准则：编码前先确定大胆的美学方向（用途、基调、约束、差异化），再实现可运行、有明确视觉观点且细节精细的代码。适用 HTML/CSS/JS、React、Vue、Angular 等技术栈。准则涵盖字体选择、配色（使用 CSS 变量、避免紫色渐变配白底）、动效（强调页面加载的编排与滚动、悬停效果，优先纯 CSS，React 可用 Motion 库）、空间构图（非对称、重叠、打破网格）与视觉细节（渐变网格、噪点纹理、层叠透明、装饰边框等）。同时列出反模式与执行方式：极简主义注重克制与排版，极繁主义则配合大量动画与效果。该技能强调完成任务、先研究现有代码模式、保持一致并透明沟通。
swiftui-liquid-glass
用于在 SwiftUI 中实现、接入、重构或评审 iOS 26+ Liquid Glass 效果的技能，强调优先使用原生 glassEffect、GlassEffectContainer 与玻璃按钮样式，并检查可用性、性能与设计一致性。
syncfusion-angular-breadcrumb
Syncfusion Angular Breadcrumb 是 @syncfusion/ej2-angular-navigations 包中的面包屑导航组件（ejs-breadcrumb），用于在 Angular 应用中显示用户当前所处的页面层级位置，并提供指向父级页面的可点击链接。组件支持多种数据绑定方式（指令式 items、基于 URL 生成、静态配置）、字体图标/图片/SVG 图标、导航开关控制、6 种溢出处理模式（Collapsed、Menu、Wrap、Scroll、Hidden、None）、itemTemplate 与 separatorTemplate 模板自定义，以及 beforeItemRender 事件。适用于电商分类、文件系统路径、文档站点、博客、后台管理、多步骤表单等层级导航场景。
building-components
面向现代 UI 组件开发的技能指南，涵盖可访问性、可组合 API、设计令牌与主题、状态管理、多态模式、数据属性、样式方案及组件发布与文档。
angular-material
Angular Material 是一个用于构建 Angular 应用界面的技能，聚焦 Angular Material 组件库、主题定制与无障碍界面设计。内容涵盖表单控件、导航、布局、数据表格与分页、对话框与提示条等组件；自定义主题、配色与排版、暗色模式、组件定制及 CSS 变量集成；以及 CDK 的覆盖层、拖放、虚拟滚动、无障碍工具与自定义组件创建。同时涉及响应式设计、无障碍合规、性能优化与 Material 模块懒加载等最佳实践。学习前提包括 Angular 核心基础、CSS/SCSS 基础与组件架构知识。