Skills

V

vibecoding-animated-websites

herdiansah / antigravity-skills-master

构建高端、带动画的网站，注重美学、语义化 HTML 和可访问性。当用户想要 "vibecode"、创建 "animated website"，或使用 "Noir Luxe" 风格工作流时使用。

V

vtake-cut

notedit / vtake-skills

把本地视频转变为元数据、转录文本，以及由 AI 编排的卡片式视频——由 Agent 在对话中自由设计并编写 HTML 卡片。当用户提到 VTake、vtake-cut、视频要点、转录文本整理或 AI 编排的视频再创作时使用。

V

vue-component-generator

jeremylongshore / tons-of-skills-marketplace

生成 vue component generator 操作。面向自动激活技能

以清晰的信息层级、直观的交互模式和无障碍优先的布局设计用户界面。适用于创建线框图、评估 UX 流程、审查视觉层级、设计响应式布局，或改进现有 Loom 界面的可用性。

W

web-visual-direction

divyanshu-iitian / agent-website-design-skills

为网站和 Web 应用定义独特且可实现的视觉方向。当 Agent 必须在大规模前端实现之前确立或修复艺术指导、排版、色彩、构图、图像、密度、动效或首屏印象时使用。

3

3d-web-experience

omer-metin / skills-for-antigravity

构建 Web 3D 体验的专家——Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 场景。涵盖产品配置器、3D 作品集、沉浸式网站，以及为 Web 体验增添纵深。当提到 "3D website, three.js, WebGL, react three fiber, 3D experience, spline, product configurator, " 时使用。

A

accessibility-audit

mohitagw15856 / pm-claude-skills

为任意 UI 或设计生成 WCAG 2.2 无障碍审计清单和整改建议。适用于被要求审计无障碍性、检查 WCAG 合规性、审查设计的 a11y 问题，或制定无障碍整改计划时。产出带优先级排序的清单，含通过/未通过评估和具体修复方案。

A

accessibility-audit

serkan-ozal / browser-devtools-skills

使用 ARIA 快照、AX 树分析和 WCAG 验证来审计 Web 无障碍性。当用户询问无障碍性、a11y、WCAG 合规性、屏幕阅读器兼容性、ARIA 角色或键盘导航时使用。

A

accessibility-compliance-accessibility-audit

rmyndharis / antigravity-skills

你是无障碍访问专家，专精于 WCAG 合规、包容性设计和辅助技术兼容性。开展审计、识别障碍并提供整改指导。

A

agent-ui-design

flitzrrr / frontend-design-skills

聊天界面、Agent UX、流式 UI 与工具可视化的设计模式。涵盖聊天架构、消息类型、流式渲染、工具执行卡片，以及源自 21st.dev Agents SDK 文档与模板的沙箱 UI。

A

ai-delivery-spec

franklinxkk / ai-delivery-spec

澄清、创建、审查或变更产品、服务与办公流程需求、PRD 和交互原型。适用于模糊目标、流程改进、电子表格/表单规则、小型 UI 改动以及对现有系统的变更，即使没有出现需求一词。中文：产品、服务及办公流程的需求判断、深挖澄清、PRD、原型、变更与验收；一句话想法、表单/表格规则和微小改动也适用。明确的纯翻译、排版、抄录或既定步骤执行由对应工具直接处理。

A

apple-design-tactics

s1gmamale1 / apple-design-skills

需要遵循 Apple 的无障碍/包容性设计标准（VoiceOver、Dynamic Type 重排、Reduce Motion/Transparency、对比度、44pt 触控目标、WCAG 2.2 AA），或运用其营销/说服/品牌策略（以留白传达奢华感、产品主角式摄影、自信且突出利益的文案语气、定价展示与锚定、每个章节围绕一个理念逐步揭示）时使用。属于 apple-design 系列。关键词：无障碍、a11y、VoiceOver、dynamic type、reduce motion、prefers-reduced-motion、reduce transparency、prefers-contrast、focus-visible、WCAG、包容性设计、路缘坡道、营销、品牌、文案写作、说服、留白、定价锚定、产品摄影、主视觉标题、逐步揭示节奏、keynote。

A

apple-uikit

fandhe-ai / agent-reference-skills

UIKit iOS/iPadOS UI 框架。UIViewController、UINavigationController、UITabBarController、UISplitViewController、UIView、UILabel、UIButton、UITextField、UIScrollView、UIStackView、UITableView、UICollectionView、diffable data source、NSDiffableDataSourceSnapshot、UICollectionViewCompositionalLayout、Auto Layout、NSLayoutConstraint、NSLayoutAnchor、UILayoutGuide、intrinsicContentSize。UIArrangementViewController、UISplitArrangement、UIOverlayArrangement、UIView.ReservedRegion、UIHingeInteraction、纵向条、iPhone Duo 自适应布局（iOS 27.1+）、迁移至基于 scene 的生命周期、UISceneAccessory。与 SwiftUI ArrangementView 是不同的 API。

A

autocad-drafting

puran-water / autocad-drafting

通过 autocad-mcp MCP 服务进行 AutoCAD 制图（8 个工具：drawing、entity、layer、block、annotation、pid、view、system）。在创建或修改 AutoCAD 图纸、场地平面图、P&ID 图、设备布局，或通过 autocad-mcp 工具进行任何 CAD 自动化时使用。涵盖 File IPC（实时 AutoCAD LT）和 ezdxf（无头 DXF）两种后端。对于避免常见陷阱至关重要：并行工具调用竞争、LISP 超时、对话框陷阱和批处理规模。每当调用 autocad-mcp 工具时都使用此技能。

A

awesome-accessibility-audit

khasky / awesome-agent-skills

只读式 WCAG 界面和标记审计，并为每项发现提供具体修复方案。用户要求检查无障碍性、a11y、键盘或屏幕阅读器支持，或对比度时使用。

A

awwwards-hero-section

yu-369 / vibecurb

用于构建 Awwwards/FWA 级 hero 区块的 hero 区块流水线。从参考图中提取设计方向，提供六种 hero 架构及实现蓝图，并践行让获奖 hero 区别于普通 AI 输出的基本功——视口级排版、单一焦点、极致留白、紧凑配色。仅限 hero。完整页面需与其他技能搭配。

生成文章封面图，涵盖 5 个维度（类型、配色、渲染、文字、氛围），结合 10 种配色方案与 7 种渲染风格。支持电影感（2.35:1）、宽屏（16:9）和方形（1:1）比例。当用户要求“生成封面图”、“创建文章封面”或“制作封面”时使用。

B

bootstrap-customize

sjnims / bootstrap-expert

当用户询问 "how do I customize Bootstrap"、"how to create a custom Bootstrap theme"、"what Sass variables can I override"、"how to implement dark mode in Bootstrap"、"how to change Bootstrap colors"、"how to override Bootstrap defaults"、"how to add custom colors to Bootstrap"、"how to enable Bootstrap shadows"、"how to compile Bootstrap Sass"、"how to use Bootstrap CSS variables"，或需要 Bootstrap 主题定制、Sass 变量覆盖、CSS 自定义属性或颜色模式实现方面的帮助时，应使用本技能。

B

brand-onboarding

stevenflanagan1 / social-ai-team

品牌入门设置技能。通过证据采集 + 预填客户文档 + 结构化需求收集，捕捉客户的视觉识别、内容模式、受众与目标。写入 context/brand-style.md，作为所有社交技能的基础。每位客户在使用 /social-creative-designer、/content-calendar 或 /caption-writer 之前运行一次。

B

building-react-quill-canvases

posthog / skills

编写 PostHog canvas 的 React + Quill 实现：单组件契约、允许的导入、Quill（PostHog 的设计系统）组件与组合规则、感知主题的设计令牌、加载骨架屏，以及 canvas 内的日期选择器。在 building-canvases 将 canvas 请求路由到 React 实现之后使用——包括仪表盘、数据看板、表单、工具，或任何应当看起来像 PostHog 原生功能的 canvas。

C

ck:ui-styling

binjuhor / shadcn-lar

使用 shadcn/ui 组件（Radix UI + Tailwind CSS）为 UI 添加样式。适用于无障碍组件、主题、深色模式、响应式布局、设计系统、颜色自定义。

C

component-recipes

dralgorhythm / claude-agentic-framework

Tailwind CSS 组件配方。在用一致的样式构建 UI 组件时使用。提供卡片、徽章、按钮、模态框、输入框等的可复制粘贴模式。

C

compose-ui

meet-miyani / compose-skill

为 Compose 和 CMP 编写和审查 composable：Route/Screen/leaf 拆分、状态读取位置与稳定性、加载/空/错误 UX 状态、LazyColumn 列表和网格、动画选择、无障碍和语义、设计系统令牌、CMP Res 资源、Coil 图片，以及键盘/焦点。处理 @Composable 代码、重组、稳定性、LazyColumn、动画、shimmer 或 skeleton、无障碍、主题、颜色、Res.string、Coil、焦点或键盘时使用。不要用于 MVI、错误分级或模块图（compose-architecture）、ViewModel 或数据工作（compose-feature、compose-data）、Gradle 或模块工作（compose-project），或 expect/actual 拆分（compose-platform）。

C

composer

singularlive / composer

在打开的 Singular Composer 会话中检查、捕获、创建和打磨图形，包括合成元素、控制节点、布局、时间轴动画和合成脚本。当 AI 需要控制 Composer、验证图形和运行时行为，或响应 generate improvement handoff 并给出关于用户修正的回顾反馈时使用；该回顾不需要配对的会话。

C

composing-grid-canvases

posthog / skills

组合 PostHog 网格 canvas——由可复用组件 canvas 构建的组件网格（包括用户主页 canvas）。适用于以下任务：在网格或主页 canvas 上添加、填充、移动、调整大小或移除组件；用一次请求组合出整个组件 canvas；构建可复用的组件/组件 canvas；或以某个放置 id 或网格 canvas id 为目标。涵盖组件库的搜索 → 配置 → fork → 构建阶梯、组件放置契约（size、configSchema）、放置生命周期（pending/generating/live/failed）、受保护的布局补丁循环，以及读取 canvas 的评论线程。

C

concept-design

abhinavbwj / skills-architects

体量生成、体量研究、空间组织策略、设计概念生成，以及从概念到形态的转化方法论

C

create-cad-files

caid-technologies / opencad

根据自然语言需求创建带尺寸标注的 3D CAD 零件，并使用 OpenCAD 导出经验证的 STEP、STP 或 STL 文件。当用户要求 AI Agent 对机械零件建模、制作可打印的 STL、创建可编辑的 STEP 文件、将尺寸描述转换为 CAD，或修改先前生成的 OpenCAD 模型时使用。

C

custom-angular-component-creator

datex / skills

通过 `dxs ng` 命令族在分支上创作或编辑 Datex Studio 自定义 Angular 组件（CAC，configurationTypeId=36）——一个由截图驱动的创建 → 编辑区域 → 预览 → 推送循环，用于定制的 Angular UI（图表、仪表盘、自定义 widget）。

D

deck-creator

b-open-io / gemskills

当用户要求 "create a deck"、"make a presentation"、"build slides"、"pitch deck"、"investor deck"、"sales presentation"、"design a deck"、"interactive presentation"、"presenter mode"、"HTML slides"、"video background deck"、"deck playground"、"visual deck editor"、"deck builder UI"、"publish deck link"，或需要以最小阻力生成一套完整演示文稿时，应使用本技能。涵盖少量提问式探索、提前启动 Deck Creator UI、主题选择、文案撰写、并行幻灯片生成、PDF 拼接、可选的 HTML 演示器以及发布工作流。

D

demo-design-tokens

dralgorhythm / claude-agentic-framework

演示应用的默认设计 token。在没有正式设计系统的情况下构建演示时使用。提供颜色、字体排版、间距、阴影和过渡。

D

design-handoff-brief

mohitagw15856 / pm-claude-skills

将功能简报转化为结构化设计简报，让设计师在打开 Figma 之前获得所需背景。当被要求撰写设计简报、创建设计交接文档、向设计师介绍新功能，或将 PRD 转化为设计需求时使用。产出包含用户目标、情感背景、成功标准、约束、边界情况与范围外边界的简报。

D

design-taste-frontend

nxpatterns / claude-taste-skill

高级 UI/UX 工程师。构建数字界面，覆盖 LLM 的默认偏见。坚持以指标为基础的规则、严格的组件架构、CSS 硬件加速，以及均衡的设计工程。

E

easy-wireframe

teo5777 / easy-wireframe

生成产品原型 / 页面流程线框图，移动端(App)与 PC(桌面 Web)两种形态。当用户想做产品原型、线框图、页面流程图、交互流程、App 原型、后台/管理系统原型、把多个页面平铺出来用箭头标注点击流转时使用。产出单文件 HTML：移动端用 iOS 标准尺寸(375×812)+Apple HIG 字号，PC 用桌面尺寸(1440×900)+更密的 Web 字号；同为极简黑白灰线框风格，内置标注系统与整页截图导出。

F

figma-design-qa

mohitagw15856 / pm-claude-skills

在 Figma 设计交付工程之前对其运行交付前 QA 清单。在被要求对 Figma 设计进行 QA、做交付前检查，或验证 Figma 文件已可进入开发时使用。产出一份结构化的 QA 报告，涵盖文件规范、组件使用、无障碍和交付就绪度，并对每个条目给出明确的通过/未通过状态。针对 Opus 4.7 及更新模型优化。

F

figma-to-ids

iress / design-system

将 Figma 设计属性和结构转换为 IDS（Iress Design System）组件实现。当用户提供 Figma 设计、提到 Figma MCP、请求将设计转换为代码，或引用 Figma 组件名称、变体或自动布局属性时使用。

F

forms-router

bbeierle12 / skill-mcp-claude

Web 表单开发的路由器。当在 React、Vue 或原生 JavaScript 中创建表单、处理校验、用户输入或数据录入时使用。可路由到 7 个专门技能，涵盖无障碍、校验、安全、UX 模式和特定框架的实现。表单项目请从这里开始。

F

frontend-design

duc01226 / easyplatform

[Frontend] 当你需要创建具有高设计水准、独特且达到生产级的前端界面时使用。

F

frontend-design

jetbrains / skills

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

F

frontend-design

leastbit / claude_skills_zh-cn

创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。

G

godot-ui

pbzona / godot-skills

使用锚点、容器、主题、焦点导航、键盘和手柄输入、本地化安全的尺寸设置及无障碍实践，设计并排查 Godot 4.x Control 界面。适用于提及菜单、HUD、表单、响应式布局、Control 节点、主题、焦点、UI 输入或无障碍交互的请求。

G

guided-gui-design

metyatech / skill-guided-gui-design

在设计或评审面向用户的 GUI、且目标是降低首次使用认知负荷、明确主路径、提升可发现性与反馈、预防错误、确保可访问性，并将决策建立在成熟的 HCI 与可用性理论之上时使用。

H

html-ppt-designer

andyhuo520 / html-ppt-designer

HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的 HTML 演示文稿页面，LLM 智能设计优先，支持多种视觉风格、动效设计、色彩认知系统。触发词：PPT、演示文稿、HTML 幻灯片、slide、presentation、做 PPT、制作演示。

L

lean-text-scaffolding

jpcaparas / skills

防止新建网页中文本脚手架臃肿。适用于创建或重构落地页、SaaS 页面、仪表盘、营销区块、UI 文案、占位符、标签、眉题文字或功能卡片。除非明确要求，否则移除通用标签。不要用于纯散文文章、法律文案或客户提供的确切文案。

L

lovstudio:image-creator

lovstudio / skills

通过多种机制生成图像。支持：(1) 通过 Gemini/ZenMux 进行端到端 AI 生成——给定提示词，直接输出图像。(2) 基于代码的渲染——生成 HTML/React 单文件，通过 Playwright 渲染为 PNG。(3) 提示词工程——为外部模型（nano-banana-pro 等）生成优化后的提示词。触发词：image、generate image、生图、render、poster、海报、banner、card、卡片

M

mobbin-ux

rohunvora / cool-claude-skills

借助 Mobbin 进行以研究为驱动的 UI/UX 改进。当用户明确要求设计模式研究（“use Mobbin”“research design patterns”“find UX patterns for X”）时使用。需要 Mobbin 账号和浏览器自动化（claude-in-chrome MCP）。在 Mobbin 中搜索相关 UI 模式，提炼设计原则，生成待批准的需求文档，然后实施。不适用于一般 UI 工作——仅在用户需要以研究为依据的设计时使用。

N

nano-banana-pro

tdimino / claude-code-minoan

使用 Google 的 Nano Banana Pro（Gemini 3 Pro Image）AI 模型生成和编辑高质量图像。在涉及 AI 图像生成或编辑任务时使用本技能，包括 (1) 根据文本提示词创建专业品质的图像，(2) 用自然语言指令编辑现有图像，(3) 多轮迭代式图像精修，(4) 产品摄影和营销视觉素材，(5) 创建带文字的信息图和图表，(6) 照片级真实感和艺术化的图像生成，(7) 批量图像生成工作流，(8) 测试和排查 Gemini 图像生成 API。支持最高 4K 分辨率、多种宽高比、参考图，以及用于电影级效果的高级提示词技巧。

N

nextjs-blog-netlify

rebyteai-template / rebyte-skills

用于 Netlify 的 Next.js 博客，支持可视化编辑和 Tailwind CSS。

O

oil-cover

oil-oil / oil-cover

生成小红书和 B 站 AI 工具实操视频封面，支持脚本模式与 Agent 自主模式、真实视频证据、三画幅输出和可选创作者头像。仅在用户明确提到 oil-cover、$oil-cover、使用 oil-cover 或指定本 Skill 时触发；普通封面、首图、视频封面请求不要自动触发。

当用户想优化注册后的引导流程、用户激活、首次使用体验或价值实现时间时使用。当用户提到"引导流程"、"激活率"、"用户激活"、"首次体验"、"空状态"、"引导清单"、"顿悟时刻"或"新用户体验"时也使用。对于注册/登录流程优化，见 signup-flow-cro。对于持续的邮件序列，见 email-sequence。

从零创建惊艳、动画丰富的 HTML 演示文稿，或将 PowerPoint 文件（.ppt/.pptx）转换为精美的网页幻灯片。当用户想要制作路演材料、演示文稿、幻灯片或幻灯片组，或将现有 PPT 转换为网页演示时使用。生成零依赖的单个 HTML 文件，支持键盘/触摸导航和滚动触发的动画。风格选项包括 Neon Cyber、Bold Signal、Swiss Modern、Paper & Ink 以及另外 8 个精选预设。

O

openscad

iancanderson / openscad-agent

创建带版本控制的 OpenSCAD（.scad）文件用于 3D 打印，渲染预览，并比较不同迭代版本。在设计或迭代 3D 模型时使用。

O

opentui

pedronauck / skills

用于构建终端用户界面的全面 OpenTUI 技能。涵盖核心命令式 API、React reconciler 和 Solid reconciler。适用于任何 TUI 开发任务，包括组件、布局、键盘处理、动画和测试。

P

platform-building

bbeierle12 / skill-mcp-claude

面向移动端、VR 和无障碍的平台专属建造系统。当为建造类游戏实现触摸操控、VR 空间输入、色盲友好的反馈或跨平台建造机制时使用。涵盖输入适配和包容性设计模式。

P

power-bi-pages

julianobarbosa / claude-code-skills

使用 pbi-cli 管理 Power BI 报表页面和书签 —— 在 PBIR 报表中添加、移除、配置和布局页面。当用户提及 "add page"、"new page"、"delete page"、"page layout"、"page size"、"page background"、"hide page"、"show page"、"drillthrough"、"page order"、"page visibility"、"page settings"、"page navigation"、"bookmark"、"create bookmark"、"save bookmark"、"delete bookmark"，或想要管理捕获页面级状态的书签时，调用此技能。当用户询问 drillthrough 配置或 pageBinding 时也调用。

P

prototype

c0nant / c-skills

构建一个临时原型来回答设计问题。当用户想验证状态模型或逻辑是否合理，或探索 UI 应该是什么样时使用

R

responsive-testing

revitalb-port / skills-registry-demo

在 Cursor 的浏览器中以多种视口尺寸打开应用，逐个截图并报告任何布局破损问题。

S

senior-figma-orchestrator

sergekostenchuk / ui-ux-agent-skill-system

UI/UX skill 系统的主要 Figma 编排 skill。当用户要求读取 Figma 设计上下文、将 Figma 画板转化为实施方案或代码、将实时 UI 同步回 Figma、编辑 Figma 画布对象、管理变量/组件/资产/效果、审计 Figma MCP 工作流，或在 $senior-ui-ux-orchestrator 下协调 Figma 工作时，使用此 skill。会路由到 figma-context-reader、figma-design-to-code-bridge、figma-code-to-canvas、figma-canvas-editor、figma-design-system-sync、figma-assets-manager、figma-apply-effects 和 figma-workflow-auditor，同时执行隐私、工具可用性和证据边界方面的约束。

S

shadcn-svelte

exceptionless / exceptionless

管理 shadcn-svelte 组件与项目——添加、更新、修复、调试、样式化和组合 UI。提供项目上下文、组件文档与使用示例。在使用 shadcn-svelte、其 CLI、design-system 预设，或任何含有 components.json 文件的项目时适用。遇到 "shadcn-svelte init"、"add component" 或 registry URL 时也会触发。

S

shadcn-ui

enderpuentes / ai-agent-skills

在 Tailwind v4 和 Next.js（App Router）、Vite 或手动设置中安装并使用 shadcn/ui；配置 components.json，通过命令行添加组件，仅用 CSS 进行主题化。在添加 shadcn/ui、安装 shadcn、使用 Button、Card、Dialog、Form 或其他 shadcn 组件时，或当用户提及 shadcn、shadcn/ui 或与 Tailwind 搭配的 Radix UI 时使用。

S

signup-flow-cro

mysticaltech / marketingskills

当用户希望优化注册、注册流程、账号创建或试用激活流程时使用。此外，当用户提到“signup conversions”、“registration friction”、“signup form optimization”、“free trial signup”、“reduce signup dropoff”或“account creation flow”时也使用。注册后的引导流程参见 onboarding-cro。用于收集线索的表单（而非账号创建）参见 form-cro。