Skills

A

a11y

aladicf / better-react-web-ui

系统地审查并修复 UI 中的无障碍问题，重点关注键盘导航、屏幕阅读器支持、颜色对比度、语义化 HTML、ARIA 用法和动态效果敏感性。用户希望改善无障碍性、让组件符合无障碍要求、修复 WCAG 违规、添加键盘支持或确保兼容屏幕阅读器时使用。

A

accessibility

flitzrrr / frontend-design-skills

WCAG 符合性、BFSG 合规、语义化 HTML、ARIA、键盘导航、对比度、表单以及辅助技术。按 WCAG 2.1 AA 定义无障碍 Web 界面的强制规则。

A

accessibility-implementation

laurigates / claude-plugins

WCAG 2.1/2.2 合规、ARIA 模式、键盘导航、焦点管理、a11y 测试。在实现无障碍组件或用户提到 WCAG/ARIA/读屏软件时使用。

A

ads-landing

hainrixz / claude-ads

付费广告系列的落地页质量评估。评估信息匹配度、页面速度、移动端体验、信任信号、表单优化和转化率潜力。当用户提到落地页、点击后体验、落地页审计、转化率或落地页优化时使用。

A

android-compose-foundations

midudev / autoskills

使用 Jetpack Compose 基础功能、布局、修饰符、主题和稳定的组件结构构建 Android UI

A

animate

aladicf / better-react-web-ui

实现或优化 UI 动效、手势和过渡。当用户要求动画、悬停或按压动效、拖拽或滑动行为、过渡时序或减少动效的替代方案时使用。仅提及抽屉、Toast 或悬停状态并不代表要求动画。

A

anti-ui-slop

discountry / ritmex-skills

检测、审查、预防并移除前端代码中 AI 生成的 UI 趋同模式（“AI slop”）。在构建或设计 UI、审查前端更改、打磨视觉设计时使用，或当用户要求移除 AI 感、让界面显得由人设计、优化页面、审核 UI 质量，或解释某个设计为何显得千篇一律时使用。涵盖 HTML、CSS、JSX/TSX、Vue、Svelte 和 Tailwind；审核 46 种已编目的模式，并加上组合层面的检查，区分源码确认、渲染确认和基于判断的证据，并在无需外部依赖的情况下将获授权的代码改写为产品特定的设计方向。

B

bolder

aladicf / better-react-web-ui

当设计显得平淡、普通或过于保守时，增强视觉冲击力、对比度、个性和构图信心。适用于设计需要更多活力、自信或记忆点的情况，而非真正的问题是杂乱、过度强烈或微小细节的润色。

C

carbon-design-system

fefogarcia / approved-skills

使用 IBM 的 Carbon Design System 构建 UI。当用户要求 Carbon 风格界面、IBM 风格仪表盘、遵循 Carbon 约定的企业级 UI，或明确提及 Carbon、IBM 设计或 @carbon/react 时使用。涵盖组件用法、设计令牌（颜色、排版、间距、动效）、主题（White、Gray 10、Gray 90、Gray 100）、网格布局和无障碍。同时支持产物/HTML 输出（基于 CDN）和完整 React 项目输出（@carbon/react）。触发词包括 "Carbon"、"IBM design system"、"enterprise dashboard"、"@carbon/react"、"carbon components"，或对 IBM 风格专业界面的请求。

C

clarify

aladicf / better-react-web-ui

改进 UX 文案、营销文案、标签、微文案、说明和错误消息，让界面和产品信息更易理解和使用。用户提到文案令人困惑、标签不清楚、错误文本不佳、CTA 缺乏力度、说明难以遵循，或希望改善 UX 写作时使用。

C

color-palette

nhatmobile1 / color-palette-skill

为 UI/Web 设计创建独特且无障碍的调色板，避免泛泛的 AI 审美。适用于设计网站、应用或任何需要精心选色的数字界面。提供精选的领域专属调色板、色彩理论指导、无障碍验证，以及摆脱过度使用模式（紫色渐变、橙青组合、泛泛的科技蓝）的策略。包含对比度检查器、调色板生成器，以及按领域（科技/SaaS、电商、医疗、金融、创意、食品）组织的全面参考资料。

D

d2-diagrams

boazy / skills

使用 D2 从声明式文本生成图表——现代文本转图表语言，具备自动布局、主题和高级样式。适用于从文本定义创建架构图、流程图、决策树、工作流图、时序流或 ERD 的场景。

D

desainpakeai-prototype

mfatihrabbani / desainpakeai-cli

使用 dpai CLI 构建、检查、编辑、验证并导出无依赖的 DesainPakeAI 原型工作区。适用于原型页面、布局、组件、设计 token、DESIGN.md 指南、视觉审查检索、画布工作状态，或单 HTML 导出。不适用于 TanStack 宿主 UI 或旧版原型模板。

D

design-handoff-spec

dengineproblem / agents-monorepo

设计交接专家。用于设计规范、Figma annotations 和 developer handoff。

D

design-import

yonatangross / orchestkit

从 Claude Design 交付包脚手架生成 React 组件，并止步于磁盘上的文件：不生成 stories、不生成测试、不创建 pull request。当拿到 claude.ai/design URL 或本地交付包文件时使用；若同一套脚手架需要继续完成测试生成、浏览器验证并开启 PR，请改用 /ork:design-ship。

D

design-prompt-generator-v2

bear2u / my-skills

面向 AI 网页开发工具（Lovable、Cursor、Bolt）的高级 7 步分层设计提示词生成器。生成具备领域感知且基于用户旅程的设计提示词，并纳入情感化设计考量。触发词为“디자인 프롬프트”、“웹 디자인”、“Lovable 프롬프트”、“랜딩페이지 만들어줘”，或任何 AI 网页构建器的提示词请求。

D

design-review

aa-on-ai / agentic-design-system

从产品契合度、信息架构、参考还原度、工艺与已验证行为等方面评判视觉与前端工作。将评审范围限定在所要求的界面与改动。

D

design-ship

yonatangross / orchestkit

把 claude.ai/design 链接一步变成 pull request 的流水线：通过 /ork:design-import 搭建脚手架，通过 /ork:cover 生成 stories 和 specs，通过 /ork:expect 进行浏览器验证，然后打开 PR。当设计链接应无中间步骤地变成 PR 时使用；如果你只需要把组件写入磁盘，请改用 /ork:design-import。

D

dingtalk-aicard

dingtalk-real-ai / dingtalk-workspace-cli

离线创建、编辑和验证 DingTalk AI Card（A2UI）JSON 文件。适用于根据需求或图像制作卡片、排查结构协议错误，以及通过原生 DWS 命令查询命名组件或函数契约。仅在用户请求预览时，才向当前用户发送卡片。

E

element-ai-vue-helper

element-ai-vue / skills

帮助用户集成和使用 element-ai-vue 组件来构建 AI 聊天界面、Markdown 渲染、代码高亮、打字机效果等 AI 交互功能。当用户提到 AI 聊天、对话界面、Markdown 展示、代码高亮、思考链、消息气泡、聊天中的文件上传，或者提到 element-ai-vue 的任何具体组件名称（如 ElAMarkdown、ElABubble、ElASender、ElAThinking、ElATypewriter 等）时触发此技能。当用户在 element-ai-vue 项目本身中工作并想要添加或修改组件时也使用此技能。确保在用户提到任何与 AI 对话、聊天界面、打字机效果、Markdown 渲染、思考过程展示相关的需求时都主动使用此技能。

E

excalidraw

djalmajr / skills

创作和编辑 Excalidraw 场景文件（`.excalidraw`）：JSON 元素模型（rectangle、text、arrow）、双向箭头绑定、ids/z-order、坐标与尺寸、分组，以及读取/更新现有场景。两种路径——小场景/小修改可手动进行，或通过 `scripts/` 以编程方式：用 Excalidraw 自带的 `convertToExcalidrawElements` 构建场景，用 `exportToSvg` 渲染忠实预览，并检查几何。在你直接创建或修改 `.excalidraw` 文件（而非通过编辑器 UI）时使用。Mermaid 是标准图表的受支持 INPUT，而非该文件格式。

E

expo-tailwind-setup

sickn33 / agentic-awesome-skills

在 Expo 中使用 react-native-css 和 NativeWind v5 设置 Tailwind CSS v4，实现通用样式。

F

figma-reader

delexw / claude-code-misc

通过 Figma MCP 服务读取 Figma 设计。自动检测 MCP 可用性，仅在需要配置时提示用户。当任务上下文中出现 Figma 链接或 UI 设计图时使用。

F

form-edit

nikolay-shirokov / cc-1c-skills

1С 现有受管表单的编辑 — 表单自身的元素、属性、命令与属性设置。当你需要定点修改已有表单时使用。

F

freecad

jablonkai / skills

通过小型本地桥接程序使用 Python 脚本远程控制正在运行的 FreeCAD（开源参数化 CAD 应用），实时构建和编辑 3D 模型：箱体/圆柱体基本体和布尔运算、圆角/倒角实体、受约束的 Sketcher 轮廓、参数化 PartDesign 特征（拉伸、凹槽、旋转、阵列）、2D Draft 几何体、网格和 TechDraw 图纸；随后测量模型、截取视口截图，并导出 STEP / IGES / BREP / STL / OBJ。用户想创建或编辑 CAD 模型、3D 零件、机械部件、外壳、支架或 .FCStd 文件，将模型转换或导出为 STEP/STL/IGES/OBJ，或提到“FreeCAD”、“CAD 模型”、“参数化零件”、“制作 3D 零件”、“导出为 STEP”、“用于打印的 STL”时使用，即使用户没有提到脚本。

F

frontend-design

exceptionless / exceptionless

创建具有鲜明特色、达到生产级水准且设计质量出色的前端界面。用户要求构建 Web 组件、页面、制品、海报或应用时使用此技能，例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 添加样式或美化。生成富有创意且精致的代码和 UI 设计，避免千篇一律的 AI 风格。

F

frontend-design

netease-youdao / lobsterai

创建具有鲜明特色、达到生产级水准且设计质量出色的前端界面。用户要求构建 Web 组件、页面、制品、海报或应用时使用此技能，例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 添加样式或美化。生成富有创意且精致的代码和 UI 设计，避免千篇一律的 AI 风格。

G

generating-images

revitalb-port / skills-registry-demo

使用 OpenAI Image API (gpt-image-2) 生成或编辑图像。当用户要求生成、创作、绘制、渲染、制作插画、样稿或编辑图像、图标、徽标、样稿、插画、OG 图、博客主视觉、营销素材或类似视觉内容时使用。用户提供参考图并要求修改、重新设计风格或混合创作时也使用。触发词：“generate an image”“create an image”“make a picture of”“edit this image”“restyle this”“make a mockup of”“draw a”“render a”“illustration of”。

G

grill-design

will-ness-ai / skills

通过多轮原型与评审结论收敛前端外观。当用户想针对具体变体反复打磨 UI／视觉品味，或 wayfinder 原型工单点名此 Skill 时使用。

H

hierarchy

aladicf / better-react-web-ui

通过修正不明确的主要操作、相互竞争的视觉权重、过于醒目的分区标题以及薄弱的标签/数值呈现，明确优先级与强调重点。当用户提到层级、优先级排序、竞争过多、灰度混乱、标题过于醒目或主要操作不明确时使用。

H

html-generator

camoa / claude-skills

在设计系统中生成品牌化 HTML 页面与组件时使用。创建独立的 HTML 组件，并将其组合为带有内嵌 CSS、响应式设计和品牌集成的完整页面。

H

html-ppt-zhangzara-bold-poster

nexu-io / open-design

Open Design 的 A 轮增长故事：增长曲线、扩张动作，以及为何它具有风险投资级别的规模。专为 A 轮合伙人打造的决定级融资路演幻灯片。

H

html-ppt-zhangzara-capsule

nexu-io / open-design

Capsule —— 暖骨色背景上的模块化药丸形卡片，配全套柔和流行色。适用于任何应给人模块化、现代感和一点 Y2K 感觉的事物：生活方式品牌、创作者作品集、DTC 发布、美容/健康、代理商资质展示。

H

html-ppt-zhangzara-retro-zine

nexu-io / open-design

Retro Zine —— 米色纸张配绿色点缀，Bebas Neue + Caveat：以 HTML 形式呈现的 riso 印刷小志。适用于任何应给人印刷感、低保真和手工感的事物：独立小志与出版物、音乐/艺术品牌、创作者作品集、小批量手工艺品发布、社区演示。

H

htmx-patterns

waldencui / claude-code-django

用于 Django 的 HTMX 模式，包括局部模板、hx-* 属性以及无需 JavaScript 的动态 UI。在构建交互式 UI、处理 AJAX 请求或创建动态组件时使用。

I

in-app-messaging-kit

gtmagents / gtm-agents

产品内消息模式、触发条件和定向规则的库。

I

infolists

mwguerra / claude-code-plugins

为视图页面创建带条目、区块和布局的 FilamentPHP v4 infolists

I

intuiface

membranedev / application-skills

Intuiface 集成。管理 Experiences。当用户需要与 Intuiface 数据交互时使用。

在构建 SwiftUI 视图、使用 @State/@Binding/@ObservableObject 管理状态，或在 iOS 应用中实现声明式 UI 模式时使用。

L

loamui

loamui / loamui

使用 @loamui/core 设计和构建 UI。LoamUI 工作的指挥者。它掌握理念与组合模型，在 frontend-design、modern-css 和 modern-web-guidance 这几个 Skill 之间安排工作顺序，并在汇报任何内容之前先运行评审。适用于任何 LoamUI 的构建、设计、主题或评审任务。

L

local-business-rebuild

lotfb86 / web-design-skills

为本地商业潜在客户打造令人惊艳的新网站。改编自完整的 website-rebuild skill，但针对推测性的本地商业推介进行了优化。10 阶段流程：品牌提取、SEO 审计、设计审计、重建计划、带设计系统的完整构建、文案优化、合并 QA、部署前检查清单，以及输出到 monorepo。使用来自 prospect-scrape 的抓取内容作为输入。无工具/计算器研究阶段。单轮合并 QA。触发条件："rebuild prospect"、"local business rebuild"、"build prospect site"、"rebuild their site"、"prospect rebuild"，或任何为合格潜在客户构建新网站的请求。

L

logo-studio

thatjuan / agent-skills

专业 logo 设计工作室，通过品牌探索、原型映射和迭代优化产出 9+ 个 SVG logo 方案，然后根据最终选定方案生成完整的应用资源包（iOS、Android、macOS、Windows、favicons、PWA、社交），并可选择生成多页品牌指南文档（logo、色彩、字体、布局、UI 组件、动效、语气、资源管理）。当用户为业务、产品或项目要求 logo、品牌标识、图标、文字标识、应用图标、视觉识别或品牌指南时使用。

M

mistica-react

telefonica / mistica-web

使用 Telefonica 的 Mistica 设计系统的 React 组件构建网站和 Web 应用。在使用 @telefonica/mistica 编写 React UI 代码、创建页面、布局、表单或任何应遵循 Telefonica 设计规范的界面时使用本技能。当任务涉及 Mistica 组件、Telefonica 品牌，或用户提到 Mistica 时触发。

M

mobile-design

aiskillstore / marketplace

（移动优先 · 触控优先 · 尊重平台特性）

M

mobile-first-design-rules

oimiragieo / agent-studio

聚焦使用 tailwind 进行移动优先设计和响应式排版的规则与最佳实践。

O

oma-mobile

first-fluke / oh-my-agent

实现 Flutter、React Native 或原生 Swift 应用。用于

P

pencilplaybook

stevembarclay / pencilplaybook

PencilPlaybook 是面向 Pencil.dev + Claude Code 的 UI Skills / Taste-Skill——一套设计手册，为 Claude 带来真正的知觉心理学与资深级护栏，使其不再产出千篇一律的 AI 垃圾。

P

phase

vercel-labs / phase

在优化、审计或准备交付 Web 动画或渲染性能工作时使用：帧循环、滚动/视口显现、挂载/卸载过渡、canvas/WebGL 生命周期、减少动态效果、懒渲染以及延迟的非屏内工作。适用于卡顿、逐帧分配、强制重排、渲染循环、离开屏幕后不暂停的动画、content-visibility、requestIdleCallback、分析 Chrome DevTools 性能追踪以排查动画或渲染问题，或在浏览器驱动的 CSS/WAAPI、极简 JS、phase 与 Motion/GSAP 之间做选择。当用户明确询问 phase API 或行为时使用。不要用于探索性动画构思、原型制作、视觉迭代或尝试变体，即使代码已经引入了 phase；应等到用户要求性能指导、审计、生产环境实现、可交付性审查，或询问 phase 本身时再使用。

P

picture-it

geongeorge / picture-it

使用 picture-it 从命令行生成和编辑图像。只要用户要求创建、编辑或处理图像——博客头图、社交卡片、主视觉图、产品对比图、YouTube 缩略图、电影海报、杂志封面、Instagram 编辑、抠背景或任何视觉内容——就使用此技能。当用户提到 picture-it 名称、想要合成图像、应用调色、向图像添加文字、移除或替换背景、裁剪/调整照片尺寸，或需要从终端进行任何图像生成或照片编辑时也触发。此技能涵盖将可组合操作串联起来的多轮 AI 图像编辑工作流。

P

product-design

lobehub / lobehub

适用于新界面、改版和模糊的产品需求：确立用户任务与业务意义。已建成界面的审计和视觉打磨另有专门技能。

P

prototype-html

vagerent / prototype-html

生成交互式 HTML 产品原型的专家技能。当用户需要创建产品原型、UI 界面原型、可交互的 HTML 演示页面、产品功能展示页面，或提到"原型"、"prototype"、"产品界面"、"UI 原型"、"交互原型"、"演示页面"等时使用。

R

react-spectrum-s2

zzci / skills

使用 React Spectrum S2（Spectrum 2）——Adobe 面向 React 的组件库——构建 UI。当开发者使用 `@react-spectrum/s2` 或需要 Adobe 设计系统组件时使用。包含 React Aria Components 文档，作为在无样式基础组件之上构建自定义组件的参考。

S

scientific-figures

jr2804 / prompts

创建、美化、导出并校验达到出版质量的科学与技术图表。xy 是首选默认工具（兼容 matplotlib.pyplot，便于迁移）；也支持 matplotlib/seaborn/plotly。当用户要求 "publication figure"、"paper figure"、"journal-ready plot"、"scientific visualization"、"SVG/PDF/TIFF export"、"colorblind-safe palette"、"multi-panel layout"、"error bars / significance markers"，或需要处理导入 matplotlib、seaborn、plotly 或 xy 的绘图脚本时使用。

S

scientific-visualization

kalarislabs / research-agent-skills

使用 Matplotlib、Seaborn 或 Plotly 创建并审查真实、易访问、可供发表的科学图表。适用于图表设计、多面板布局、不确定性和缺失数据展示、颜色与对比度审查、图像元数据验证以及期刊导出规划

S

shadcn

midudev / autoskills

管理 shadcn 组件和项目，支持添加、搜索、修复、调试、设置样式和组合 UI（包括聊天界面）。提供项目上下文、组件文档和用法示例。适用于使用 shadcn/ui、组件注册表、预设、--preset 代码或任何包含 components.json 文件的项目。也适用于执行“shadcn init”“create an app with --preset”“switch to --preset”，以及构建设计系统或将 DESIGN.md 或品牌规范应用于 shadcn/ui。

S

spectrum-audit

zzci / skills

审计代码库是否遵循 Spectrum 设计系统和 React Spectrum S2 最佳实践。当开发者要求审计、审查、lint 或检查项目的 Spectrum/S2 正确性、配置、样式、无障碍性或组件使用问题时使用

S

stitch-setup

gabelul / stitch-kit

stitch-kit 插件与 Stitch MCP 服务的分步安装器。首次设置该插件、诊断连接问题，或帮助新用户在 Claude Code 或 Codex 命令行中跑起 Stitch 时使用。

S

style-extractor

lucent-snow / style-extractor

从网站或 Web 应用中提取基于实证的样式指南与动效附录。当 Codex 需要可复用的视觉语言、语义 token、组件/状态规则、运行时动画证据，或在剥离产品特定结构与内容的同时保留设计信号的样式参考时使用。

S

superior-ui-audit

kodekateam / superior-skills

对现有产品界面进行只读审计，根据主导设计证据和运行时路径验证 UI 发现，并准备可直接实施的建议或计划。适用于评审和设计系统偏差分析；用户要求直接实施修复时不要使用。

S

svg-visuals

data-goblin / power-bi-agentic-development

通过 DAX 度量值和扩展度量值生成 SVG，并使用 ImageUrl 数据类别在 PBIR 报表中内联可视化，包含适用于矩阵和表格单元格、新卡片图像以及新按钮切片器上按按钮图像的现成模板。当用户提到 "SVG visual"、"DAX sparkline"、"SVG measure"、"inline graphics with DAX"、"ImageUrl data category"、"extension measure"，或要求创建任何 DAX 生成的图表（进度条、子弹图、KPI 指标、数据条、仪表、圆环图、棒棒糖图、哑铃图、状态胶囊、重叠条形图、箱线图、IBCS 条形图、抖动图、箱须图）时自动调用。