Skills

I

ios-accessibility

dadederk / ios-accessibility-agent-skill

提供 iOS 无障碍最佳实践、模式和实现方面的专家指导。开发者提及以下内容时使用：(1) iOS 无障碍、VoiceOver、Dynamic Type 或辅助技术；(2) 无障碍标签、特征、提示或值；(3) 自动化无障碍测试、审计或手动测试；(4) Switch Control、Voice Control 或 Full Keyboard Access；(5) 包容性设计或无障碍文化；(6) 让应用适用于残障用户。

M

modular-scale-typography

dembrandt / dembrandt-skills

基于比例的字阶体系，每个字号都与其他字号相关联。适用于定义字体大小或文字样式令牌，或当排版显得随意无章时。

A

algorithmic-color-palette

dembrandt / dembrandt-skills

从一到两个品牌色推导出完整的 UI 色板——包含状态变体、品牌色调灰阶和语义色。适用于构建或扩展色彩系统。

I

inspector-workbench

copilotkit / copilotkit

在独立的 Threads 状态实验室中运行 Inspector UI 工作，让 Agent 能看到覆盖层。当 CopilotKit 员工要求 Agent 修复、打磨、新增或调试 Inspector UI、外框、面板、覆盖层操作、启动器、Home、Threads、Playground、Memory，或 @copilotkit/web-inspector 中的任何视觉行为时使用。不要用于仅更新文档的 Callout（请加载 inspector-docs）、不含 Inspector UI 的运行时或核心变更、展示单元工作，或作为应用内部的使用者读取 Inspector。

D

design-systems

mindrally / skills

全面的设计系统指南，用于构建一致、易访问且可扩展的组件库。用于创建设计令牌、构建组件库、实施设计系统、搭建主题架构或建立 UI 治理流程。

H

hig

prisma-labs-dev / apple-skills

事实查询：Apple Human Interface Guidelines 语料库（可 grep 的 markdown）。可按需查询无障碍与人体工学最低要求（点击目标尺寸、Dynamic Type）、平台术语、系统组件功能，以及与 App 审核相关的规范。并非设计指导。

W

web-design-guidelines

asyrafhussin / agent-skills

UI/UX 最佳实践与无障碍审查。适用于审查 UI 代码、检查无障碍、运行无障碍审计、审查表单或确保 Web 界面最佳实践。触发条件包括“审计无障碍”“检查 WCAG”“审查 UI”“检查 accessibility”“审计设计”“审查 UX”或“检查最佳实践”。

U

user-flows-and-guided-paths

dembrandt / dembrandt-skills

引导式多步骤路径和向导。适用于设计新用户引导、结账、设置流程或任何多步骤旅程。

A

agent-sessions-layout

microsoft / vscode

Agents 工作台布局——涵盖固定布局结构、网格配置、部件可见性、编辑器模态框、标题栏、侧边栏页脚和实现要求。实现功能或修复 Agents 工作台布局问题时使用。

V

visual-verdict

yeachan-heo / oh-my-claudecode

针对截图与参考图对比的结构化视觉 QA 结论

M

Mobile App Design Standards

awesome-skills / mobile-app-design

当用户要求「设计移动 UI」「评审应用设计」「检查 UI 规范」「改进应用 UX」「设计 React Native 界面」「创建设计应用界面」「遵循设计规范」，或提到 iOS/Android 设计模式、无障碍设计或移动用户体验时，使用此技能。提供全面的移动应用 UI/UX 设计指导。

S

shopify-theme-development-guidelines

mindrally / skills

使用 Liquid 和 Online Store 2.0 进行 Shopify 主题开发的专业指导，并涵盖性能最佳实践

C

colorize

educlopez / ui-craft

配色策略梳理——在 3-5 处有意图的位置引入单一强调色，或把过度上色的 UI 还原为 90% 中性色。当 UI 没有色彩识别度、默认使用蓝色，或因过多相互竞争的强调色而显得喧闹时使用。当用户要求对其 UI 进行 colorize，或在设计 / UI / 前端工作中提到 "colorize" 时调用。

U

ui-ux

evondev / evondevkit

app 的 UI/UX 风格指南 — 仪表盘、列表、表格、表单、设置、模态框、滚轮选择页。默认像设计师一样工作：先给 brief，再给 2–3 个线框图，用户选定后才动手构建。当需求说得明确时走别的路径：审视现有界面（"帮我看看"、"review"）、把新版本与原版对比（"有什么更好的"）、在保留品牌的前提下重建（"保留品牌"、"keep the brand"）、或按 skill 的品味来（"去掉旧样式"）、保持外观不变的重构、直接开做（"直接做"、"just build it"）、先做设计系统（"UI kit"、"component library"）、简单 logo、修某一个组件。默认扁平；也能做 glass、渐变、浮起、深色背景。落地页、网店、博客尚未教学 — 仍可构建，但会先说明。适用于构建、重做、修改 app 界面，查看 app 截图或链接，或出现"把 UI 做好看"、"搭个页面"、"设计"、"重做 UX"、"看着乱"、"build a page"、"design this screen"、"redesign"、"make it look good"、"ecommerce"、"ui-ux"、"evon" 时。

G

gestalt-ui-organisation

dembrandt / dembrandt-skills

用 Gestalt 原则对控件分组，让用户看出哪些内容属于一起。在布局组件、导航、工具栏、表单或仪表盘时使用。

R

responsive-paradigms

dembrandt / dembrandt-skills

手机、平板和桌面是不同的范式，而不是同一布局的缩放。适用于设计响应式布局或决定每个断点展示什么内容。

D

daisyui

bobmatnyc / claude-mpm-skills

Tailwind CSS 组件库，为 50 多种组件提供语义化类名，并内置主题、深色模式和自定义功能，助力快速 UI 开发

V

visual-emphasis-and-hierarchy

dembrandt / dembrandt-skills

用尺寸、颜色、字重和位置来标明什么最重要。适用于设计按钮组、CTA、卡片、仪表盘，或任何包含主要操作的布局。

P

presentation-creator

mblode / agent-skills

构建带有故事主线、统一视觉体系、按场景调整的信息密度和演讲者备注的幻灯片。当被要求“创建演示文稿”“撰写融资路演幻灯片”或“把这份文档转成幻灯片”时使用。默认使用 Marp；如需可编辑的 PowerPoint，请使用现有的演示文稿工具。

W

wcag-accessibility

dembrandt / dembrandt-skills

符合欧洲无障碍法案要求的 WCAG 2.2 AA 标准。在设计、开发或审查任何面向用户的界面以确保无障碍时使用。

B

button-states

dembrandt / dembrandt-skills

静止、悬停、按下、聚焦、禁用和加载状态，基于基准色派生。适用于设计按钮、链接、输入框或任何可点击组件。

C

component-family-consistency

dembrandt / dembrandt-skills

按钮、输入框、徽章和标签共享统一的圆角、颜色逻辑、阴影、边框和间距。适用于构建或评审组件库时。

H

heuristic

educlopez / ui-craft

依据 Nielsen 的 10 + 6 设计法则以及可选的角色走查，对 UI 产出带评分的启发式评估。输出可机读解析的评分卡以及 0-100 的 UsabilityScore（与确定性的 UICraftScore 相对应的评判指标）。当用户要求对 UI 进行启发式评估，或在设计／UI／前端相关工作中提到 'heuristic' 时调用。

W

webflow-mcp:accessibility-audit

webflow / webflow-skills

对 Webflow 页面运行全面的无障碍审计（WCAG 2.1）——检查按钮、表单、链接、焦点状态、标题、键盘导航，并生成含修复建议的详细报告。完全以无头方式针对页面 ID 运行，无需连接 Designer。不包含图片替代文本（由 asset-audit 技能覆盖）。

L

loading-states-and-perceived-performance

dembrandt / dembrandt-skills

加载指示器、骨架屏和依次渐显效果，用于管理等待时间。适用于设计加载状态、异步数据，或营造缓慢界面的手感时。

M

micro-interactions

dembrandt / dembrandt-skills

小而有意图的动画 — 开关、动态图标、成功瞬间。适用于设计交互反馈、成功状态或加载指示器时。

G

generate-ui-from-brand

dembrandt / dembrandt-skills

从 URL 或 DESIGN.md 生成设计令牌、决策和 UI 规范的流水线。适用于为既有品牌构建 UI、审计设计系统或修复视觉不一致。

S

shadcn-vue

noartem / skills

面向 Vue/Nuxt 的 shadcn-vue，使用 Reka UI 组件和 Tailwind。适用于无障碍 UI、Auto Form、数据表格、图表、深色模式，或遇到组件导入及 Reka UI 错误时

W

web-design-guidelines

sickn33 / agentic-awesome-skills

检查文件是否符合 Web Interface Guidelines

P

pptx

davila7 / claude-code-templates

只要涉及 .pptx 文件的任何操作（输入、输出或两者皆有），都使用此技能。这包括：创建幻灯片、提案演示文稿或演示文稿；读取、解析或提取任何 .pptx 文件中的文本（即使提取的内容会用于邮件或摘要等其他用途）；编辑、修改或更新现有演示文稿；合并或拆分幻灯片文件；处理模板、版式、演讲者备注或评论。只要用户提到“deck”“slides”“presentation”或引用 .pptx 文件名，就触发此技能，无论之后打算如何处理内容。若需要打开、创建或操作 .pptx 文件，请使用此技能。

E

extract-design

dembrandt / dembrandt-skills

使用 Dembrandt 从线上网站提取颜色、字体排印、间距、组件和 W3C 设计令牌。当你需要某个站点的真实令牌，或想以此为基础构建设计系统时使用。

S

status-colors-and-errors

dembrandt / dembrandt-skills

少量语义化颜色，每种颜色只表达一个含义，以及带有明确处理方向的错误提示。用于设计状态指示器、校验、警告或错误状态。

E

elevation-and-depth

dembrandt / dembrandt-skills

通过阴影和层次让元素浮于表面之上。设计卡片、下拉菜单、模态框、工具提示或任何浮动元素时使用。

S

shape

educlopez / ui-craft

先做线框图的一步：在编写任何代码之前，输出 ASCII 布局图、状态列表、内容清单和问题列表。适用于从零开始新页面，或用户需求描述尚不明确时。当用户要求对其 UI 进行 shape，或在设计 / UI / 前端工作中提及 'shape' 时调用。

U

ui-design

frappe / skills

关于布局、打磨、视觉层级、间距、字体排印、配色和无障碍的通用 UI/UX 判断准则。当没有适用于特定产品或 Frappe 的设计系统技能时使用。

S

sticky-and-fixed-elements

dembrandt / dembrandt-skills

吸顶表头、底部工具栏、浮动操作按钮和固定表头。用于确定用户滚动时哪些内容保持在屏幕上。

D

data-display-and-selection

dembrandt / dembrandt-skills

视图模式、行选择、批量操作、排序、筛选、搜索和表格模式。用于设计数据表格、列表、文件浏览器或任何集合。

P

product-analysis

daymade / claude-code-skills

多路径并行的产品分析，支持跨模型测试时计算扩展。启动并行 Agent（Claude Code agent teams + Codex CLI）从多个角度探索产品，再将发现综合为可执行的优化方案。可调用 competitors-analysis 进行竞品对标。当出现 "product audit"、"self-review"、"发布前审查"、"产品分析"、"analyze our product"、"UX audit" 或 "信息架构审计" 时使用。

N

notifications-and-recovery

dembrandt / dembrandt-skills

提示条、行内错误、横幅和恢复路径。适用于设计错误状态、成功确认、异步反馈或原地编辑。

E

experience-accessibility-validate

forcedotcom / sf-skills

使用此技能判断 Lightning Web Component（LWC）是否可访问并符合 WCAG 无障碍指南。用户询问“is my component accessible?”“does my LWC meet accessibility guidelines?”“is this component WCAG compliant?”“find accessibility problems in this LWC”“is this LWC keyboard accessible?”“does this component work with a screen reader?”“does this component have sufficient color contrast?”“check ARIA usage in this LWC”或“WCAG 2.2 accessibility check”时触发。用户希望修复或改进 LWC 的 HTML、JS 或 CSS 中的无障碍性（a11y、WCAG、ARIA）时也触发，包括语义标记、焦点、键盘导航、对比度、屏幕阅读器标签、WCAG 2.2 SC。生成含 WCAG 引用发现项的 `a11y-review.md`。不要用于一般 LWC 生成（请使用 `experience-lwc-generate`）或不专注于无障碍的 SLDS 视觉／设计审查（请使用 `design-systems-slds-validate`）。

A

apple-ui-designer

heyman333 / atelier-ui

重新设计移动应用界面，使其 unmistakably 地呈现 Apple 风格、以 iOS 为导向且感觉原生。适用于构建 iOS 应用、遵循 Apple Human Interface Guidelines，或使用 SF Pro 字体、半透明效果和系统级组件打造原生感的移动界面。

R

remotion-3d-ticker

vibe-motion / skills

在 Remotion 中创建无限循环的 3D 纵向滚动走马灯动画。适用于构建视差图库、无限图片滚动、多列连续纵向滚动效果或 3D 照片墙（3D照片滚动墙 / 3D相册瀑布流）。

S

scroll-areas

dembrandt / dembrandt-skills

避免内部滚动容器；实在无法避免时，一次只允许一个轴。当页面内的布局、表格或面板可能滚动时使用。

F

frontend-accessibility-best-practices

sergiodxa / agent-skills

React 组件的无障碍（a11y）最佳实践。在创建 UI 组件、表单、交互元素或审查代码是否符合无障碍要求时使用。

T

tokens

educlopez / ui-craft

审查或建立项目的三层 token 体系。当用户要求为其 UI 设置 token，或在设计／UI／前端工作中提到 "tokens" 时调用。

U

ui-context-and-scope

dembrandt / dembrandt-skills

显示用户所在位置以及其操作会影响什么——面包屑导航、区域、范围标签。在设计深度导航或多区块布局时使用。

L

lab-hardware-cad

k-dense-ai / scientific-agent-skills

以参数化 build123d 模型设计定制实验室硬件，并导出 STEP、STL 和 DXF 格式的制造产物——微流控芯片与模具、光机安装件与面包板适配器、比色皿与微孔板支架、试管架、动物行为实验装置以及 3D 打印的仪器夹具。适用于研究任务需要与标准实验耗材、光学平台、笼位系统或 3D 打印机、CNC、激光加工工艺配合的物理部件时。

F

finalize

educlopez / ui-craft

发布前关卡——运行 detector，核对 brief 和 tokens，应用 10 项 pass 的完成标准，并按反馈层级对发现的问题排序。当用户希望发布、合并或定稿某个界面，并需要在提交前得到结论（READY / NOT READY / BLOCKED）时使用。当用户要求对其 UI 执行 finalize，或在设计／UI／前端工作中提到「finalize」时调用。

B

brief

educlopez / ui-craft

在 .ui-craft/brief.md 编写或更新项目的持久化设计纲要。当用户要求为其 UI 编写纲要，或在设计 / UI / 前端工作时提到 'brief' 时调用。

C

code-connect-components

figma / mcp-server-guide

使用 Code Connect 将 Figma 设计组件连接到代码组件。当用户提到“code connect”“connect this component to code”“connect Figma to code”“map this component”“link component to code”“create code connect mapping”“add code connect”“connect design to code”，或希望建立 Figma 设计与代码实现之间的映射时使用。需要连接 Figma MCP 服务。

R

real-world-metaphors

dembrandt / dembrandt-skills

卡片、抽屉、轮播等借鉴自物理世界的模式。在设计布局模式、手势或导航范式时使用。

C

chat-motion-overlay

nexu-io / open-design

根据转录文本或截图生成可配置的聊行动态叠加层，包括纯气泡场景、应用风格聊天容器、可选设备边框、预设或上传的头像、昵称显示规则，以及支持透明视频的 Remotion 包。适用于 Codex 需要为 Douyin、演示视频、故事重演、社交消息举证场景制作可复用的短聊片段，或为 Hyperframe 和 Remotion 工作流生成可嵌入的 alpha 叠加层时。

L

light-spotlight-render

vibe-motion / skills

生成摆动聚光灯文字揭示的 HTML 动画，可配置文字、摆动角度、灯具缩放、发光效果和颜色。适用于用户要求 聚光灯扫字动画、spotlight text reveal、light logo reveal、发光文字揭示动画，或希望使用可复用的 HTML 动画而非静态图片时。

P

ppt-agent

sunbigfly / ppt-agent-skills

专业 PPT 演示文稿全流程 AI 生成助手。模拟顶级 PPT 设计公司的完整工作流（需求调研到资料搜集到大纲策划到策划稿到设计稿），输出高质量 HTML 格式演示文稿。当用户提到制作 PPT、做演示文稿、做 slides、做幻灯片、做汇报材料、做培训课件、做路演 deck、做产品介绍页面时触发此技能。即使用户只说“帮我做个关于 X 的介绍”或“我要给老板汇报 Y”，只要暗示需要结构化的多页演示内容，都应该触发。也适用于用户说“帮我把这篇文档做成 PPT”“把这个主题做成演示”等需要将内容转化为演示格式的场景。英文场景同样适用：“make a presentation about...”“create slides for...”“build a pitch deck”“I need a keynote for...”。隐式意图也应触发：“帮我把这个数据可视化一下给老板看”“我需要一份能拿去路演的东西”“把这个报告做得好看点能展示”“beautify my existing PPT”“redesign these slides”。改善或美化现有 PPT 也属于此技能范畴。

B

beui

starc007 / ui-components

通过公共 MCP 或 shadcn registry 挑选并安装 beUI（@beui）动画 React 组件。适用于构建动效 UI、Agent/聊天界面、toast、dock、底部弹窗、抽屉、气泡框、滑块、加载器、404 页面或任何 beui.dev 组件的场景。将用户意图映射到准确的 @beui 安装 slug，而不是自行创造自定义组件。

L

leanback-to-compose-tv-migration

android / skills

提供将 Android 迁移的说明与架构模式

G

global-toolbar-controls

dembrandt / dembrandt-skills

货币、语言、地区和单位选择器放在低调的页眉或页脚位置。适用于设计区域切换器或产品级偏好设置控件。

P

principle-exhaust-the-design-space

michael-denyer / pstack-claude

在遇到代码库中没有先例的新型 UI 交互或架构决策时应用。构建 2-3 个不同方案的原型，并排比较后再确定方案。

C

create-wot-ui-theme

wot-ui / open-wot

为 wot-ui 生成单文件主题 SCSS，并在用户明确要求接入时追加 App.vue 的 `@use`。当用户要做品牌主题、语义变量落地、单文件主题接入时使用。

S

ss-audit

bitjaru / styleseed

使用 Nielsen 启发式原则和现代移动端 UX 最佳实践审查界面中的 UX 问题