Skills

E

extract-design-md

nathanonn / agent-skills

将网站的设计系统提取到 DESIGN.md 文件(google-labs-code/design.md 格式)。每当用户给出站点 URL 并希望捕获、逆向工程、克隆或记录其视觉标识——颜色、排版、圆角/间距比例、组件和品牌感——时使用。触发短语如“从 <url> 提取设计系统”“从 <site> 生成 DESIGN.md”“获取 <site> 的设计令牌”“<site> 的配色方案/字体是什么”,或“我希望我的 UI 看起来像 <site>”。它使用 playwright-cli 采样若干真实页面,读取 CSS 自定义属性 + 计算样式(精确且成本低),为文字描述拍摄浅色截图,并用官方 linter 进行验证。只要目标是可复用的设计规格,就优先使用本技能,而非凭肉眼观察截图。

F

flutter-ui

naimehossein77 / claude-flutter-ui-skills

像素级精准的 Flutter UI——流畅动画、GoRouter 导航、前进／后退逻辑、Riverpod + Provider 状态管理。用于构建 Flutter 屏幕、导航流程、动画或与状态连接的小部件。

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

F

frontend-design

answerzhao / agent-skills

将 UI 样式需求转化为可上线的生产级前端代码，具备系统化设计令牌、无障碍合规和创意执行。在构建网站、Web 应用、React/Vue 组件、仪表盘、落地页，或任何同时需要设计一致性和美学质量的 Web UI 时使用。

F

frontend

omer-metin / skills-for-antigravity

世界一流的前端工程——React 理念、性能、无障碍与生产级界面。当提及「frontend、react、vue、svelte、next.js、nuxt、component、state management、redux、zustand、client side、spa、ssr、hydration、bundle size、web vitals、accessibility、a11y、responsive、css、tailwind、frontend、react、typescript、performance、accessibility、components、state、architecture」时使用。

G

game-design-fairness-frustration-audit

stanestane / game-design-skills-bundle

评估游戏、功能、失败循环、战斗遭遇、奖励系统、进度墙或高波动机制带来的公平感与挫败感。用于诊断玩家是否觉得受骗、难度是否合理、随机性、反馈与挑战是否相互作用不佳，或为何某种设计在技术上仍可运行，却依然引发愤怒、责怪或拒绝重试。

在使用 gluestack-ui 组件构建 UI 时使用。涵盖组件组合、变体、尺寸、状态、无障碍属性，以及 React 和 React Native 的平台特定注意事项。

G

goose-graphics

gooseworks-ai / goose-skills

适用于 Agent Skills 生态（Claude Code、Claude Desktop、Claude Cowork、Claude Design、Goose、Cursor、Codex）的可移植视觉技能包。通过 gooseworks 命令行发现社区发布的样式和格式，对参考图像运行 extract-style 工作流，并通过 Playwright 导出渲染后的 PNG。

H

handoff

tranz007 / ux-skills

通过保留用户意图、行为、状态、设计系统用法、无障碍要求、依赖项、验收行为以及未决问题，为工程团队准备 UX 工作。当设计师说“get this ready for engineering”、需要交接、行为契约、可直接实施的工单内容，或想避免工程团队靠猜测时使用。

I

icon-generation

michaelboeding / skills

生成具有透明背景的应用图标。触发词包括："generate icon"、"create icon"、"make icon"、"app icon"、"favicon"、"icon for"、"logo icon"、"icon set"、"icon pack"、"transparent icon"。生成适合应用图标、favicon 和 UI 元素的带透明背景方形 PNG 图标。

I

init-pure-admin-iconify

ruan-cat / monorepo

初始化 vite+vue3 项目的 pure-admin 风格 iconify 图标渲染体系 （离线 + 在线 + useRenderIcon 统一渲染）。当用户提及"初始化 iconify" "pure-admin 图标方案""ReIcon/useRenderIcon""离线图标接入" "后台项目图标基础设施"时使用此技能。

I

interface-design

master5d / claude-design-skills

此技能用于界面设计，包括仪表板、管理面板、应用、工具和交互式产品。不用于营销设计（着陆页、营销网站、营销活动）。

L

lavish-axi

kunchenguid / lavish-axi

使用 lavish-axi CLI 将复杂或可视化的 Agent 回复转化为内容丰富的、可审阅的 HTML 制品，用户可对其批注并反馈。适用于即将给出计划、对比、图表、表格、代码 diff、报告，或任何用可视化形式比散文更易理解的内容时。

M

markdown-content

joyco-studio / skills

在 Next.js 中使用 fumadocs-mdx、rehype-pretty-code 和 shiki 构建 markdown 内容页面（博客、法律条款、更新日志）的指南。涵盖 MDX 集合、自包含的正文排版、语法高亮代码块，以及让渲染后的 markdown 与自定义 React 代码组件视觉一致的组件映射。无需文档 UI 框架。

M

minoan-frontend-design

tdimino / claude-code-minoan

构建独特、达到生产级水准的前端界面——网站、落地页、仪表盘、React 组件、HTML/CSS 布局、带深度视差效果的编辑式首屏（Astryx 模式）、指针响应式流体效果、像素故障风 canvas 首屏以及终端风格的工具面板立体场景（Composio 模式）。避免千篇一律的 AI 审美。触发词包括 web UI、styling、beautify、frontend design、dashboard、landing page、React component、editorial hero、glitch hero、dev-tool landing page。

M

moai-design-tools

modu-ai / moai-adk

设计工具集成专家，覆盖 Figma MCP、Pencil 渲染器和 Pencil 到代码的导出。适用于从 Figma 获取设计上下文、渲染 Pencil 设计或导出为 React/Tailwind 代码时。

M

mobile-feel

paragonhq / stealth-skills

让 Web 界面在手机上拥有原生应用般的体验。涵盖触控目标、动态视口高度、安全区域、点击高亮和粘滞悬停、输入框缩放、touch-action 与 overscroll、拇指操作区内的弹层和底栏、屏幕键盘、惯性滚动与下拉刷新冲突，以及中端设备上的性能。适用于用户觉得网站在手机上“像个网站”、构建底部弹层、底部导航或移动表单，或准备发布任何供手机用户使用的内容。

M

multi-touch-canvas-with-flutter

rodydavis / skills

了解如何创建支持多点触控的 Flutter canvas，实现平移、缩放和对象交互，并克服常见的各种手势识别冲突。

O

oma-design

gracefullight / stock-checker

定义或审查视觉系统、DESIGN.md 或重设计方向。用于字体、布局、色彩、动效和交互设计决策。

P

paper2reel

microsoft / researchstudio

构建一个交互式 HTML 查看器，通过 sidecar content_alignment.json 将 paper2poster 的输出与 slide/video deck 帧对齐，且不修改原有的 poster、PPTX 或 blog 交付物。

P

planning-a11y-improvement

masup9 / a11y-specialist-skills

评估组织的无障碍成熟度，并制定包含路线图、KPI 和利益相关方材料的长期改进计划。特定站点 WCAG 审计的执行计划请使用 planning-wcag-audit。

P

polar-elements

crafter-station / elements

从 Elements registry 安装 Polar 变现组件。当用户需要定价卡片、赞助商网格、订阅徽章、收入展示或许可证密钥输入框时使用。触发词："polar"、"monetization"、"pricing card"、"subscription badge"、"sponsor grid"、"license key"、"revenue card"、"sponsorship"、"pricing page"。

当用户想要创建或优化以转化为目的的弹窗、模态框、浮层、滑入式窗口或横幅时使用。当用户提到「退出意图」「弹窗转化」「模态框优化」「线索收集弹窗」「邮件弹窗」「公告横幅」或「overlay」时也使用。对于弹窗之外的表单，请参阅 form-cro。对于整体的页面转化优化，请参阅 page-cro。

P

power-bi-report-design

datacoolie / powerbi-skills

在生成 PBIR JSON 之前，设计 Power BI 报表布局、选择图表类型、规划页面结构、选择主题并应用数据叙事。生成设计规范以及供 `power-bi-report-authoring` 使用的官方标准 `Design Brief:` 契约（设计标识、页面原型、机械布局契约）。涵盖 Microsoft `powerbi-report-cli` 的 `design` 模式（语气、标识、原型路由、图表选择、颜色、排版、布局、交互性、无障碍性、现有报表改版、预检清单）。用户要求设计报表、规划仪表板布局、选择可视化或图表类型、选择主题或配色、规划导航、改版或评审现有报表，或根据需求编写设计规范时使用。不要用于生成 PBIR JSON、验证报表结构或构建语义模型（使用 `power-bi-report-authoring` / `power-bi-semantic-model`）。

P

prototype

carlitose / agent-skills

在投入生产代码之前，构建一个一次性原型来回答某个设计、逻辑、数据模型、状态机或 UI 问题。当用户要求做原型、验证方案可行性、制作 UI 原型、探索设计方案、比较流程，或用一次性的代码降低不确定性时使用。

P

prototype

jayden-dang / skills

当设计问题需要可运行的答案时使用——用户想要

P

prototype-web

nexu-io / html-anything

可点击的功能性 Web 原型,含导航、英雄区、特性区、CTA

R

radix-primitives

yonatangross / orchestkit

用于对话框、弹出框、下拉菜单等的 Radix UI 无样式可访问原语。在构建自定义可访问组件、理解 shadcn 内部实现，或需要多态组合时使用。

R

react-component-documentation

getsentry / sentry

按 Sentry 的 MDX stories 格式创建或更新组件文档。当被要求“记录一个组件”“添加 stories”“编写组件文档”“创建 mdx 文件”“添加 stories.mdx”，或为设计系统组件编写文档时使用。会生成结构化 MDX，包含可实时运行的示例、无障碍指南，以及从 TypeScript 类型自动生成的 API 文档。

S

setup-ux

tranz007 / ux-skills

通过采集产品意图、用户与证据认知、设计系统、工程环境、无障碍预期、术语和有影响的决策，为新项目或现有项目设置或刷新 UX Skills。仅在用户明确要求设置、初始化、连接、学习或刷新 UX Skills/项目上下文时使用；不要在普通 UX 工作中启用。

S

ship-page

zooeyii / ship-page-skill

为产品、创业公司和副业项目创建惊艳的交互式落地页——零依赖、单个 HTML 文件。当用户想要为其应用、工具、SaaS、开源项目或个人品牌构建落地页、产品页、发布页、营销页或任何宣传网页时，使用本 skill。用户说 "I need a website for my product"、"help me launch"、"make a page for my app"，或想把 README 转成可视化落地页时也会触发。非常适合 Product Hunt 发布、GitHub 项目页和独立开发者的发布日。

S

sketch-image-prompt

okooo5km / skills4u

将文章内容或摘要转化为面向 AI 图像生成工具的极简手绘风格 JSON 提示词。当用户想根据文本内容创建任意类型的视觉内容时使用此技能——包括横幅、文章插图、内嵌图表、信息图或概念视觉。在出现「把这个做成视觉图」「创建图像提示词」「为此制作插图」「从这篇文章生成图表」「我需要为这一节画草图」等请求，或任何将内容分析与图像/视觉提示词生成相结合的请求时触发。当用户提供文本内容并希望输出可供 AI 使用的图像提示词时，始终使用此技能。

S

stitch-orchestrator

gabelul / stitch-kit

所有 Stitch 设计工作流的统一入口。从用户请求 → 设计规格 → 提示词组装 → 界面生成 → 迭代（编辑、变体、设计系统）→ 设计系统提取 → 框架转换（Next.js、Svelte、HTML、React Native 或 SwiftUI）→ 可选质量检查。

S

story-cover

qin1473692580-ux / oh-story-claudecode

小说封面生成。根据书名、作者名自动分析题材风格，调用 GPT-Image-2 直接生成含标题和署名的专业级网文封面。触发方式：/story-cover、/封面、「帮我做个封面」「生成封面图」「做个小说封面」「封面设计」。

S

SwiftUI Multiplatform Design Guide

mosif16 / codex-skills

面向 iOS、iPadOS、macOS 和 visionOS 的统一 SwiftUI 架构，融合空间设计原则。

S

swiftui

petekp / claude-code-setup

在为 iOS、iPadOS、macOS 或 visionOS 构建 SwiftUI 界面时使用。触发条件包括采用 Liquid Glass、SwiftUI 动画/转场、布局模式、状态管理、设计令牌、性能优化、SwiftUI 中的无障碍支持，或打造“Apple 级”UI 质量。

S

syncfusion-maui-toolkit-effects-view

syncfusion / maui-toolkit-ui-components-skills

实现 Syncfusion .NET MAUI Effects View（SfEffectsView），用于现代触控交互和视觉反馈。在为按钮、卡片、列表或图像实现波纹效果、触控反馈动画、选择指示器、缩放动画或高亮覆盖层时使用。涵盖触控效果、波纹动画、选择状态和交互式视觉反馈。

S

syncfusion-maui-toolkit-navigation-drawer

syncfusion / maui-toolkit-ui-components-skills

实现 Syncfusion .NET MAUI Navigation Drawer（SfNavigationDrawer）控件，用于创建从屏幕边缘滑出的导航窗格。涵盖定位（左、右、上、下）、内容配置、动画、事件、手势和自定义。只要在 MAUI 应用中实现抽屉式导航时，就使用此技能。

S

syncfusion-maui-toolkit-numeric-updown

syncfusion / maui-toolkit-ui-components-skills

实现 Syncfusion .NET MAUI NumericUpDown 控件，用于带验证、格式化和增减按钮的数值输入。在构建需要增减按钮数值输入、货币格式、百分比值、小数精度、自定义格式、输入验证或占位文本的表单时，使用此技能。

S

syncfusion-maui-toolkit-numericentry

syncfusion / maui-toolkit-ui-components-skills

使用 Syncfusion .NET MAUI NumericEntry（SfNumericEntry）实现数值输入。支持货币、百分比和小数格式，并提供验证、最小/最大值限制、占位文本、自定义样式和区域特定格式。包含值变更模式、事件和无障碍功能，适用于专业数值数据录入。

S

syncfusion-maui-toolkit-segmented-control

syncfusion / maui-toolkit-ui-components-skills

实现 Syncfusion .NET MAUI Segmented Control（SfSegmentedControl）。适用于在 MAUI 应用中处理分段控件、分段按钮、类似标签页的选择、按钮组或筛选按钮。此技能涵盖安装、项目填充、选择指示器、外观自定义、布局配置、禁用分段和事件。

S

syncfusion-maui-toolkit-tabview

syncfusion / maui-toolkit-ui-components-skills

使用 Syncfusion MAUI TabView 实现标签页导航。涵盖标签页设置、自定义、选择事件、嵌套标签页、滑动手势和视觉状态管理。

S

syncfusion-maui-toolkit-text-input-layout

syncfusion / maui-toolkit-ui-components-skills

实现 Syncfusion .NET MAUI Text Input Layout（SfTextInputLayout）。在向 Entry 和 Editor 控件添加浮动标签、图标、辅助标签或容器等装饰元素时使用。涵盖文本输入布局设置、提示标签、帮助文本、错误消息、字符计数器和密码可见性切换。

S

syncfusion-winui-ai-assistview

syncfusion / winui-ui-components-skills

实现 Syncfusion WinUI AI AssistView 控件以创建 AI 聊天界面和对话式 UI 的指南。在 WinUI 应用中实现 AI 聊天界面、AI 助手、对话式 UI 或聊天机器人时使用本技能。对于创建 AI 驱动的聊天体验、集成 AI 服务、显示 AI 响应、显示输入指示器、提供 AI 建议，或在 WinUI 中用 AI 服务实现对话式界面至关重要。

S

syncfusion-winui-calendar

syncfusion / winui-ui-components-skills

为桌面应用中的日期选择实现 Syncfusion WinUI Calendar（SfCalendar）控件。在构建日期选择器、日期选择界面（单选、多选或范围）、月/年导航或日历视图时使用。本技能涵盖 Windows 桌面应用的日历配置、日期限制、禁用日期、周数、本地化和自定义。

S

syncfusion-winui-calendar-date-range-picker

syncfusion / winui-ui-components-skills

为桌面应用中的日期范围选择实现 Syncfusion WinUI CalendarDateRangePicker（SfCalendarDateRangePicker）控件。在构建日期范围选择器、范围选择日历或开始/结束日期输入界面时使用。本技能涵盖范围选择、预设范围、禁用日期、日期限制、周数、本地化以及 WinUI 应用的日历自定义。

S

syncfusion-winui-scheduler

syncfusion / winui-ui-components-skills

为桌面应用中的预约和日历管理实现 Syncfusion WinUI Scheduler（SfScheduler）控件。在 WinUI 中构建日程视图、预约预订系统或资源调度时使用。本技能涵盖视图类型（Day、Week、Month、Timeline）、预约管理、重复模式和拖放交互。

S

syncfusion-winui-shadow

syncfusion / winui-ui-components-skills

实现 Syncfusion WinUI Shadow（SfShadow）控件以为 UI 元素添加深度和高度效果的指南。在实现阴影效果、为按钮/图片/形状应用阴影、创建视觉深度和高度，或在 WinUI 3 中为 UI 分层添加投影时使用本技能。涵盖安装、基本用法以及阴影颜色、模糊、偏移和圆角半径等自定义选项，以实现材质设计深度效果。

S

syncfusion-winui-slider

syncfusion / winui-ui-components-skills

为桌面应用中的数值选择实现 Syncfusion WinUI Slider（SfSlider）控件。在处理滑块、范围选择器、数值选择器或交互式范围控件时使用。本技能涵盖 WinUI 应用的滑块配置、刻度、标签、工具提示、数值选择和自定义。

S

system-fit

tranz007 / ux-skills

判断某个 UX 需求应当复用、组合、扩展还是新建设计系统组件或模式。当设计师询问某处是否需要新组件、某个设计如何契合当前系统，或某个功能应对设计系统做出什么贡献时使用。

T

tailwindcss-spacing

fusengine / agents

在任一侧设置 margin 或 padding、使用 m-auto 居中、应用负边距，或用 space-x-*/space-y-* 设置子元素间距时使用。

T

tailwindcss-spacing

fusengine / claude-plugins

通过认知自动化和协作式 Agent 系统重新定义开发。

T

tinypng

membranedev / application-skills

TinyPNG 集成。管理数据、记录并自动化工作流。当用户需要与 TinyPNG 数据交互时使用。

U

ue5-ui-umg-slate

unrealxu / unrealengine5-skills

UE5.6-UE5.8 使用 UMG 与 Slate 集成的 UI 开发工作流。适用于涉及 Widget Blueprint 设置、Slate 宿主控件、生命周期绑定、输入与焦点处理、工具提示行为或视口钳制逻辑的请求。

U

ui-recording-timeline

rauchg / skills

把 UI 的屏幕录制（页面加载、导航、重定向/认证流程、应用启动）转化为可交互的绘制时间轴页面。你会得到全窗口视频、每个视觉绘制的带时间戳与时长的时间轴，以及视频上叠加的闪烁标记：实际绘制的部分（粉色）与仅发生移动的部分（蓝色）。当用户分享屏幕录制（.mp4/.mov）并要求绘制、帧或视觉变化的时间轴、胶片条、加载性能拆解、“what painted when”，或每个界面显示了多久时使用。

U

ui-ux-pro-max

prorise-cool / claude-code-multi-agent

UI/UX 设计智能，在设计页面时必须使用

U

uniapp-frontend

enze00 / uniapp-frontend-skills

使用 Vue 3 + TypeScript 进行 uni-app 跨平台前端开发。适用于：(1) 创建新的 uni-app 项目或页面，(2) 集成 UI 库（uView Plus、uni-ui、TuniaoUI），(3) 实现多主题设计系统，(4) 构建微信小程序、H5 及其他平台，(5) 设置 SCSS 主题与全局样式，(6) 配置 Vite 构建系统。包含可复用模板、组件模式，以及适用于任何 uni-app 项目的最佳实践。

U

user-grounding

tranz007 / ux-skills

当「设计是为谁而做」「用户的目标或情境」或「用户认知的可靠程度」存在实质性不确定时，将 UX 工作建立在真实用户和证据之上。当设计师询问这是为谁而做、persona 是否有用、需要什么研究、现有研究说了什么，或当某个决策依赖于关于用户的未经支持的假设时使用。仅当受众和需求已经明确时，不要因为 UX 任务涉及用户就激活。

U

using-backstage-ui

vinzscam / backstage-skills

在为 Backstage 前端插件编写 UI 时使用。涵盖 @backstage/ui (BUI) 组件库——布局、排版、表单、对话框、菜单、表格——以及使用 BUI 设计令牌的 CSS modules 样式，还有 Remix Icons。在导入 @backstage/ui 或创建任何前端组件时触发。

V

visual-docs-diagrams

lvtd-llc / skills

为开发者文档设计与审查视觉内容，包括截图、架构图、方框箭头图、流程图、泳道图、视频决策、无障碍性、性能、标注和视觉维护。适用于在技术文档中创建或审计图表、截图、视觉说明或媒体素材。