Skills

S

sddesign

educlopez / ui-craft

完整的规格驱动流水线——在一次引导式运行中完成 brief → tokens → shape（规格）→ craft（构建）→ converge → ship。写入 `.ui-craft/spec.md`。在从零开始构建全新界面时运行。当用户要求对其 UI 执行 sddesign，或在设计 / UI / 前端工作中提到 'sddesign' 时调用。

U

ui-audit

mblode / agent-skills

审查 React 和 Next.js 前端，找出面向用户的缺陷：代码与渲染 UI 中的状态缺失、数据丢失、重复提交、焦点与键盘操作故障、回滚缺口、异步数据过期、无障碍标记、布局韧性、性能配置、排版、动效隐患以及微文案。返回 file:line 形式的发现和是否可上线的结论。当被要求"审查这个 PR 里的 UX 缺陷"、"审查这个组件"、"检查我的 UI"、"这个无障碍吗"、"对这个页面做设计 QA"或"可以上线了吗"时使用。产品决策请用 product-design；Agent 类应用请用 ax-audit；深入排版或动效请用 typography-audit 或 ui-animation；若关注的是某段文案措辞而非缺失或泄漏问题，请用 copywriting。

H

home-assistant-dashboards-cards

bradsjm / hassio-addons

Home Assistant 的 Lovelace 仪表板与卡片。当用户询问仪表板结构、视图/分区、卡片类型、资源或 HACS 卡片，以及在将这些需求映射到 ha-mcp 仪表板 工具时使用。

S

software-ui-ux-design

vasilyu1983 / ai-agents-public

按照可用性与无障碍要求设计和审查 UI/UX 系统。适用于构建流程、设计系统、交互模式或符合 WCAG 的产品行为。

F

figma-integration

mindrally / skills

使用 MCP 服务将 Figma 设计稿与开发工作流集成的指南与最佳实践

暂无简介

S

shadcn

pproenca / dot-skills

shadcn/ui 组件库的最佳实践与模式（原 shadcn-ui）。在编写、评审或重构 shadcn/ui 组件时应使用此技能，以确保良好的架构、可访问性和性能。在涉及 Radix 原语、Tailwind 样式、使用 React Hook Form 进行表单验证、数据表格、主题化或组件组合模式的任务时触发。

S

styleseed-design-review

bitjaru / styleseed

审查 UI/前端代码，准确指出它为什么“看起来像是 AI 生成的”，以及如何修复。当 React/Tailwind/HTML 界面看起来不对劲、很千篇一律或未完成时，或希望在发布前获得设计评分，或被要求让 UI 看起来更专业、更精致、“像是设计出来的而非生成出来的”时使用。自包含；基于开源的 StyleSeed 设计引擎。

C

canvas-design

sickn33 / agentic-awesome-skills

这些是关于创建设计理念的说明——即随后以视觉方式表达的美学运动。仅输出 .md 文件、.pdf 文件和 .png 文件。

S

shopify

mindrally / skills

Liquid、Online Store 2.0、CSS、JavaScript 与 UX 最佳实践的 Shopify 主题开发权威指南

S

syncfusion-react-diagram

syncfusion / react-ui-components-skills

使用 Syncfusion Diagrams 在 React 中创建和定制可视化图表。适用于涉及 React 组件配置、节点与连接线、流程图、组织结构图、流程图、BPMN 或 UML 模型、ER 图、布局算法、泳道、符号面板和交互式图表可视化功能的需求。

S

sap-fiori-add-visual-filter

cline / skills

使用 CAP 或 ABAP RAP，为 SAP Fiori Elements 的筛选栏/值帮助添加可视化筛选器（基于图表）。

C

chrome-extension-ui

pproenca / dot-skills

Chrome 扩展 UX/UI 设计与实现指南，涵盖弹出窗口、侧边栏、内容脚本和选项页面。在涉及浏览器扩展 UI、Manifest V3、chrome API 的任务时触发。

G

gsap-react

bbeierle12 / skill-mcp-claude

GSAP 与 React 的集成，包括 useGSAP hook、ref 处理、清理模式和上下文管理。适用于在 React 组件中实现 GSAP 动画、处理组件生命周期或构建可复用的动画 hook。

V

vuetify0

vuetifyjs / 0

使用 @vuetify/v0 构建 Vue 3 UI 时，或在手动实现其已提供的功能前使用，例如按钮、对话框、弹出层、setTimeout 计时器、选择、表单、注册表、虚拟列表、焦点处理、Snackbar、主题、RTL、断点、SSR 窗口检查或 WAI-ARIA 复合组件，以及其余组件、组合式函数和实用工具

A

agent-elements

21st-dev / agent-elements

当用户希望在 React 19 + Tailwind v4 项目中构建或修改聊天、Agent 或工具调用界面时使用——尤其是当代码从 `@/components/agent-elements/*` 导入或项目中存在该文件夹时。触发词：「agent chat」「tool call UI」「streaming chat」「plan approval」「AgentChat」「InputBar」「tool renderer」、提及 Agent Elements，或要求使用 shadcn 添加新的 Agent 界面时。不要用于不需要工具/计划/审批卡片的普通聊天界面，也不要用于已确定使用其他 Agent UI 套件的项目。

A

anti-slop

rand / cc-polymath

用于检测和消除「AI 垃圾内容」的全面工具包——即自然语言、代码和设计中泛泛而谈、质量低劣的 AI 生成模式。适用于审查或改进内容质量、防止通用 AI 模式、清理现有内容，或在写作、代码、设计工作中执行质量标准。

S

syncfusion-react-chat-ui

syncfusion / react-ui-components-skills

实现 Syncfusion React Chat UI 组件。使用此技能在 React 应用中创建并定制消息界面，包括聊天设置、消息渲染、文件附件、正在输入指示器、会话布局、主题、事件处理和实时更新。

S

syncfusion-react-kanban

syncfusion / react-ui-components-skills

实现 Syncfusion React 看板组件，实现灵活的任务管理与工作流可视化。适用于构建看板、工作流阶段或基于卡片的任务管理系统。涵盖拖拽卡片操作、泳道组织、WIP 限制校验、自定义卡片模板、事件处理，以及 React 应用的数据绑定。

S

syncfusion-react-tabs

syncfusion / react-ui-components-skills

在 Syncfusion React 应用中实现并定制 Tab 组件。当用户需要创建选项卡界面、管理选项卡内容渲染、配置页眉位置、启用拖拽重新排序或自定义选项卡样式时，使用此技能。适用于构建导航布局、组织内容、响应式选项卡控件、本地化选项卡以及无障碍的选项卡交互。

V

visual-regression-testing

aj-geddes / useful-ai-prompts

通过跨版本比较截图，检测 UI 中非预期的视觉变化。适用于视觉回归、截图差异对比、Percy、Chromatic、UI 测试和视觉校验。

C

css-native

dylantarre / animation-principles

在使用纯 CSS 动画和过渡实现 Disney 的 12 条动画原则时使用

P

postcss-best-practices

mindrally / skills

面向现代 CSS 处理与优化的 PostCSS 最佳实践和配置指南

F

flutter-development

aj-geddes / useful-ai-prompts

使用 Flutter 和 Dart 构建精美的跨平台移动应用。涵盖组件、Provider/BLoC 状态管理、导航、API 集成和 Material Design。

S

syncfusion-react-ai-assistview

syncfusion / react-ui-components-skills

实现 Syncfusion React AI AssistView 组件。用于处理 AI 驱动的对话界面、AssistView 设置、对话流程、语音输入或输出、文件附件、UI 自定义、状态管理、思维链推理可视化、带动态工具的生成式 UI、AI 遥测和使用情况跟踪、提示词编辑器提及功能，以及在 React 应用中集成 OpenAI 或 Azure AI 等 AI 服务。

M

modal-and-overlay-patterns

dembrandt / dembrandt-skills

模态框、抽屉、底部弹层和气泡层，各自有其作用域和阻塞级别。当设计对话框、确认框、侧边面板或操作表时使用。

S

syncfusion-react-accumulation-chart

syncfusion / react-ui-components-skills

实现 Syncfusion React 累积图表，包括饼图、圆环图、漏斗图和金字塔图。当用户需要圆形数据可视化、基于百分比的图表或比例数据展示时使用此技能。涵盖数据标签、图例、工具提示、分组、智能标签、下钻图表、分离效果、主题、无障碍、导出/打印功能以及动态数据更新。

O

operational-expert-tool-ui

dembrandt / dembrandt-skills

为全天使用某个工具的专业人员打造的密集、线性、状态一目了然的界面。适用于设计调度、仓储、物流、排班或其他 B2B 运营工具。

S

syncfusion-react-dashboard-layout

syncfusion / react-ui-components-skills

使用 Syncfusion React Dashboard Layout 组件构建响应式、可交互的仪表板布局。实现可拖拽和可调整大小的面板、响应式网格系统、动态面板管理和状态持久化。本技能涵盖多列布局、浮动面板排列、大量定制选项、拖放面板重排，以及 React 应用的状态管理。

U

ux-designer

aj-geddes / claude-code-bmad-skills

设计用户体验、制作线框图、定义用户流程、确保可访问性。触发关键词——UX 设计、线框图、用户流程、可访问性、WCAG、移动优先、响应式、UI 设计、用户旅程、界面设计、用户体验、设计系统、组件设计、交互设计

A

aesthetic

mrgoonie / claudekit-skills

遵循成熟设计原则，打造具有美感的精美界面。适用于构建 UI/UX、分析灵感网站的设计、使用 ai-multimodal 生成设计图像、实现视觉层级与色彩理论、添加微交互，或创建设计文档。包含使用 chrome-devtools 和 ai-multimodal 捕获并分析灵感截图的流程、迭代生成设计图像直至达到美学标准，以及覆盖 BEAUTIFUL（美学原则）、RIGHT（功能性/无障碍）、SATISFYING（微交互）和 PEAK（叙事）各阶段的全面设计系统指导。与 chrome-devtools、ai-multimodal、media-processing、ui-styling 和 web-frameworks 技能集成。

S

syncfusion-react-maps

syncfusion / react-ui-components-skills

使用 Syncfusion React Maps 组件实现地理数据可视化。适用于显示交互式地图、基于位置的信息或区域数据分析。本技能涵盖 React 应用中的地图提供商（Bing、OpenStreetMap）、GeoJSON 渲染、标记和气泡、缩放/平移、数据标签、图例以及分级设色可视化。

S

syncfusion-react-query-builder

syncfusion / react-ui-components-skills

Syncfusion React Query Builder 组件实现指南。适用于构建高级筛选界面、创建复杂的数据查询系统或实现动态的基于规则的筛选。涵盖查询构建器配置、SQL 查询转换、拖拽筛选、定制和状态管理。

P

parallel-concepts

owl-listener / designer-skills

针对同一问题同时构建多个真正不同的解决方案，差异体现在用户要做什么，而不只是外观。当已有一个方向，团队即将默认沿着它继续完善时使用。之后要在这些概念中做选择，请使用 `concept-selection`。

P

product-launch-motion

abubakrchan / product-launch-motion

用户要求制作发布视频、产品影片、动态设计作品、UI 动效片段、Dribbble 风格的 UI 动画或动态品牌/Logo 片头时使用——即任何从 HTML 渲染为 MP4，并包含光标、形变 UI、弹簧动效、节拍同步音乐和音效的作品。包含 Chan 的完整创意指导（单一形状不断切、模糊内容切换、弹簧动效、真实数据、Logo 撞入、不设创意限制）以及经过验证的构建/渲染流程（纯 seek(t)、闭式弹簧、Playwright 子帧、ffmpeg tmix、numpy 节拍网格）。

S

saas-productivity

dylantarre / animation-principles

在为商业工具、项目管理、协作软件或效率类应用设计动画时使用

M

muse

simota / agent-skills

定义和管理设计令牌，将令牌系统应用到现有代码库，并构建设计系统基础。用于间距、颜色、排版、暗色模式和跨平台输出。

S

syncfusion-react-blockeditor

syncfusion / react-ui-components-skills

实现 Syncfusion React BlockEditor 组件，用于基于块的内容编辑。适用于基于块的富文本编辑、文档创建、CMS 界面、markdown 替代方案、编辑器设置、块配置、工具栏或菜单自定义、拖放行为、格式选项、API、无障碍访问、基于 Yjs 集成的实时协作编辑、用户在线状态与远程光标，以及在 React 中进行文档版本历史和快照管理。

C

concept-selection

owl-listener / designer-skills

根据预先设定的标准在相互竞争的概念中做出选择，并记录每个被淘汰的概念所验证的内容。适用于存在多个可行方向、必须择一推进时。选择要解决的问题时，使用 `opportunity-framework`（ux-strategy）；根据生产流量做决策时，使用 `a-b-test-design`。

S

syncfusion-react-speech-to-text

syncfusion / react-ui-components-skills

实现 Syncfusion React SpeechToText 组件。使用此技能将语音转为文本、管理麦克风输入、控制监听状态、处理语音事件、自定义 UI、在 React 应用中支持可访问的语音表单，以及处理全球化和安全问题。

S

syncfusion-react-treeview

syncfusion / react-ui-components-skills

实现 Syncfusion React TreeView 组件，用于以层级数据方式展示内容，支持节点选择、拖拽排序、内联编辑和自定义模板。适用于构建组织结构图、文件系统、导航树或多层级界面。涵盖选择模式、复选框、筛选、排序、键盘导航、无障碍访问，以及使用无状态模板进行性能优化。

F

frontend-dev-guidelines

davila7 / claude-code-templates

React/TypeScript 应用的前端开发指南。涵盖 Suspense、懒加载、useSuspenseQuery、以 features 目录组织文件、MUI v7 样式、TanStack Router、性能优化和 TypeScript 最佳实践等现代模式。在创建组件、页面、功能模块、获取数据、编写样式、配置路由或处理前端代码时使用。

I

image-to-text

pascalorg / skills

使用 OCR 从图像中提取文本。当用户分享截图，需要读取文本内容、复制 UI 标签或从设计稿中提取文案时使用。

H

hebrew-rtl-best-practices

skills-il / localization

为希伯来语 Web 应用实现从右到左（RTL）布局。当用户询问 RTL 布局、希伯来语文本方向、双向（bidi）文本、希伯来语 CSS、"right to left"（从右到左），或需要构建希伯来语 Web UI 时使用。涵盖 CSS 逻辑属性、:dir() 伪类、Tailwind RTL、React/Next.js RTL 设置、图标镜像、希伯来语排版和字体选择。不要用于阿拉伯语 RTL（排版相似但有所不同），除非用户明确要求共享的 RTL 模式；也不适用于原生移动端 RTL（React Native I18nManager、SwiftUI、Android），后者不在范围内。

S

syncfusion-react-dropdown-tree

syncfusion / react-ui-components-skills

实现 Syncfusion React Dropdown Tree 组件，通过下拉交互选择层级数据。适用于多选复选框、懒加载、远程 OData 集成、自定义模板、键盘导航、RTL 支持或本地化界面等场景。支持自动勾选层级结构、筛选、树设置、完整的事件处理以及全面的无障碍功能。

H

hig-components-layout

raintree-technology / hig-doctor

Apple 人机界面指南中关于布局和导航组件的内容。当用户询问"侧边栏"、"分栏视图"、"标签栏"、"标签视图"、"滚动视图"、"窗口设计"、"面板"、"列表视图"、"表格视图"、"分栏视图"、"大纲视图"、"导航结构"、"应用布局"、"容器"、"装饰元素"，或询问如何在 Apple 应用中分层组织内容时，使用此技能。当用户说"我该如何组织我的应用"、"我该用哪种导航模式"、"我的布局在 iPad 上坏了"、"如何构建侧边栏"、"我该用标签页还是侧边栏"、"我的应用无法适配不同屏幕尺寸"时，也应使用。交叉引用：hig-foundations（布局/间距原则）、hig-platforms（平台专属导航）、hig-patterns（多任务与全屏）、hig-components-content（内容展示）。

E

epic-design

alirezarezvani / claude-skills

使用滚动叙事、视差纵深、文字动画和高级滚动效果，构建沉浸式、电影感的 2.5D 互动网站，无需 WebGL。适用于任何 Web 设计任务：落地页、产品站、hero 区块、滚动动画、视差、粘性区块、区块重叠、区块之间浮动的产品、clip-path 显现、从两侧飞入的文字、滚动时逐词点亮、幕布落下、光圈展开、卡片堆叠、出血式排版，以及任何需要电影感或高级感的网站。遇到「让它活起来」「Apple 风格动画」「区块相互重叠」「产品在区块之间升起」「沉浸式」「滚动叙事」等表述，或任何滚动驱动的视觉效果时触发。涵盖 8 个类别共 45+ 种技术。编码前始终会检查、评估并规划素材。可放心用于任何 Web 设计任务。

F

frontend-design-pro

binjuhor / shadcn-lar

创建令人惊艳、可直接上线的界面，并提供完全匹配的真实照片（Unsplash/Pexels 直链）或无懈可击的自定义图像生成提示词，用于主视觉图、背景和插画。零 AI 粗制滥造，零虚假链接。

S

syncfusion-react-inline-ai-assist

syncfusion / react-ui-components-skills

实现 Syncfusion React Inline AI Assist 组件。使用此 skill 添加行内 AI 建议，集成 OpenAI、Gemini、Lite-LLM 或 Ollama 等 AI 服务，配置命令和响应操作，自定义工具栏，启用内置语音转文本，处理事件，并在 React 中支持实时提示词-响应工作流。

S

syncfusion-react-ribbon

syncfusion / react-ui-components-skills

实现 Syncfusion React Ribbon 组件。使用此技能在 React 中创建 Ribbon 界面，包括标签页、分组、项、Classic 或 Simplified 布局、文件菜单与后台视图、上下文选项卡、库、KeyTips、无障碍、主题、响应式行为、定制与故障排查。

H

hig-patterns

raintree-technology / hig-doctor

Apple 人机界面指南中的交互与 UX 模式。当用户询问"onboarding flow"、"user onboarding"、"app launch"、"loading state"、"drag and drop"、"search pattern"、"settings design"、"notifications"、"modality"、"multitasking"、"feedback pattern"、"haptics"、"undo redo"、"file management"、"data entry"、"sharing"、"collaboration"、"full screen"、"audio"、"video"、"haptic feedback"、"ratings"、"printing"、"help" 或 Apple 应用中的 "account management" 时使用此技能。当用户说"how should onboarding work"、"my app takes too long to load"、"should I use a modal here"、"how do I handle errors"、"when should I ask for permissions"、"how to show progress" 或 "what's the right way to confirm a delete" 时也使用。交叉引用：hig-foundations（底层原则）、hig-platforms（平台细节）、hig-components-layout（导航）、hig-components-content（数据展示）。

R

repeated-component-alignment

dembrandt / dembrandt-skills

卡片、行、磁贴和单元格都是固定槽位模型，在内容长度变化时保持对齐。构建或审查任何重复组件时使用。

M

material-ui-styling

mui / material-ui

根据 MUI 官方指南选择合适的 Material UI 样式方案（sx、styled、主题覆盖、全局 CSS）。适用于为 @mui/material 组件编写样式、自定义主题、覆盖插槽，或比较 sx 与 styled。

S

ss-reference

bitjaru / styleseed

将截图、URL、Figma 导出文件或现有 UI 编译为项目本地的输出语法。当用户提供的设计参考是 StyleSeed 尚未建模的内容时使用。

B

brand-guidelines

alirezarezvani / claude-skills

当用户希望应用、记录或执行任何产品或公司的品牌规范时使用。同样适用于用户提到"品牌规范"、"品牌色"、"字体排印"、"logo 使用"、"品牌语调"、"视觉识别"、"语气"、"品牌标准"、"风格指南"、"品牌一致性"或"公司设计标准"时。涵盖色彩系统、字体排印、logo 规则、图像使用规范和品牌语调矩阵，适用于任何品牌——包括 Anthropic 的官方视觉识别。

D

drawio-flowchart

partme-ai / full-stack-skills

使用 Draw.io (diagrams.net) 创建流程图、泳道图和业务流程图。涵盖标准流程图形状（处理、决策、开始/结束）、连接线、自动布局以及导出为 PNG/SVG/PDF。当用户需要可视化工作流、决策树或业务流程时使用。

I

iphone-duo-design-review

mirzaaghazadeh / iphone-duo-skills

评审或设计适用于 iPhone Duo 各种姿态的 iOS 界面：闭合、展开、书本折叠、桌面和帐篷模式。涵盖侧边控制、非对称布局、避开折痕、面板，以及如何充分利用内屏。用于设计评审、模型稿评审，或确定可折叠 iPhone 屏幕应呈现的效果，而非如何编写代码。

T

theme-factory

composio-community / awesome-codex-skills

用于为各类成品应用主题样式的工具包，包括幻灯片、文档、报告、HTML 落地页等。提供 10 种预设配色和字体主题，可应用于已创建的成品，也可即时生成新主题。

L

less-best-practices

mindrally / skills

Less CSS 最佳实践与编码规范，用于可维护、模块化的样式表

A

avoid-ai-design

funboy322 / avoid-ai-design

审查并重写前端 UI，以去除常见的 AI 设计模式（“AI slop”），包括一阶默认样式（紫色渐变、Inter、三个卡片上方居中的 Hero 区块、未经调整的 shadcn）和二阶“有品位的 AI”样式（奶油色配陶土色、近黑色配亮酸绿、全大写等宽字体界面、标题中仅一个强调词、装饰性 01/02/03）。适用于用户要求“去除 UI 的 AI 味”“让设计看起来不那么像 AI 生成”“审查页面或组件是否有 AI 设计特征”“修复 Claude/Codex 生成的通用风格前端”，或让多页面网站保持统一设计系统时。涵盖 HTML/CSS 和 React/Tailwind/shadcn。提供仅检测模式，以及用于检测代码特征的零依赖扫描器（scripts/detect.mjs）。