Skills

M

migrate-oxygen-to-bricks

respira-press / agent-skills-wordpress

当用户说“migrate oxygen to bricks”、“convert oxygen to bricks”或“replace oxygen with bricks”时使用。将 Oxygen Builder 组件树映射到 Bricks JSON 元素,并创建草稿副本以供审阅。

M

migrate-wpbakery-to-bricks

respira-press / agent-skills-wordpress

当用户说“migrate wpbakery to bricks”、“convert visual composer to bricks”,或希望将 WPBakery 网站现代化到 Bricks 时使用。解析 WPBakery 短代码,将元素映射到对应的 Bricks 等价物,并创建草稿副本以供审阅。

M

mobile-design

pixel-process-ug / superkit-agents

当用户需要 React Native、Flutter 或 SwiftUI 的移动应用设计与开发模式时使用——包括平台 HIG 合规、手势和离线优先架构。触发词：用户说 "mobile"、"iOS"、"Android"、"React Native"、"Flutter"、"SwiftUI"、"app design"、"mobile navigation"、"touch targets"、"offline-first"。

M

mobile-experience-report

respira-press / agent-skills-wordpress

当用户说“my site looks bad on mobile”、“check mobile layout”、“responsive audit”或“site broken on phones”时使用。逐个设备诊断断点问题、文本尺寸、列堆叠失败、隐藏元素和导航菜单行为。

O

orbit-general

nexu-io / open-design

Open Orbit 简报技能 —— 当用户连接了两个或更多连接器时，由 Orbit 流水线选用。从每个已认证连接器（GitHub、Linear、Notion、Slack、飞书、Calendar、Gmail、Drive、Sentry、Vercel……）提取过去 24 小时的活动，并在"我的设计"顶部渲染一个自适应的 bento 网格仪表板。每个连接器模块根据其返回的数据形态选择自己的 UI 形式（列表、头像堆叠、状态环、热力图、文件网格、告警卡片……），因此随着 Orbit 连接器生态的扩展，布局也能随之扩展。此技能不应手动触发 —— 它由 Orbit 的每日摘要调度器针对用户的实时连接器数据调用。

O

orbit-gmail

nexu-io / open-design

Open Orbit 简报技能 —— 当 Gmail 是用户唯一连接的连接器，或用户明确将每日摘要限定为 Gmail 时，由 Orbit 流水线选用。从用户已认证的 Gmail 连接中提取过去 24 小时的收件箱活动（待回复、提及、抄送、自动分类的批量邮件），并将摘要渲染为在 Gmail 阅读视图中打开的 Orbit Daily Digest 邮件。此技能不应手动触发 —— 它由 Orbit 的每日摘要调度器针对实时 Gmail 数据调用。

P

parallax-landing-page

hoodini / ai-agents-skills

用一段短视频构建滚动驱动的电影感落地页。用户提供一段 5–15 秒的视频（通常由 AI 生成）；此技能以 HD JPEG 质量抽取每一帧，然后生成一个单主视觉 HTML 页面：用户的滚动手势在原地擦动帧（页面本身从不滚动），并有 5 段戏剧性文字叠层交叉淡入淡出 —— Google Anton 标题、Caveat 手写点缀、锁定正文、虚拟滚动。当用户想要 "turn this video into a landing page"、"make a scroll-scrub landing page"、"build a parallax hero from this clip"、"add a new landing page to the parasites showcase"、"do the same as github/lion/hope for this new video"，或任何将短视频与戏剧性滚动触发叙事配对的变体时，使用此技能。即使用户只说 "use my video for a landing page" 也要触发 —— 那正是此技能。

P

practical-typography

ckorhonen / claude-skills

基于 Matthew Butterick 的 Practical Typography 的专业排版指导。适用于评估、评审或改进文档格式、文本布局、字体选择、标点、间距，以及针对印刷或 Web 内容的任何排版相关决策。

P

principle-experience-first

mariusflorescu / pstack-t3

涉及产品、UX 或功能范围的权衡时应用。优先考虑用户满意度，而非实现便利；宁可推出更少但打磨完善的功能，也不要推出更多粗糙功能。

P

promotion-doc-designer

huyansheng3 / ppt-skills

遵循企业演示标准的专业晋升/述职文档设计器。创建简洁、极简的 PPT/PDF 文档，采用 16:9 布局、策略性用色（主品牌橙色 #fc5a1f、辅助蓝色 #3669cd）以及精致的留白设计。当用户要求 "create promotion doc"、"design review presentation"、"make professional PPT"、"晋升文档设计"、"述职报告"，或需要具有视觉层级和数据可视化的企业标准演示文稿时使用。

R

react-ui-patterns

chriswiles / claude-code-showcase

适用于加载状态、错误处理和数据获取的现代 React UI 模式。构建 UI 组件、处理异步数据或管理 UI 状态时使用。

创建精致专业的 reveal.js 演示文稿。当用户要求制作幻灯片、演示文稿、演示稿或幻灯片集时使用。支持主题、多栏布局、代码高亮、动画、演讲者备注和自定义样式。生成 HTML + CSS，无需构建步骤。

S

seo-sxo

infrasity-labs / dev-gtm-claude-skills

搜索体验优化：逆向解读 Google SERP，检测页面类型不匹配，从搜索意图信号中推导用户故事，并从多个用户画像视角为页面评分。通过分析 Google 对每个关键词的偏好，找出优化良好的页面为何无法排名。在用户说 "SXO"、"search experience"、"page type mismatch"、"SERP analysis"、"user story"、"persona scoring"、"why isn't my page ranking"、"intent mismatch" 或 "wireframe" 时使用。

S

site-architecture

borghei / claude-skills

网站的信息架构、URL 层级、内链策略、导航设计与栏目结构。涵盖架构审计、新站规划、抓取权重优化与主题集群映射。

S

storefront-theming

finsilabs / awesome-ecommerce-skills

使用设计令牌和 CSS 自定义属性构建可主题化的店面，支持白标、多品牌变体和深色模式

S

syncfusion-winforms-button

syncfusion / winforms-ui-components-skills

指导开发者在桌面应用中实现并自定义 Syncfusion Windows Forms SfButton 控件。在 Windows Forms 应用中创建带文本、图像、样式和主题的交互式按钮时使用。涵盖实现、自定义和交互处理。

T

theme-factory

404kidwiz / claude-supercode-skills

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

U

ui-styling

infrasity-labs / dev-gtm-claude-skills

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 实用优先样式和基于 canvas 的视觉设计，创建美观且易于访问的用户界面。适用于构建用户界面、实现设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现深色模式、生成视觉设计和海报，或在多个应用中建立一致的样式规范。

W

web-design-guidelines

infrasity-labs / dev-gtm-claude-skills

检查 UI 代码是否符合 Web 界面指南。当被要求「审查我的 UI」、「检查可访问性」、「审计设计」、「审查用户体验」或「根据最佳实践检查我的网站」时使用。

W

webconsulting-branding

dirnbauer / webconsulting-skills

应用当前的 webconsulting.at 设计系统：无边框方形表面、Hanken Grotesk 字体、teal/ink 色彩标记、以发票为先导的信息层级、仅头部品牌提示、logo 优先的项目图标、MDX 模式、深色模式、无障碍以及 shadcn/ui 集成。适用于构建或审查 webconsulting.at 页面、内部工具、tracker/GitLab 主题、项目目录、TYPO3 模板、品牌资源或视觉一致性。

W

wpf

managedcode / dotnet-skills

在 .NET 上构建和现代化 WPF 应用，涵盖正确的 XAML、数据绑定、命令、线程、样式，以及 Windows 桌面迁移决策。适用场景：处理 WPF UI、MVVM、绑定、命令或桌面现代化；将 WPF 从 .NET Framework 迁移到 .NET；向 WPF 应用集成较新的 Windows 能力。不适用：无关的技术栈；不需要此专门指引的通用任务。调用行为：查看仓库上下文、编辑目标文件，并在做出变更时运行相关的构建、测试、lint 或校验命令。

A

accessibility-testing

naodeng / awesome-qa-skills

需要针对 WCAG、键盘导航和辅助技术场景设计无障碍测试时使用此技能；触发词包括 可访问性测试 和 accessibility testing。

A

android-kotlin-compose

drjacky / claude-android-ninja

按照 Google 官方 Android 架构指南，使用 Kotlin、Jetpack Compose、MVVM 架构、Hilt 依赖注入、Room 数据库和多模块架构创建生产级 Android 应用。当请求创建 Android 项目、模块、界面、ViewModel、仓库，或询问 Android 架构模式与最佳实践时触发。

A

ant-design-mobile

partme-ai / full-stack-skills

使用 Ant Design Mobile（antd-mobile）组件构建 React 移动端 UI，包括 Button、Form、List、Modal、Picker、Tabs、PullToRefresh、InfiniteScroll 以及 50 多个移动端优化组件。适用于用户需要用 Ant Design Mobile 创建移动优先的 React 界面、实现移动端导航、表单或数据展示时。

B

b24-ui-nuxt

bitrix24 / b24ui

使用 @bitrix24/b24ui-nuxt v2 构建 UI——130+ 个可访问的 Vue 组件，支持 Tailwind CSS 主题。在为 Bitrix24 应用创建界面、构建表单或编排布局时使用。

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

C

card-theater

unclecheng-li / ai_animation

生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML 页面。支持滚动翻页、Coverflow 3D、Focus 展开等多种交互模式，内置模式切换（如传输/隧道）、荧光笔高亮、水印图标等效果。适合协议流程演示、产品特性展示、分步讲解场景。

D

dashboard-design

mckinsey / vizro

当用户想要设计或规划仪表板（尤其是 Vizro 仪表板）时，先使用本 skill。它在实现前强制 3 步工作流（需求、布局、可视化）。当用户要求创建、设计或规划仪表板时激活。实现时，请在完成第 1-3 步后使用 dashboard-build skill。

D

dashboard

starchild-ai-agent / official-skills

使用图表和实时数据更新构建实时 HTML、CSS 和 JS 仪表盘。适用于组装多面板监控视图（例如投资组合仪表盘、价格跟踪器、系统健康面板、多资产对比）。

D

data-dashboard

plugin87 / ux-ui-agent-skills

构建信息密集的数据界面，例如分析控制台或交易终端，并使用 tokens 绘制真实图表：蜡烛图、成交量、深度图、堆叠面积图、瀑布图、散点图、相关矩阵、环形图、仪表盘、迷你图、热力图和订单簿。适用于仪表盘、终端、监控视图、数据控制台，或任何需要同时展示大量数字的界面。涵盖布局顺序、SVG 几何结构、各类图表的无障碍要求，以及仅在深色模式下出现的对比度问题。

F

flow

simota / agent-skills

实现用于悬停效果、加载状态、模态框过渡和手势交互的 CSS/JS 动画。用于有意义的动效、交互反馈或性能安全的动画。

F

frontend-a11y

mikemai2awesome / agent-skills

编写精简、无障碍的 Web UI，避免过度设计，并适配项目所用的任何技术栈 —— React、Vue、Svelte、Angular、Web Components 或纯 HTML。凡是编写或审查标记与组件、构建表单、添加按钮、对话框、折叠面板或标签页等交互元素，或审查代码无障碍性的项目和任务，都应使用本技能 —— 即使用户从未提及无障碍，也即使在某个框架、CMS 或设计系统之内。无论项目类型、技术栈或截止期限如何，这都不可妥协。正要使用 ARIA 属性、对话框库、焦点陷阱包或无头 UI 组件？请先使用本技能。

G

gentleman-bubbletea

gentleman-programming / engram

Gentleman.Dots 安装程序的 Bubbletea TUI 模式。触发条件：编辑 installer/internal/tui/ 中的 Go 文件、处理 TUI 界面或添加新 UI 功能时。

G

gsap

jbmanllr / agent-skills

在实现网页动画、时间线编排、滚动触发动画、SVG 动画、布局过渡，或使用 GSAP、ScrollTrigger、ScrollSmoother、SplitText、Flip、DrawSVG、MorphSVG、MotionPath 或 @gsap/react 的 useGSAP hook 时使用。

暂无简介

M

material-design-3-guide

shelbeely / shelbeely-agent-skills

Material Design 3 的权威指南——涵盖从 Material You 基础到 M3 Expressive 的完整规范。说明每个 Material Design 3 skill 子集（颜色、动效、排版、形状、布局、组件、图标）的适用场景。在启动 Material Design 3 项目、需要了解该应用哪个 M3 skill，或用户笼统地询问 Material Design 3 时使用。

M

media

danielmiessler / lifeos

视觉与视频内容创作。AI 图像、技术图表、mermaid 流程图、信息图、漫画和特效。使用时机：美术、图表、mermaid、流程图、信息图、视频、动画、缩略图、可视化、生成图像、技术图表。

M

mph-synthwave-theme

mphinance / alpha-skills

使用 Michael 标志性的 Synthwave / TraderDaddy / Bloomberg 美学生成 UI 组件、仪表盘与页面。

N

nsfc-roadmap

huangwb8 / chineseresearchlatex

当用户明确要求"生成 NSFC 技术路线图/技术路线图绘制/roadmap/flowchart"或需要把标书研究内容转成"可打印、A4 可读"的技术路线图时使用。默认输出可编辑源文件（`.drawio`）与可嵌入文档的渲染结果（`.svg`/`.png`/`.pdf`）；当用户主动提及 Nano Banana 图片模型时，可切换为 PNG-only 模式，并兼容 Gemini 与 OpenAI `gpt-image-2`。不适用：用户只是想修改某张已有图片的格式/尺寸（应使用图片处理技能）、只是想润色技术路线文字描述（应直接改写正文）。

O

orbit-linear

nexu-io / open-design

Open Orbit briefing 技能——当 Linear 是用户唯一已连接的连接器时，或当用户明确将每日摘要范围限定为 Linear 时，由 Orbit 流水线选用。从用户已认证的 Linear 连接中拉取过去 24 小时的 issue 动态、状态变更、指派与周期进展，并以 Linear 原生的 Inbox + 周期进展视觉语言渲染摘要。此技能不应手动触发——它由 Orbit 的每日摘要调度器针对实时的 Linear 数据调用。

O

orbit-notion

nexu-io / open-design

Open Orbit briefing 技能——当 Notion 是用户唯一已连接的连接器时，或当用户明确将每日摘要范围限定为 Notion 时，由 Orbit 流水线选用。从用户已认证的 Notion 连接中拉取过去 24 小时的文档编辑、评论、提及与数据库行变更，并将摘要渲染为原生 Notion 页面（callout / toggle / database table 组件）。此技能不应手动触发——它由 Orbit 的每日摘要调度器针对实时的 Notion 数据调用。

P

panda-css

chakra-ui / panda

在使用 Panda CSS 的项目中编写和编辑样式。当创建、修改或审查调用 css()、cva()、sva()、patterns、recipes、tokens、conditions 或 JSX style props 的代码，当某个样式渲染出了类名但没有 CSS，或当样式完全未生效时使用。涵盖 Panda v2（2.x）和 v1（1.x）。不要用于设计主题或判断何时应将某项内容改为 recipe 或 slot recipe（请使用 panda-css-theming），也不要用于将 v1 升级到 v2（请使用 panda-css-migrate）。

Q

qe-visual-accessibility

proffesor-for-testing / agentic-qe

跨视口捕获并比较截图，运行 axe-core 无障碍扫描，并通过像素差异分析检测视觉回归。在检测 UI 回归、验证响应式布局、测试 WCAG 合规或确保 CSS 或组件变更后的视觉一致性时使用。

R

recharts-patterns

yonatangross / orchestkit

使用 Recharts 3.x 进行数据可视化，包括响应式图表、自定义工具提示、动画以及 React 应用的无障碍支持。在用 Recharts 构建图表或仪表盘时使用。

R

responsive-design

flitzrrr / frontend-design-skills

移动优先策略、断点、流式布局、内容编排，以及使用 CSS Grid、Flexbox 和现代响应式技术进行的跨设备优化。

S

signup-flow-cro

syntax-syndicate / marketing-skills

当用户想优化注册、登记、创建账户或试用激活流程时使用。用户提到“注册转化”“注册阻力”“注册表单优化”“免费试用注册”“减少注册流失”“账户创建流程”“没人注册”“注册放弃”“试用转化率”“没人完成登记”“注册步骤太多”或“简化注册”时也使用。只要用户的注册流程表现不佳，就使用此技能。注册后的引导请参阅 onboarding-cro；潜在客户信息收集表单（非账户创建）请参阅 form-cro。

S

spatial-rhythm

dragoon0x / taste-skills

密度、留白、节奏，以及空间如何传达元素之间的关系。适用于构建布局、评估间距一致性，或诊断设计为何显得局促或空洞时。

S

stl-generator

ihistand / claude-skills

使用 build123d（Python CAD）为木工夹具与治具、以及依据实测原件建模的替换零件生成可 3D 打印的 STL 文件。当用户想要切圆划线规或灯罩环夹具、角度楔块、间距或定位块、钻孔导向器、铣削模板、对位或组装夹具、替换的螺纹灯球或灯罩，或任何依据测量复制出的自定义 3D 打印夹具或零件时使用。附带现成脚本，以及一项打印就绪检查，会拒绝可能打印失败的 STL，并标记需要支撑的悬垂。默认构建体积为 Elegoo Neptune 4 Pro（可用 220 x 220 x 260 mm），可按打印机覆盖。使用公制单位。

适用于为 Storybook 故事配置交互式控件和 args 时。帮助以恰当的类型约束创建动态、可探索的组件演示。

S

storybook

fandhe-ai / agent-reference-skills

Storybook（UI 组件目录与测试工具）参考。story、CSF（Component Story Format）、args、argTypes、decorators、play function、interaction tests、autodocs、main.ts / preview.ts 配置、插件（a11y、controls、viewport、themes）。

S

svelte-styling

spences10 / skills

Svelte CSS 样式写法。用于作用域样式、CSS 自定义属性、style: 指令、:global，或为子组件设置样式。

S

system-deconstruction

dragoon0x / taste-skills

将设计系统拆解为构成它的各个决策，并逐一评估。适用于审计设计系统、评估一致性，或了解产品如何在规模化的同时保持质量。

T

tables

mwguerra / claude-code-plugins

创建带有列、筛选、排序、搜索与批量操作的 FilamentPHP v4 表格

U

ux-css-layout

microsoft / vscode

VS Code 的 CSS 约定、文件组织、类命名、标准尺寸、SplitView/Grid 布局、可滚动内容、响应式布局，以及文本溢出/省略号模式。适用于编写 CSS、构建布局或修复文本截断问题。

U

ux-flow-auditor

heyeddi-com / heyeddi-skills

使用 Playwright 追踪用户任务流：点击深度、步骤成功率、摩擦点，并将报告写入 .heyeddi/docs/ux-flows/。在衡量易用性、完成任务所需点击数或上手摩擦时使用。不适用于静态视觉评审（使用 heyeddi-design critique）或布局截图（使用 visual-auditor）。

U

ux-theming

microsoft / vscode

VS Code 主题、颜色令牌、小组件样式、焦点指示器以及高对比度主题支持。在注册颜色、用主题令牌为小组件设置样式，或确保 HC/焦点合规时使用。

W

web-artifacts-builder

snyk / agent-scan

用于在 claude.ai 中创建精细的多组件 HTML artifacts 的工具套件，采用现代前端 web 技术（React、Tailwind CSS、shadcn/ui）。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts，不适用于简单的单文件 HTML/JSX artifacts。

W

web-design-guidelines

andrelandgraf / fullstackrecipes

检查 UI 代码是否符合 Web 界面指南。当被要求「审查我的 UI」、「检查可访问性」、「审计设计」、「审查用户体验」或「根据最佳实践检查我的网站」时使用。

W

web-design-guidelines

itallstartedwithaidea / agent-skills

Web Design Guidelines 编码了 100+ 条规则，涵盖无障碍、焦点状态、表单、动画、排版、图片、性能、导航、深色模式、触摸目标和国际化。

W

web-performance-seo

zhanlincui / agent-skills-hunter

修复由对比度审计失败（CSS 滤镜、OKLCH/OKLAB、低不透明度、渐变文字、图片背景）导致的 PageSpeed Insights/Lighthouse 无障碍 "!" 错误。用于无障碍驱动的 SEO/性能调试与修复。