Skills

H

hz-android-2d-porting

meta-quest / agentic-tools

指导将现有 Android 2D 应用移植到 Meta VR 和 Horizon OS，包括输入适配、面板布局和设计要求。在为 Meta VR 调整移动 Android 应用时使用。对于 UI 设计决策，如有 hz-panel-designer，请使用它。构建路径：Standard Android；如果构建路径不明确，请使用 hz-quest-verify-first。

J

Journey Mapping & Service Design

cuellarfr / design-skills

创建客户旅程图、服务蓝图、体验图、同理心地图及其他协作对齐图。指导图表类型选择、内容结构、绘图语法和对齐研讨会。

M

magento-ui-component-developer

maxnorm / magento2-agent-skills

使用 Magento 的 UI Component 框架构建复杂的管理界面和前端组件。创建管理网格、表单、模态框或数据驱动界面时使用。精通 XML 配置、KnockoutJS 模板、数据提供程序，以及复杂的表单和网格实现。

R

research-presenter

travisjneuman / .claude

将研究成果转化为演示文稿大纲，提供叙事脉络、数据可视化建议、受众适配和幻灯片设计指导。适用于制作研究演示文稿、会议演讲或研究成果简报。

V

voice-interface-builder

daffy0208 / ai-dev-standards

语音界面、语音识别和文本转语音系统构建专家

A

axiom-swiftui-nav

charleswiltgen / axiom

在实现导航模式、选择 NavigationStack 或 NavigationSplitView、处理深层链接、采用协调器模式，或请求审查导航实现时使用——可避免 iOS 18 及更高版本中的导航状态损坏、深层链接失效和状态恢复错误

C

canvas-workbench

drupal-canvas / skills

需要在本地 Canvas Workbench 中验证工作，或用户要求在 Workbench 中运行、打开、检查或编写组件模拟或页面预览时使用。验证 Canvas Workbench 可通过项目的包运行器使用，启动本地 Workbench 开发服务器，并将 Workbench 验证纳入实现工作流

C

css-animations

chanjing-ai / framevideo

FrameVideo 的 CSS 动画适配模式。用于编写 CSS 关键帧、基于 animation-delay 的计时、animation-fill-mode、animation-play-state，或仅使用 CSS 的动态效果，以便 FrameVideo 在预览和渲染期间能够确定性地定位。

D

design-tokens-skill

podo / design-agent-skills

W3C DTCG 令牌规范方面的专家，涵盖令牌结构、色彩空间（sRGB、Display P3、OKLCH）、引用/别名、主题解析器及工具（jq、JSONata、Terrazzo、Figma 导出）。设计令牌架构的权威技能。

E

elegant-design

rand / cc-polymath

创建一流、易于访问且响应式的界面，包含聊天、终端、代码展示和流式内容等精致的交互元素。构建需要专业质感和面向开发者功能的用户界面时使用。

F

flutter-use-column-row-first

evanca / flutter-ai-rules

构建任何 Flutter 屏幕或组件时使用，优先选择响应式 Row、Column、Expanded、Flexible 和 Spacer 布局，而非固定尺寸或基于坐标的替代方案

G

gemdesign-skill

gemdesign-ai / skills

通过 CLI 生成、保存和修改 GemDesign 原型页面。用户想创建 UI 原型、设计页面或根据需求批量生成页面时调用。

H

html-ppt-tech-sharing

nexu-io / open-design

会议/内部技术分享演示文稿：GitHub 深色风格、JetBrains Mono、终端代码块、议程和问答页面。适用于工程演示、内部分享会、会议演讲和代码密集型讲解。

I

image-to-code

openai / role-specific-plugins

将选定的图像、屏幕截图、模型图或 Image Gen 参考实现为忠实还原且响应式的前端。

M

modelslab-interior-design

modelslab / skills

使用 ModelsLab 的 Interior API 改造和重新设计室内空间。利用 AI 生成室内设计、装饰房间、创建平面图并修复建筑外观。

P

primevue-skilld

skilld-dev / vue-ecosystem-skills

在编写、调试或更新导入 primevue 的代码时使用（PrimeVue v5，适用于 Vue 3 的 UI 组件库）。提供包含所需 PrimeUI 许可证密钥的设置说明、已弃用 API 的替代方案、复合组件用法和设计令牌主题配置。

R

refactor-ui

gnurio / refactoring-ui-plugin

根据全部 10 项 Refactoring UI 技能分析设计，并生成包含具体修复方案的全面评估。

S

sci-html

shzhao27208 / aut_sci_write

根据 PDF、结构化文本、Markdown、论文摘要、提纲或研究笔记，生成学术演示风格的 HTML 幻灯片和浏览器报告。用户想将科学论文 PDF 直接转换为交互式 HTML 报告、可点击的网页演示文稿、可分享的浏览器幻灯片，或类似 PPT 的 HTML 输出（包含图表、结构化见解、分节页面和离线幻灯片目录）时，均可使用。在 Aut_Sci_Write 套件中，用户需要 HTML/网页输出时选择此 Skill；明确需要 .pptx 文件时选择 sci-ppt。

T

table-filters

shipshitdev / skills

设计数据表的筛选 UX：为每列选择筛选类型，并构建包含内联表头筛选器的统一筛选字段。在构建需要筛选功能的表格时使用。

T

tailwind-validator

shipshitdev / skills

验证 Tailwind CSS v4 配置并检测和预防 Tailwind v3 模式。在设置 Tailwind、审核 CSS 配置或怀疑正在使用过时的 Tailwind 模式时使用此技能。确保采用带有 @theme 块的 CSS 优先配置。

W

web-clone

rheinmir / setup

克隆网站——提供两种模式。SNAPSHOT = 忠实、独立的页面离线副本（HTML+CSS+JS+图像合并为一个文件，字节完全一致，采用 SingleFile 风格）。RECONSTRUCT = 使用 AI 逆向分析页面，生成整洁且可编辑的 Next.js/Tailwind 代码库（设计令牌 → 组件规格 → 并行构建器 → 视觉差异 QA，采用 ai-website-cloner-template 方法）。当用户想要“克隆此网站”、复制页面的设计/UI 和交互、复刻布局、离线保存，或将网站重建为可编辑代码时使用。先构建，后适配：内置快照功能现已可用；忠实的实时捕获和重建流水线则通过单配置引擎适配器实现。

W

webflow-designer-api

224-industries / webflow-skills

使用 Webflow Designer API：构建 Designer Extensions（嵌入 Webflow Designer 的 iframe），或为 Designer API Playground 生成代码片段。涵盖元素操作、样式、组件、页面、变量、资源、错误处理、CLI 用法和 UI 设计模式。创建、调试或修改 Designer Extensions，或用户想在 Playground 应用中运行 Designer API 代码时使用。

B

breadboarding

rjs / shaping-skills

将工作流描述转换为呈现 UI 和代码可供性及其连接方式的可供性表。可用于映射现有系统，或基于经过梳理的组件设计新系统。

C

component-interface-design

qodex-ai / ai-agent-skills

使用组件库和设计系统设计界面。利用预构建且支持无障碍访问的组件基元，创建协调一致的 UI。

D

design

arjunkshah / design-skill

用于布局、视觉形象和动态编排的统一前端设计技能。当 Agent 需要精心设计的结构、更出色的排版、更合适的图像选择以及按区块设计的动画，又不想拆分成多个技能时使用。

F

frontend-architect

curiositech / some_claude_skills

精通 Cloudflare 部署、shadcn/ui 组件和内部工具架构的前端技术栈专家。指导技术选型、部署模式和设计系统集成。

F

frontend-css-patterns

majesticlabs-dev / majestic-marketplace

适用于各种框架的 CSS 排版、色彩、动效和空间构图模式

H

haptics

johnrogers / claude-swift-engineering

在需要为用户确认（按钮按下、切换、购买）、错误通知或自定义触觉模式（Core Haptics）添加触觉反馈时使用。涵盖 UIFeedbackGenerator 和 CHHapticEngine 模式

H

html-css-best-practices

hack23 / homepage

用于 Web 开发的语义化 HTML5、CSS 自定义属性、响应式设计和性能优化

H

html-ppt-dir-key-nav-minimal

nexu-io / open-design

8 页极简方向键 keynote — 每页一个独立单色背景（靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭），各自配色，160px display 标题 + 4px 短粗 accent 线分隔、箭头 → 前缀的 Mono 列表、左下 ← → kbd 提示 + 右下页码、巨大呼吸留白。适合“有话要说但没什么可看”的 keynote、launch、公开演讲。

H

html-ppt-presenter-mode

nexu-io / open-design

演讲者模式专用 deck — tokyo-night 默认主题，5 套主题 T 键切换，每页带 150-300 字逐字稿示例（<aside class="notes">），按 S 打开 popup（CURRENT / NEXT / SCRIPT / TIMER 四张磁吸卡片）。用于技术分享、公开演讲、课程讲解，怕忘词或要提词器的场景。

H

html-ppt-testing-safety-alert

nexu-io / open-design

红琥珀警示 deck — 顶部/底部 45° 红黑 hazard 条纹、红色删除线否定标题、L1/L2/L3 绿/琥珀/红 tier 卡片、圆点状态 alert box、policy-yaml 代码块（红色左边框 + bad 关键词高亮）、红绿 checklist、Q1 事故堆叠柱状图。适合安全 / 风险 / 事故复盘 / 红队 / 上线前 AI 评审 / policy-as-code。

H

html-ppt-xhs-white-editorial

nexu-io / open-design

白底杂志风 deck — 纯白背景 + 顶部 10 色彩虹条、80–110px display 标题、紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组（粉/紫/蓝/绿/橙）、黑底白字 .focus pill、大块引用。同时适合发布小红书图文 + 横版 PPT 双用。

I

interface-auditor

uxuiprinciples / agent-skills

使用 uxuiprinciples 的 smell 分类体系检测界面描述中的 UX 反模式（异味）。以结构化形式返回发现结果，包括匹配的症状、严重程度和逐步修复方案。API key 可选；完整修复方案需要 uxuiprinciples.com API Access。

J

jtbd

glebis / claude-skills

已迁移——jtbd 现已随 humane 插件（glebis/humane-agentic-design）提供，不在此处。此目录为重定向页；安装 humane 即可获取维护中的技能。

P

pixel-perfect-ui

corlab-tech / skills

使用 Figma MCP 和 Playwright 为 Next.js/React 实现自主的像素级精准 UI 开发循环。将 Figma 设计转换为可用于生产环境的组件，并通过迭代进行视觉验证。对任何实现 Figma 设计的请求自动触发，包括“实现这个 Figma”“根据 Figma 构建此页面/组件”“根据 Figma 设计创建”“实现设计”“构建此区块”“根据设计创建组件”。适用于：（1）根据 Figma 构建页面/组件；（2）像素级精准还原；（3）响应式布局；（4）设计令牌转换。

U

ui5-best-practices-accessibility

ui5 / plugins-coding-agents

当用户要求审计、修复、检查、评审或改进 UI5 应用文件（视图、片段、控制器）中的无障碍访问、a11y、ARIA、WCAG 合规性、地标、标签、标题级别、焦点处理、键盘导航、键盘快捷键、屏幕阅读器支持、不可见消息、阅读顺序或触控/目标尺寸时，使用此 Skill。用户创建新的 UI5 视图、片段或控制器并希望其具备无障碍访问能力，或询问特定控件（Dialog、Table、Panel 等）是否符合无障碍要求时，也使用。关键词：accessibility、a11y、ARIA、WCAG、screen reader、NVDA、JAWS、VoiceOver、landmark、landmarkInfo、accessibleRole、ariaLabelledBy、ariaDescribedBy、labelFor、tooltip、alt text、decorative、heading level、initialFocus、F6、fast nav、fastnavgroup、tabindex、CommandExecution、keyboard shortcut、InvisibleMessage、announce、reading order、reactiveAreaMode、target size。

U

userflow

membranedev / application-skills

Userflow 集成。管理数据和记录，并自动化工作流。用户希望与 Userflow 数据交互时使用

V

vanilla-lynx

lynx-community / skills

编写、审查或讲解直接使用 Element PAPI 的 Vanilla Lynx 源码，交付形式为无需构建的 `.lynxml` 产物或 Rspeedy 项目，并涵盖相关构建和服务工作流。不包括 ReactLynx、Canvas/WebGL、独立的 API/CSS 查询、设备端运行时调试和 Bundle 分析

W

writing-artifacts

ohyeh / agent-scripts

将模糊的主题——问题描述、事件、决策或长篇构想——转化为用户所选格式（md、html 页面、Artifact、图像或纯文本）的精良成品。按照杜绝空话的规范运行写作流程（挖掘 → 组织 → 精炼），然后交由 using-design-skills 进行渲染。用户希望将内容清晰地解释成文档或页面时调用；仅希望修改代码时不要调用。

B

bmad-create-ux-design

bmad-code-org / bmad-method

规划 UX 模式和设计规格。用户说“我们来创建 UX 设计”“创建 UX 规格”或“帮我规划 UX”时使用。

D

design-catalogue

podo / design-agent-skills

design-agent-skills 的目录导航器。列出可用的 design skill 存根，将用户意图与合适的存根匹配，并引导用户安装和调用。用户想浏览或查找合适的设计技能时使用。

D

design-review-garrytan

podo / design-agent-skills

会编程的设计师：先进行视觉审查，再通过原子化提交逐项修复问题。Garry Tan 的设计审查技能——将 UI 视为代码，系统地识别并消除设计债务。

G

google-slides

cursor / plugins

通过 google-slides MCP 工具构建和编辑 Google Slides，包括幻灯片、卡片和列网格、文本框、形状、图像、表格、样式、布局检查，以及逐页 PNG 渲染。创建演示文稿、布局幻灯片元素、匹配模板或检查幻灯片外观时使用。

H

html-ppt-product-launch

nexu-io / open-design

产品发布主题演示文稿——深色主视觉搭配浅色内容、暖橙到蜜桃色的点缀、功能卡片、定价档位和 CTA。用于宣布产品、发布功能或制作主题演讲式的发布演示

H

html-ppt-xhs-post

nexu-io / open-design

小红书 / Instagram 风格的 9 页 3:4 竖版图文（810×1080）——暖色 pastel、虚线 sticker 卡片、底部页码点点。用于发布小红书图文、Instagram 轮播内容和品牌种草内容。

S

specsfy-specialist-prototyping

promovaweb / specsfy

构建一次性原型，以足够的最低保真度回答特定的技术、交互或视觉问题，同时避免将技术债务带入生产环境。用于技术探查、概念验证，以及在做出高成本决策前探索替代方案；未经重新实现和完整验证，不要将原型代码提升到生产环境；如果问题已有文档化答案，则不要使用此技能，请改用 `$specsfy-specialist-technical-research`。

S

syncfusion-wpf-datagrid

syncfusion / wpf-ui-components-skills

实现 Syncfusion WPF DataGrid（SfDataGrid）组件，用于在 Windows Presentation Foundation 应用程序中显示和操作表格数据。处理数据网格、表格视图或数据绑定场景时使用。支持排序、筛选、分组、编辑、Excel/PDF 导出、拖放、主从视图、汇总和丰富的样式选项

U

unslop

heydamir / unslop

将带有 vibe coding 痕迹、看起来像 AI 生成的 UI，改造成具有自身特色的设计界面。先从产品本身确定设计方向，再依次调整间距、颜色、图标、文案、字体、布局、细节、视觉效果和动效；如果有图像工具，还可以生成真实的主视觉图。适用于用户要求去除 AI 感、润色、清理或重新设计界面，或 UI 出现常见特征时，例如紫色渐变、光晕、渐变文字、表情符号标签、“New ✨”徽章、亮面团块、带字距的全大写标签、脉冲元素或间距不均。适用于 React、Tailwind、HTML 和 CSS，可用于仪表板、应用和落地页。

暂无简介

C

canvas-page-definition

drupal-canvas / skills

任何 Canvas 页面规范任务都从这里开始。用于创建、修改、重构、审查、迁移或验证与 Canvas 同步并在 Workbench 中呈现的页面 JSON 文件。确立标准 Canvas 页面规范契约，包括布局、结构、格式限制和验证。

D

design-motion-principles

podo / design-agent-skills

动效与交互设计专家，提供两种模式：构建具有明确目的的动效交互组件，或审计现有动画中的 AI 套路。审计会生成品牌化 HTML 报告，并为每项发现提供循环播放的 CSS 演示。基于 Emil Kowalski（克制）、Jakub Krehel（生产级打磨）和 Jhey Tompkins（创意实验）的理念，并根据项目背景调整各视角的权重。适用于 React、Framer Motion、CSS 和 HTML。

M

macos-design

davepoon / buildwithclaude

设计并构建具有原生体验的 macOS 应用 UI。每当用户要求创建桌面应用、macOS 应用、Mac 风格界面、Apple 风格 UI、系统工具，或任何应具有原生 Mac 外观和体验的内容时，都使用此 skill。用户提到“原生体验”“桌面应用设计”“Apple 设计模式”“侧边栏布局”“红黄绿窗口按钮”，或希望构建感觉像 macOS 原生应用的工具时，也应触发。此 skill 涵盖布局、构图、交互模式、动画、浅色/深色模式，以及让应用呈现 Apple 原生风格的各种细节。

M

multi-agent-image

kangarooking / kangarooking-skills

面向 Hermes 的独立多 Agent 图像生成技能。包括内部设计编译器、通过 apimart.ai 使用 GPT-Image-2 生成图像、复用案例库、交互式参考图选择、批处理工作流，以及风格一致的系列图像生成。

N

nextjs-framer-motion-animations

tristanmanchester / agent-skills

在 Next.js 中实现和调试 Motion for React：本地交互、presence、布局、共享元素、滚动、减少动态效果设置和路由器集成。适用于明确的 Motion/Framer Motion 工作或需要相关交互的情况；简单效果优先使用 CSS，受支持的路由场景则优先使用框架原生的视图过渡。

O

opendesign

manalkaff / opendesign

开始任何设计任务时使用，包括 HTML 页面、幻灯片、交互式原型、UI 套件和品牌系统。用于确立基础设计师角色、工作流和审美规则，并根据产物类型路由到专门技能。

R

react-bits

akillness / jeo-skills

集成、定制 react-bits（github.com/DavidHDev/react-bits），并为其贡献内容。这是规模最大、创意最丰富的动画 React 组件库，涵盖 Vite、Tailwind CSS v4、Three.js/Fiber、GSAP 和 Framer Motion 集成。用户询问 react-bits、动画 React 组件、jsrepo registry，或如何向 react-bits 仓库贡献新动画组件时使用。

S

shadcn-flutter

sunarya-thito / shadcn_flutter

基于 shadcn/ui 设计系统构建的综合性 Flutter UI 生态系统。

S

shadcn

sickn33 / agentic-awesome-skills

管理 shadcn/ui 组件和项目，为构建现代设计系统提供上下文、文档和使用模式。

T

threejs-pro

404kidwiz / claude-supercode-skills

精通使用 Three.js、React Three Fiber（R3F）和 WebGL 着色器制作 3D 网页图形。