emotion-migrate
emotion-migrate 是面向 Metabase 代码库的迁移技能，用于把 Emotion styled-components 改写为 Mantine 组件配合 style props 与 CSS Modules，目标是消除 Emotion 导入、去除静态内联样式，并尽量复用设计系统 token。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-24 00:15
前端与建站
11,034 个结果
react-markdown
react-markdown 是一个把 Markdown 渲染为 React 元素的 React 组件，通过 remark/rehype 插件管线工作，默认不使用 dangerouslySetInnerHTML，因此输出的是 React 元素而非原始 HTML 字符串。适用于在 React 应用中安全渲染 Markdown 内容。
react
React 最佳实践技能，用于开发或修改 React 组件、页面、Hook、Effect 与应用，提供基于特性架构、类型安全状态管理与性能优化的生产级开发规范。不含测试代码相关内容。
hyperframes
HyperFrames 是一个以 HTML 为视频唯一来源的框架，用 data-* 属性控制时间、GSAP 时间线做动画、CSS 控制外观，可制作视频合成、动画、标题卡、叠加层、字幕、配音、音频响应视觉与场景转场。
hyperframes-registry
HyperFrames 注册表技能，用于通过 hyperframes add 安装区块与组件，并将其接入 HyperFrames 合成。涵盖安装位置、区块子合成接线、组件片段合并及注册表发现。
frontend-design-complete
frontend-design-complete 是来自 nhatmobile1/claude-skills 的前端设计技能，用于生成有独特风格、达到生产级质量的前端界面，涵盖美学方向、移动优先响应式、现代 CSS 与跨元素一致性，并明确列出应避免的“AI 味”设计套路。
website-quality-check
面向 Eleventy 站点 website/ 的轻量可复用质量检查清单，覆盖文档一致性、链接、无障碍与浏览器预览，位于 skills.sh 技能库。
animate
一个用于审查功能并为其添加有目的动画、微交互与动效的技能，旨在提升可用性与愉悦感，并强调无障碍与性能约束。
frontend-design
frontend-design 是一个用于创建独特、生产级前端界面的技能，强调避免千篇一律的“AI 味”审美，通过明确的设计方向、排版、配色、布局、动效与交互规范，指导实现可运行且视觉出众的代码。
panelui-web
PanelUI 的 Web 组件集合，用于构建 React 界面，基于 shadcn/ui 并用 Tailwind CSS v4 与主题令牌着色，可从 shadcn 注册表或 npm 安装，自动继承项目的颜色、圆角与深色模式。
check-onboarding
check-onboarding 是一个用于审计用户引导（onboarding）体验的技能，检查首次运行、到达"顿悟时刻"的耗时、摩擦点与空状态，并输出 P0-P3 优先级的结构化报告。它只做调查与报告，可配合 /log-onboarding-issues 与 /fix-onboarding 使用。
clerk-auth
面向 Next.js 与 Convex 的 Clerk 认证集成模式技能，涵盖登录注册、会话管理、JWT 模板、Webhook 处理与常见问题排查，供实现用户认证时调用。
mobile-migrate
Mobile Migrate 是一个用于把 Expo + EAS 的 React Native 移动应用加入现有 Web 项目的技能，让 Web 与移动端共享逻辑、设计令牌、认证与后端集成。适用于需要为已有 Web 项目快速增加移动端并复用同一套后端与身份系统的场景。
remotion-best-practices
面向 Remotion（用 React 制作视频）的最佳实践技能包，在处理 Remotion 代码时提供领域知识，涵盖项目脚手架、动画、素材引用、字幕、FFmpeg、音频可视化、3D、字体、过渡与参数化视频等主题。
tailwind-css
这是一个关于 Tailwind CSS v4 与 tailwind-variants 的智能体技能说明文档，用于指导开发者在使用 Tailwind CSS v4.1+ 时遵循最新的写法与最佳实践。内容涵盖 CSS-first 配置方式（如通过 @theme、@utility、@custom-variant 定义）、v3 到 v4 的破坏性变更（重命名与移除的工具类对照、渐变色语法更新）、移动优先的响应式写法、布局与排版建议，以及使用 tailwind-variants 的 tv() 函数实现类型安全的组件变体。技能还附带两份参考文档路径（./references/tailwind-v4-rules.md 和 ./references/tailwind-variants.md），供进一步查阅组件变体、slots API、组合与 TypeScript 集成等细节。该技能适用于前端开发与组件样式设计工作。
component-docs
component-docs 是 SAP fundamental-styles CSS 组件库的组件文档浏览技能。它提供对 fundamental-styles 全部组件文档的访问，覆盖 140 多个自动生成的 markdown 文件，每个组件的文档都包含完整的 HTML 示例，展示各种变体、修饰符、状态以及从 Storybook 故事中提取的正确 ARIA 属性。当用户需要某个组件的 HTML 示例、查看组件的全部变体和修饰符、获取可直接复制粘贴使用的工作代码，或询问某个组件如何使用、其结构与嵌套方式时，可使用该技能。该技能提供三种访问文档的方式：直接读取 markdown 文件、通过 MCP 工具获取结构化数据、浏览组件索引。
shadcn_ui-accordion
Shadcn UI Accordion 是 shadcn_ui 组件库中用于构建可折叠手风琴（accordion）界面的技能。它通过 ShadAccordion 与 ShadAccordionItem 两个组件实现垂直堆叠的标题列表，每个标题可展开显示对应内容。支持两种交互模式：单开模式（同一时间仅展开一个条目）和多开模式（通过 ShadAccordion.multiple 允许同时展开多个条目）。每个条目由 value、title、child 三部分构成，value 用于标识条目，title 为标题内容，child 为展开后显示的正文。该技能适用于添加可展开区块、FAQ 常见问题列表等需要纵向折叠展示的场景。资料中给出了 Dart 代码示例，展示了如何用带命名字段的记录（record）作为数据源，将标题与内容映射为多个 ShadAccordionItem。该组件遵循 WAI-ARIA 设计模式，默认带有与其它组件风格一致的样式，并默认带有动画效果（可根据偏好关闭）。关于安装命令、依赖版本、收费或价格等信息，资料中暂未提供。
shadcn_ui-avatar
ShadAvatar 是 Flutter shadcn_ui 组件库中用于展示用户头像的组件，适用于在 Flutter shadcn_ui 应用中显示用户资料图片或回退的首字母缩写。该组件本质上是一张带有占位内容的图片，可传入图片 URL 作为第一个参数，并可选配 placeholder（占位内容）。图片加载期间或图片加载失败时，会显示所配置的占位内容（例如用户姓名首字母）。ShadAvatar 使用 universal_image 包以支持多种图片格式。
shadcn_ui-breadcrumb
基于 shadcn_ui 的 Flutter 面包屑导航组件技能，用 ShadBreadcrumb 展示当前资源的层级路径，支持链接、下拉菜单与自定义分隔符。
shadcn_ui-calendar
ShadCalendar 是 Shadcn UI 体系中的日期选择组件，用于让用户输入和编辑日期。它支持三种选择模式：单日期选择、多日期选择（ShadCalendar.multiple）以及日期范围选择（ShadCalendar.range）。组件提供 fromMonth 与 toMonth 参数来限制可选月份范围，并可通过 captionLayout 切换为下拉式的月份或年份选择布局。此外还支持隐藏月份导航、显示周数、隐藏相邻月份日期、固定周数行数、隐藏星期表头等选项，适用于在 Flutter 界面中构建日期字段。
shadcn_ui-date-picker
Shadcn UI 日期选择器（Date Picker）技能，用于在 Flutter 界面中实现单个日期或日期范围的选择。该技能提供 ShadDatePicker 与 ShadDatePicker.range 两种组件，支持预设（presets）以及与表单结合的 ShadDatePickerFormField 和 ShadDateRangePickerFormField。表单字段支持 id、label、validator，并可通过 fromValueTransformer/toValueTransformer 完成字符串与 DateTime 之间的值转换。适合在需要录入出生日期、日期区间搜索等场景中使用。
shadcn_ui-decorator
该技能用于配置 shadcn_ui 组件中的 ShadDecoration 与 ShadDecorator，处理边框、焦点状态、标签以及错误和描述文本样式。资料说明多数 shadcn_ui 组件通过 ShadDecorator 管理 ShadDecoration。默认装饰包含次级边框、聚焦环、标签/错误/描述样式和内边距；可通过 ShadThemeData(disableSecondaryBorder: true) 关闭次级边框并依赖更粗的主边框，但资料提示不推荐禁用次级边框，因为焦点环有助于用户识别当前聚焦的组件，可能影响可访问性。当需要调整表单控件的边框、聚焦样式或标签与错误提示样式时可使用。
shadcn_ui-dialog
用于在 Flutter 中展示模态对话框的 Shadcn UI 技能，通过 showShadDialog 配合 ShadDialog 或 ShadDialog.alert 实现标题、描述、操作按钮与自定义内容。
shadcn_ui-input-otp
Shadcn UI 的 Input OTP 技能，用于在 Flutter 中构建一次性密码输入组件。基于 ShadInputOTP、ShadInputOTPGroup、ShadInputOTPSlot 组合布局，支持复制粘贴、maxLength 长度限制、onChanged 回调获取完整 OTP 字符串，并可通过 keyboardType 与 inputFormatters 限制输入内容（如仅数字、大小写转换）。表单场景可使用 ShadInputOTPFormField，配合 id、label、validator 完成校验。适用于添加一次性密码或验证码输入的界面。