Skills

A

anti-slop-design

kjaylee / misskim-skills

创建独特且达到生产级别的前端界面，避免千篇一律的 AI 美学。适用于构建 Web 组件、游戏 UI、落地页、仪表板或任何可视化 Web 界面。避免紫色渐变、圆角和 Inter 字体综合征。

A

apple-design-os

s1gmamale1 / apple-design-skills

为 Apple 操作系统设计应用 UI 时使用——iOS/iPadOS 界面（表单页、detents、标签栏、大标题、小组件、锁定屏幕、Dynamic Island）、macOS（窗口、红绿灯按钮、侧边栏、菜单、材质效果）、visionOS 空间设计、watchOS（复杂功能、Digital Crown），或标准 UIKit/SwiftUI 组件结构（导航栏、列表、表单、按钮、警告框、搜索、空状态）。属于 apple-design 系列。关键词：iOS 设计、iPadOS、macOS Tahoe、visionOS、watchOS、空间设计、装饰元素、sheet、presentationDetents、标签栏、导航栏、大标题、侧边栏、红绿灯按钮、小组件、dynamic island、stage manager、组件、SwiftUI、List、Form、按钮层级、ContentUnavailableView、alert、searchable。

把 Argos 视觉回归构建作为拉取请求评审的一项输入进行审查。当 PR 中有 Argos 构建链接、Argos 状态检查，或指向 Argos 构建的机器人评论时使用，用于在批准前判断视觉差异是否符合开发者的意图。

A

avonni-flow-components

avonni / skills

在 Salesforce flow 中添加、更新或移除 Avonni Flow Screen Components。当用户希望在 screen flow 中使用 Avonni 组件、编辑包含 avcmpbuilder 扩展的 flow XML，或围绕 Avonni 组件创建新的 screen flow 时使用。不涵盖常规 flow 逻辑（decisions、assignments、record operations）。当请求跨多个 Avonni 产物类型（例如 flow 加上启动它的 dynamic component 或 portal page）时不要使用——应改用 avonni-architect 技能。

A

avonni-lwc-components

avonni / skills

将 Avonni 组件集成到 LWC 组件的代码中（HTML、JS、CSS）。涵盖 MCP 工具的使用、attribute/event/type/slot 解析、styling hooks 和校验——不涵盖常规的 LWC 创建。触发条件：用户要求在代码中添加、使用或设置 Avonni 组件样式；编写或编辑引用 avonni-* 标签的 LWC；用户提到以“avonni-”开头的组件名。

B

beautiful-ui

apetcu / skills

使用 Next.js 和 Tailwind CSS v4 构建出色的玻璃拟态深色模式界面。适用于创建任何前端 UI、组件、页面或应用。擅长玻璃般的半透明表面、深色背景上的明亮配色、使用 Framer Motion 的流畅动画以及高级视觉打磨。始终生成深色模式优先、玻璃拟态、生产级且审美质量出众的代码。

B

brandkit-build

arnie936 / ai-brand-kit

将一份详尽的品牌描述浓缩为可用的 Brand Kit（brand kit、design system、design tokens、style guide）。生成一份简短的、具有约束力的 BRAND.md，可执行的 CSS tokens，Wordmark SVG，参考 Artboard，以及一份能让规则自动生效的 CLAUDE.md。只要已有品牌访谈结果、有人想从冗长的 Styleguide 中做出可实际使用的东西，或者问为什么自己的设计系统在日常中被忽视，就使用这个 Skill。

B

brandkit-publish

arnie936 / ai-brand-kit

从现有 Brand Kit 构建网页、PDF 和 AI 图像，并依据 EU 人工智能法规对生成的图像进行标注（brand kit、landing page、PDF、AI images、AI labeling、EU AI Act、higgsfield、gpt image）。集成 unslop、web-design-guidelines 和 seo-audit 这几个 Skill，并通过随附脚本嵌入 AI 标记。只要需要基于现有 Brand Kit 构建内容，或者有人问如何合法合规地标注 AI 图像，就使用这个 Skill。

B

bulk-select-actions

blink-new / claude

构建世界一流的表格批量选择功能，搭配浮动操作工具栏。具备 Linear/Notion 级别的体验，包括正确的复选框状态、流畅动画和确认对话框

C

check-fix-accessibility

neha / check-fix-accessibility

检查并修复前端项目（Web 和移动 Web）的可访问性（a11y），包括 Next.js、React、Vue、Angular。当用户询问可访问性、a11y、WCAG、屏幕阅读器、语音控制、Voice View、键盘导航、焦点管理、ARIA、语义化 HTML、颜色对比度，或修复 HTML、React、Next.js、Vue 或其他前端代码中的可访问性问题时使用。原生移动应用（React Native、iOS、Android）请参阅 reference；模式不同。

C

chiaroscuro

howells / skills

使用 Tailwind v4 设计并构建精致的网页 UI，或改进看起来杂乱、普通或未完成的界面。当界面需要呈现出色外观时使用。不适用于页面方向（`maquette`）、应用外壳（`armature`）、屏幕尺寸（`reflow`）、Paper 模型（`paste-up`）或 QA（`fieldtest`）。

C

clarify

ryanthedev / design-for-ai

通过对缺口分类（缺少品牌背景、视觉歧义、错误前提、范围缺陷）并生成有针对性的澄清问题，分解规范不足的设计请求。在设计工作开始前产出已确认的设计简述。用于细化已存在的设计请求；不用于从模糊想法出发的开放式设计简述探索（请使用 /design-for-ai:research）。

C

co-op-game-intro-generator

sjh00 / minimax-h3-storyboard-prompt-skills

双人合作游戏主菜单/开场的 H3 提示词写法：风格与身份锁、确认首图 prompt、15s 菜单交互时间轴视频 prompt。 适用游戏概念展示提示词。不适用可玩工程或复杂多页 UI 规格书。

C

components-version-badge

laurigates / claude-plugins

实现一个框架无关的版本徽章组件，带提示框显示构建信息（版本、提交、分支、时间戳）以及最近更新日志条目。当用户希望在应用页眉或页脚中添加版本显示、在 UI 中展示构建信息、将最近更新日志条目作为提示框呈现，或提到“version badge”、“build info display”、“commit SHA in UI”时使用。支持 Next.js、Nuxt、SvelteKit、Vite+React 以及纯 React/Vue/Svelte。

C

craft-garnish

michtio / craftcms-claude-skills

Garnish — Craft CMS 内置的、用于控制面板的 JavaScript UI 工具包。在编写、编辑或审查运行于 Craft CP 中的 JavaScript 时始终加载 — 插件 CP 资源、自定义字段类型 JS、元素索引 JS、CP webpack 配置，或导入 garnishjs / 引用 window.Garnish 的代码。也适用于 CP 无障碍、键盘交互、拖动排序以及 CP JS 内存问题。

C

craft-page

jayden-dang / skills

在写任何人会看到的 HTML 的第一行标记之前使用。

C

create-marketing-kit

tamdogood / builder-essential-skills

为应用或产品创建真实、以人为本的营销活动，包括定位、渠道文案、原创视觉作品、可编辑版式、README 横幅和有选择的网站集成。适用于被要求根据现有产品制作发布材料、宣传视觉、社交素材、活动套件、广告或营销内容；在不抄袭的前提下改编视觉参考；或将已批准的营销活动视觉作品添加到产品界面。未经明确证据和授权，不得编造声明、伪造 UI、发布、部署或替换产品证明。

C

css-tokens

schalkneethling / webdev-agent-skills

为基础 CSS 设计令牌（自定义属性）提供支持，涵盖排版、间距、颜色、边框、z-index 和过渡。适用于为 Web 项目搭建基础令牌系统。

C

custom-icons-skill

jkc66 / custom-icons-skill

用于创建定制矢量和复杂位图图标的专业工作流。专业图标设计工作流，包括 Design（视觉）、Path（矢量）、Desire（概念）和 3D 色键模式。具备 AI 提示词工程、自动二值化、alpha 清理和 SVG 优化。

D

dashboard-brief

mohitagw15856 / pm-claude-skills

将业务问题转化为完整的仪表盘规格。当被要求设计仪表盘、创建仪表盘规格或简报、规划 BI 报表，或定义仪表盘应包含哪些图表与指标时使用。产出结构化规格，包含指标、维度、图表类型、筛选器与布局指导。

D

duo-design

hktitan / duolingo

Duolingo 设计系统中的 UI 模式——富有活力的动效、作为情感通道的角色系统、设计令牌（颜色/字体/间距）、作为 UX 界面的声音、默认无障碍而非清单式检查，以及"以错误为惊喜"的细节处理。当用户为游戏化或学习类产品设计界面、审查设计时思考"为什么感觉平淡"、选择动效系统、构建角色吉祥物，或进行无障碍审查时使用。此技能负责设计*理由*；像素级工艺（缓动值、对比度比例、组件属性）交由 design-engineering 技能处理。

E

editorial-minimal

madebymustafa / design-taste

风格包：瑞士编辑设计风格。暖色纸张背景、墨黑字体、一处朱红点缀、超大衬线展示字搭配等宽标签、纤细网格、索引式分区和严格的不对称构图。适用于需求希望呈现平静、编辑感、印刷风或低调高级感的场景。叠加在 design-taste 核心技能之上使用。

E

empty-state-and-loading-review

sylphxai / skills

为应用、SaaS、游戏、工具和 Web 产品审阅并设计空状态、加载状态、骨架屏、进度指示器、离线状态、首次使用状态、零结果状态和错误恢复。适用于产品界面显得空白、令人困惑、缓慢、死气沉沉时，或设计超越顺畅通路的弹性 UI 状态时。

F

fable-artifact

immamdouhaboammar / get-fable

设计并编写结构化技术提案、响应式制品、架构图、Mermaid 图表和交互式组件。适用于创建独立的 Markdown 报告、架构规范、Mermaid 图表或交互式制品组件，即使用户没有明确提到“fable-artifact”（例如“创建一个制品”“绘制架构图”“撰写技术提案”“生成 Mermaid 流程图”）。不要用于快速的一行式对话回答。

F

fable-dataviz

immamdouhaboammar / get-fable

设计并生成易于访问且风格统一的数据可视化、SVG 图表、指标卡片和仪表板组件，采用适配主题的样式，并验证视口。适用于创建 SVG 图表、绘制指标图、设计仪表板视觉元素或呈现性能趋势，即使用户没有明确提到 "fable-dataviz"（例如 "make a chart of this data"、"plot these benchmarks"、"create an SVG graph"、"visualize these metrics"）。不要用于非可视化的纯文本数据摘要或通用代码编辑。

F

figma-design-review

mohitagw15856 / pm-claude-skills

依据产品需求运行结构化的 PM 设计评审。当被要求评审 Figma 设计、对照需求检查设计，或评估设计是否满足产品规格时使用。产出需求覆盖检查、UX 问题、待决问题以及明确的批准状态——已批准、有条件批准或未批准。

F

figma-workflow-auditor

sergekostenchuk / ui-ux-agent-skill-system

审计 Figma MCP、设计到代码、代码到画布、画布编辑和设计系统工作流的正确性、时效性、隐私、证据和路由质量。当用户询问某个 Figma 工作流、技能、任务计划、MCP 能力声明或 Agent 交接是否有效、是最新的、安全或可用于生产时使用此技能。

F

form-cro

mysticaltech / marketingskills

当用户想优化任何非注册/注册类表单时使用，包括潜客获取表单、联系表单、演示申请表单、申请表、调查问卷或结账表单。当用户提到“表单优化”“潜客表单转化”“表单摩擦”“表单字段”“表单完成率”或“联系表单”时也使用。注册/注册类表单请参见 signup-flow-cro；包含表单的弹窗请参见 popup-cro。

F

frontend-design

dejanvasic85 / williamstownsc

创建独具特色、达到生产级质量的高设计水准前端界面。当用户要求构建网页组件、页面或应用时使用该技能。生成富有创意、精致打磨的代码，避免千篇一律的 AI 风格。

F

frontend-design

gitbobobo / skills

为构建新 UI 或重塑现有 UI 提供指导，实现独特、有意图的视觉设计。帮助确定美学方向、排版，以及做出不显得像模板默认值的选择。

F

frontend-design

lotfb86 / web-design-skills

创建独具特色、达到生产级质量的高设计水准前端界面。当用户要求构建网页组件、页面或应用时使用该技能。生成富有创意、精致打磨的代码，避免千篇一律的 AI 风格。

F

frontend-design

marcioaltoe / skills

为构建新 UI 或重塑现有 UI 提供指导，实现独特、有意图的视觉设计。帮助确定美学方向、排版，以及做出不显得像模板默认值的选择。

F

frontend-slides

gooseworks-ai / goose-skills

从头创建动画丰富的精美 HTML 演示文稿，或将 PowerPoint 文件转换为 HTML。用户想要制作演示文稿、将 PPT/PPTX 转换为网页，或为演讲／提案制作幻灯片时使用。通过视觉探索而非抽象选项，帮助非设计师找到适合自己的美学风格。

F

frontic-implementation

frontic / skills

为电子商务数据创建、配置和使用 Frontic 区块、列表和页面。在使用 Frontic 配置、构建产品/类别页面、创建数据源或集成 Frontic 客户端时使用。涵盖资源决策、区块/列表创建指南以及客户端使用模式。

G

game-art

vudovn / ag-kit

游戏美术原则。视觉风格选择、资源管线、动画工作流。

G

Geek-skills-ppt-designer

staruhub / claudeskills

专业 PPT 设计与制作 skill，基于设计最佳实践创建精美、专业的演示文稿。涵盖排版、配色、图片处理、视觉层次等核心设计原则。当用户需要制作高质量 PPT、改进现有 PPT 设计、学习 PPT 制作技巧，或需要商务演示、学术报告、创意提案等场景的专业演示文稿时使用。可与 seedream-imagegen skill 配合为 PPT 生成定制化配图。

G

generate-image

b-open-io / gemskills

当用户要求「生成图像」「制作横幅」「创作 artwork」「创建插画」「生成 logo」「制作图形」「设计页头」「AI art」「img2img」「社交分享图」「OG image」「open graph image」「Twitter card」「hero image」「封面图」「头像」「社交媒体图形」，或需要 AI 图像生成时，应使用这个 Skill。负责提示词重写和 Gemini 3 Pro 图像生成 API 调用。

G

geospatial-frontend

isaaccorley / geospatial-skills

使用 MapLibre 地球仪、DuckDB-WASM 和温暖的深色 HUD 美学，构建视觉惊艳的地理空间演示 Web 应用。适用于构建卫星影像检索演示、嵌入可视化工具、地理空间搜索 UI，或任何以地图为中心的数据探索前端。触发于收到搭建新的地理演示、构建基于地图的 UI，或创建卫星数据检索／搜索可视化的请求时。

G

gpt-slide-generate

humantonylee / future-slide

用于严谨生成幻灯片的工作流。提取设计、规划演示文稿，并保持渲染风格一致。

H

huashu-design

mxyhi / ok-skills

花叔Design——用 HTML 制作高保真原型、幻灯片、动画、可视化内容并进行专家评审。任何新设计都必须先提供三个初稿方向供用户选择（指定风格或品牌时也不例外），选定后才能继续。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个 HTML 页面、UI mockup、导出 MP4/GIF、做个好看的。生产级 Web App 或需要后端的系统不适用。

创建协调统一的图标集和设计系统

I

implementing-figma-ui-tempad-dev

ecomfe / tempad-dev

使用 TemPad Dev MCP 作为唯一的设计证据来源（代码快照、结构、资源、tokens、codegen 配置），从 Figma 选区或提供的 nodeId 实现可集成的 UI 代码。先检测目标仓库的技术栈和约定，再将 TemPad Dev 类 Tailwind 的 JSX/Vue IR 转换为项目原生代码，不新增依赖。绝不猜测关键样式或尺寸。若所需证据缺失/矛盾，或资源无法按仓库策略处理，则停止，或交付一个安全的基础版本并明确标注警告与省略项。

创建引人入胜的数据可视化和信息图表

I

installing-westpac-ui

westpacgel / gel-next

指导在新项目中安装与配置 @westpac/ui 和 @westpac/style-config。适用于设置 GEL、安装设计系统、配置 Tailwind CSS、主题或品牌字体时。

借助 AI 驱动的动态设计，创建动态 kinetic typography 与文字动画视频。

L

landing-page-critique

sylphxai / skills

为 SaaS、应用、游戏、工具、开发者工具、交易平台和发布活动审阅并改进落地页。适用于审阅主视觉文案、定位、证据、演示、CTA、异议处理、社会证明、SEO、转化分析、候补名单、产品驱动增长页面或营销活动落地页时。

L

leonardo-colors

adobe / leonardo

使用 @adobe/leonardo-contrast-colors 生成无障碍配色主题。当用户需要构建基于对比度的色板、检查 WCAG 无障碍性、创建自适应主题或使用 Leonardo API 时使用。

L

lime-echart

full-stack-skills / chart-skills

为 Lime ECharts 提供全面指导，包括图表创建、配置、数据可视化与交互式图表。当用户询问 Lime ECharts、需要创建图表、可视化数据或使用 ECharts 功能时使用。

L

lorem-ipsum-generator

dkyazzentwatwa / chatgpt-skills

生成各种格式的占位文本（lorem ipsum）。为样稿和测试创建段落、句子、单词或自定义模板。

M

makepad-2.0-dsl

zhanghandong / makepad-skills

CRITICAL：用于 Makepad 2.0 DSL 语法和属性系统。触发词：makepad dsl、script_mod!、makepad syntax、makepad property、makepad 2.0 syntax、colon syntax、merge operator、named instance、let binding、mod.widgets、register_widget、script_component、type_default、widgets_internal

M

makepad-2.0-layout

zhanghandong / makepad-skills

CRITICAL：用于 Makepad 2.0 布局系统。触发词：makepad layout、makepad width、makepad height、makepad flex、makepad flow、makepad padding、makepad margin、makepad spacing、makepad align、makepad sizing、Fill、Fit、Inset、Flow.Down、Flow.Right、ScrollXView、ScrollYView、布局、对齐、间距、填充、排版、滚动视图、尺寸、宽度、高度

M

makepad-2.0-shaders

zhanghandong / makepad-skills

CRITICAL：用于 Makepad 2.0 着色器系统。触发词：makepad shader、Sdf2d、pixel shader、draw_bg、draw_text、draw_quad、makepad gpu、shader function、pixel fn、vertex fn、instance、uniform、shader variable、sdf、premultiply、Pal.premul、GaussShadow、makepad graphics、custom draw、DrawQuad、DrawVector、着色器、像素、渲染、自定义绘制、距离场

M

material-design-3

gdlbo / material-skill

为 Android Compose、Android Views、Wear OS 和 Web 设计、实现或评审 Material 3 与 Material 3 Expressive 界面。用于 Material Design、M3、Material You、自适应 Material 布局、以 Material 为核心的 Android UI 现代化改造或 Material Web 组件工作；除非用户要求采用 Material，否则不要将其用于非 Material 设计。

M

mobile-app-product-systems

sylphxai / skills

设计并审阅移动应用与移动游戏的产品系统，包括退款、促销、订阅、应用内购买、应用内广告、通知、每日签到、奖励、权益状态、留存循环和符合商店规范的变现 UX。适用于构建或审计 iOS/Android 应用、移动游戏、消费级应用、应用商店变现流程或生命周期互动系统时。

M

mobile-first-ui-review

sylphxai / skills

针对应用、Web 产品、SaaS、工具和游戏，从触控人体工学、安全区域、导航、表单、权限、加载、离线状态和感知速度等方面审阅并改进移动优先 UI。适用于设计或审计移动界面、响应式移动视图、引导页、购买流程、设置，或任何需要在手机上显得快速现代的 UI 时。

M

motion-transition-review

sylphxai / skills

为 UI 状态变化、导航、加载、手势、模态框、抽屉、游戏以及桌面/移动应用审阅并设计细微的产品动效、动画和过渡。适用于界面显得跳动、缓慢、毫无生气、动画过度时，或在保持无障碍与减弱动效行为的同时添加现代微交互时。

N

neo-brutalism

madebymustafa / design-taste

风格包：网页新粗野主义——张扬的消费品活力与严谨纪律并存。明亮温暖的纸张底色，所有元素均采用墨黑色 2.5px 边框，硬朗的错位阴影，一种主导的亮色强调色和一种辅助强调色，厚重的胶囊形元素与贴纸，以及俏皮文案。适用于消费类应用、代理机构、加密／科技新奇品牌，以及任何追求鲜明个性的项目。叠加在 design-taste 核心技能之上。

N

notification-strategy-review

sylphxai / skills

为推送、邮件、应用内消息、短信、生命周期消息、提醒、游戏、SaaS、移动应用和桌面工具设计或审计通知策略。适用于规划权限提示、通知分类、用户控制、留存活动、免打扰时段、送达率、疲劳、事件触发或兼顾支持的消息时。

O

octen-design

octen-team / octen-skills

在构建任何前端之前拉取真实世界的 UI 设计参考。无论何时实现、重新设计或改进任何 Web UI——页面、组件、布局、仪表盘、表单、卡片、导航、模态框、营销区块——即使使用者并未明确要求“设计参考”，都使用该技能。像“给我构建一个设置页”、“做一个定价卡片”、“这个看起来很平淡，改进一下”或“匹配 X 的风格”这样的说法都应触发它。它会查询多模态设计搜索 API，获取来自顶级产品的参考截图、结构化的风格描述以及 HTML/CSS 片段，使实现植根于经过验证的模式，而非凭空创造。只有在没有视觉界面的纯逻辑/后端工作中才跳过它。

O

onboarding-activation-review

sylphxai / skills

为 SaaS、移动应用、游戏、开发者工具、工具和交易平台审阅并设计引导与激活流程。适用于改进首次运行体验、设置清单、权限时机、顿悟时刻、试用激活、邀请/团队设置、空状态、教程或早期留存度量时。