Skills

面向 antd 6.x、Ant Design Pro 5/ProComponents、Ant Design X v2 和离线 `@ant-design/cli` 的决策指南。适用于组件选择、主题/令牌、SSR、无障碍、性能、路由/访问控制/CRUD、AI/聊天 UI 模式、本地 API 查询、调试、迁移和用法分析。

A

apple-swiftui

fandhe-ai / agent-reference-skills

Apple SwiftUI 声明式 UI 框架参考。View、VStack、HStack、ZStack、List、NavigationStack、TabView、toolbar、State、Binding、Bindable、Environment、EnvironmentObject、sheet、fullScreenCover、modifier、animation、Animation、withAnimation、Transition、matchedGeometryEffect、PhaseAnimator、KeyframeAnimator、swipeActions、reorderable、AsyncImage、DocumentGroup、Document、Liquid Glass、支持 iPhone Duo（ArrangementView、ReservedRegion、DeviceHinge）。

B

build-daily-inspiration-sites

akillness / jeo-skills

使用 Sites 将已完成的每日 UI 灵感采集转化为恰好五个原创落地页，每个页面对应一个独立的 Codex 任务。用户要求将每日灵感参考、包含五项的 UI 提示词包或带日期的 `*-ui-inspiration-capture` 文章转化为不同的 HTML 落地页，并替换来源品牌、名称、文案、人物、数字、价格、宣传内容和图像时使用。

B

builderio

membranedev / application-skills

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

B

building-html-canvases

posthog / skills

使用语义化 HTML、CSS 和直接的浏览器 API 编写 PostHog canvas——文档、文章、生成式图形、2D canvas 与 WebGL 体验，以及 React 组件无法带来有用结构的专注实验。在 building-canvases 将 canvas 请求路由到纯 HTML/浏览器 API 实现之后使用。涵盖当前运行时所需的薄组件包装器、不使用 Quill 的样式与主题、绘图表面，以及动画/清理模式。

C

cogover-fe

stringeecom / cogover-fe-skills

Cogover 前端 UI 套件（组件、表单、hooks、设计 token）、提交规范、i18n、单元测试。在编写/审查 UI 代码、创建提交、翻译文本或编写单元测试时使用。

D

daily-ui-inspiration-capture

akillness / jeo-skills

创建定期的每日 UI 灵感采集。当用户要求运行、刷新、打包或验证带日期的 UI 灵感包时使用，尤其适用于 `articles/YYYY-MM-DD-ui-inspiration-capture/` 输出、Framer/Dribbble 落地页灵感、动态研究截图/视频、AI 构建器提示词、重复项检查，或将项目运行手册转化为可重复工作流。

D

deno-frontend

midudev / autoskills

在使用 Fresh 框架、在 Fresh 中创建路由或 handler、用 Preact 构建 Web UI，或在 Deno 中添加 Tailwind CSS 时使用。涵盖 Fresh 2.x 项目结构、路由 handler、islands、createDefine、PageProps、context 模式，以及 Fresh 1.x 到 2.x 的迁移。对任何与 Fresh 相关的问题都必不可少。

D

design-critique

mohitagw15856 / pm-claude-skills

使用 UX 框架对任何设计给出结构化、建设性的反馈。当被要求评审设计、审查 UI、对 Figma 文件或线框图给出反馈、评估用户流程，或依据 UX 原则评估设计时使用。产出可执行的评审意见，应用 JTBD（Jobs-to-be-Done）、格式塔原则与可用性启发式，并给出按优先级排序的问题与具体建议。

D

design-distinctive-ui

bugroo / design-distinctive-ui

设计、构建、审计、重新设计、研究并打磨具有鲜明特色、可用于生产环境的 Web 界面，避免通用的 AI 美学。适用于落地页、网站、产品 UI、仪表板、作品集、前端组件、HTML/CSS/JS、React、Next.js、Vue、Svelte、设计系统工作、视觉改版、UI 评审、无障碍审查、响应式加固，或去除 AI 垃圾风格的需求。

D

design-theory

abhinavbwj / skills-architects

建筑运动、设计哲学、批判理论、先例分析和构成原则，为设计推理提供依据

D

dynamic-themes-with-codemirror

rodydavis / skills

学习如何使用 CodeMirror 创建 Lit Web Component，并利用 Material Design 的颜色工具动态换肤，打造可自定义的代码编辑体验。

E

edit-figma-design

warpdotdev / figma-skills

使用 Figma MCP 创作工具，直接根据书面的产品或 UI 描述创建或更新 Figma 设计。当用户希望根据文字在 Figma 中设计 mockup、线框图、页面、组件、流程或概念，或希望根据文字反馈迭代已有的 Figma 文件时使用。尽管名称如此，本技能可以从新的空白文件开始，也可以编辑已有文件。不要用于将运行中的页面捕获为 Figma 的捕获类工作流；这类请使用 `figma-generate-design`，而代码实现请求请使用 `implement-design`。需要连接 Figma MCP 服务。

E

elite-layouts

rshvr / elite-web-design

用于高端 Web 体验的现代 CSS 布局模式。适用于以下问题：便当网格、横向滚动区块、粘性/视差布局、容器查询、CSS 网格、非对称布局、杂志式布局、响应式网格系统、scroll-snap、编辑式布局、全出血网格，或布局与动画的整合。间距令牌与容器模式请参考 elite-design-core。

E

excalidraw-visuals

aiagentwithdhruv / skills

当有人要求手绘风格视觉、PNG 图片、渲染图表、可视化讲解，或说“excalidraw image”或“excalidraw visual”时使用。这会生成 PNG 图片，而非可编辑文件。

F

figma-design-system-sync

sergekostenchuk / ui-ux-agent-skill-system

在 Figma 与代码之间同步和审计设计系统契约。当用户询问 Figma Variables、样式、token、组件库、变体、Code Connect、效果样式、命名漂移、token 导出/导入、库治理，或在 UI/UX skill 体系下保持实现与 Figma 设计系统一致时使用此 skill。

F

figma-variables-tokens-generator

shanmus4 / figma-variables-tokens-generator

通过对话提示词即时生成一套完整连通的设计令牌系统。支持从简单的单层扁平架构，到 2/3 层系统（基础层、带浅色/深色模式的语义层、组件颜色），直至企业级 4 层配置（基础层、主题、语义、组件颜色 + 可选集合）。AI 将使用专用插件（[Variables Tokens Collections Importer](https://www.figma.com/community/plugin/1619733963699677957)）即时、干净地生成你的所有变量。查看完整文档与仓库了解更多：https://github.com/Shanmus4/figma-variables-tokens-generator。当用户要求创建 Figma 变量、设计令牌、设计系统，"Figma token export"、"variables for Figma"，或任何将颜色/间距/排版设置为 Figma 变量的请求时触发。

F

flutter-infinite-canvas

rodydavis / skills

学习如何使用 InteractiveViewer 和 CustomMultiChildLayout 在 Flutter 中构建无限、多点触控的画布，打造灵活且可交互的用户体验。

F

frontend-design

hitbullets / codex-skills

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

G

gbro-cover-design

pyang5166 / gbro-cover-design

公众号/小红书封面设计。固定 3:4 竖版，10 种构图风格可选，真人出镜，生成可直接用于图片生成模型的提示词。支持多参考图：图 1 固定为人脸，图 2 起为 UI 截图、产品图等素材。关键词：封面设计、提示词生成、公众号封面、小红书封面。

G

gemini-image-generator

ckorhonen / claude-skills

使用 Google 的 Gemini API 生成图像。适用于根据文本提示词创建图像、编辑现有图像，或组合参考图像以生成 AI 视觉内容。

G

github-social

scottwater / skills

生成 1280x640 的 GitHub 仓库社交预览（Open Graph）图片，并将其链接放在 README 顶部。

G

gpt-taste

julianromli / ai-skills

精英 UX/UI 与高级 GSAP 动效工程师。采用 Python 驱动的真随机化实现布局变化，严格的 AIDA 页面结构，宽泛的编辑排版（禁止 6 行换行），无缝网格布局，严格的 GSAP ScrollTriggers（钉住、堆叠、滚动动画），内联微图像，以及大量的分区间距。

H

hig-components-content

sickn33 / agentic-awesome-skills

Apple 人机界面指南中关于内容展示组件的部分。

H

html

eliasstravik / skills

html 技能负责创建和修订可长期留存、独立存在的 HTML 产物：一个完整自包含的 index.html，保存在指定或生成的产物目录中，具备内联依赖、可访问的结构、loopback 服务和精确文件校验。当用户要求创建、构建、将内容或数据转化为、保存、修订或更新“可长期留存 HTML 产物”、“单文件仪表盘”、“单页本地产物”或具名 HTML 产物时，或明确说“use /html”或“activate the HTML skill”时触发。在以下情况不触发：将 HTML 集成到 React 或 Next.js 路由中、审查或解释 HTML 或无障碍、对现有页面进行基于浏览器的 QA、将 Figma 设计转化为可复用组件，或仅仅提供现有的 dist 目录。

I

icp-website-audit

gooseworks-ai / goose-skills

以 ICP 视角进行端到端网站审计。构建合成人物画像（若尚不存在），对客户网站进行结构化评分卡审查，然后与头部竞品进行正面对比。产出一份统一报告，包含人物画像反馈、竞争定位和按优先级排序的建议。完整的"我们的买家实际如何体验我们的网站，与竞品相比如何？"工作流。

I

image-forge

tdimino / claude-code-minoan

使用 ImageMagick 7、sips、transparent-background 和 Pillow 精确编辑图像——并智能路由到 AI 语义编辑（Gemini/nano-banana-pro）以进行内容感知操作。涵盖裁剪、缩放、合成、注释、格式转换、颜色调整、背景移除、批处理和拼贴创建。触发词为图像编辑、裁剪、缩放、合成、注释、移除背景、格式转换。

在使用 Ink 通过基于 Flexbox 的定位和样式创建 CLI 应用的终端布局时使用。

K

kwc-shoelace-react

kingdee / kwc-skills

仅适用于非 KWC 工程的通用 React 项目。KWC 工程需求必须交由 kwc-project-scaffold。

页面布局和网格系统设计专家

麦肯锡咨询风格的多页 HTML 演示文稿生成器。创建数据丰富、视觉吸引的幻灯片，包含严谨调研、SVG 图表和规范的来源引用。触发词：McKinsey、咨询 deck、演示文稿、PPT、幻灯片、数据可视化、商业演示、市场分析幻灯片。

O

octopus-ui-ux-design

nyldn / claude-octopus

为新界面设计 UI/UX 系统，包括风格指南、配色方案、字体排版和组件规范

O

open-design-game-ui-takeover

akillness / jeo-skills

将已批准的 Open Design 产物（游戏 UI、VFX、技能、RIG、敌人/Boss）接管到 Darkbone Archer 中，且不降低运行时性能。在 Codex 需要分析、移植、集成或审查 Open Design 独立件时使用；应用响应式的 Home、Map Select、Talent、Mask、Fusion、Victory 或结算设计；将 Open Design VFX/RIG 实验室移植到 Phaser；保留 mockup 中省略的现有动画；或在合并前证明当前运行时、独立件与集成运行时之间的保真度。

O

openpress-diagram-drawing

quan0715 / open-press

在绘制或修改 open-press 文档图表时使用，尤其是概念图、对比图、流程状态、数据结构节点、指针、箭头、前后状态、链表、栈、队列、树或内存关系图。

P

paper-2-web

ovachiever / droid-tings

将学术论文转换为宣传和展示形式，包括交互式网站（Paper2Web）、演示视频（Paper2Video）和会议海报（Paper2Poster）。适用于论文传播、会议准备、创建可交互探索的学术主页、生成视频摘要，或从 LaTeX 或 PDF 来源制作可直接印刷的海报。

P

pencil-skill

de-novo / pencil-skill

以编程方式创建和编辑 Pencil（.pen）设计文件。生成基于 JSON 的 .pen 文件形式的 UI 设计，包含主题、变量、组件和布局。内置命令行工具，无需 Pencil 桌面应用即可读取、搜索、编辑和校验 .pen 文件。需要 Node.js 18+。Schema 版本 2.8。

P

progressive-disclosure

flpbalada / my-opencode-config

通过逐步揭示信息来降低复杂度。适用于设计新手引导、复杂表单、功能繁多的界面，或任何一次性展示全部内容会让用户不堪重负的体验。

R

radix-ui

dralgorhythm / claude-agentic-framework

Radix UI 原语模式。适用于构建可访问、无样式的 UI 组件，如对话框、下拉菜单、工具提示、标签页和选择器。涵盖 Tailwind 样式、键盘导航、动画与 portal 管理。

R

remotion-overlay

phamthanhnghia / remotion-agent-skills

Remotion 的图形叠加工作流：在已有素材上添加设计好的信息卡、徽章和图形。适用于视频标注、素材上的下三分之一字幕条、标注框和图形增强。

S

scene-to-art-lab

n1ko724 / scene-to-art-lab

把用户提供的照片转化为原创的竖版 3:4 艺术指导海报，风格可为水彩、波普艺术丝网印、表现主义绘画、水墨、凸版印刷、编辑式超现实主义或受控的混合风格。用于用户要求把真实场景、人像、物体、交通工具、风景、建筑或旅行照片重新诠释为创意视觉艺术、展览海报、编辑海报、主视觉，或一套统一的海报系列，并配以源自素材的字体排版、编辑式辅助文案、图像与标题的互扣，以及有选择的身份特征保留。

S

senior-frontend

ovachiever / droid-tings

使用 ReactJS、NextJS、TypeScript 和 Tailwind CSS 构建现代高性能 Web 应用的综合前端开发技能。涵盖组件脚手架、性能优化、包体积分析和 UI 最佳实践。适用于开发前端功能、优化性能、实现 UI／UX 设计、管理状态或审查前端代码时。

S

shadcn-theming

fusengine / agents

在定义或审查 shadcn/ui 设计令牌、OKLCH 颜色或深色/浅色模式 CSS 变量时使用。

S

shadcn-theming

fusengine / claude-plugins

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

构建和编辑 Smithery 主页应用——一个位于 ~/.smithery/homepage 的 TanStack Start + shadcn/ui Web 应用，通过 Smithery Connect API 连接 MCP 服务。只要用户想创建、修改或为 Smithery 主页添加功能，构建展示 MCP 工具数据（Linear issues、Gmail、Notion 等）的页面，或询问编辑 ~/.smithery/homepage 中的任何内容，就使用此技能。当出现“add a page to the homepage”、“show my Linear issues on the homepage”、“update the homepage UI”等请求，或任何涉及 ~/.smithery/homepage 项目的任务时也会触发。

S

space-wechat-layout

spacezephyr / creator-buddy

微信公众号排版。当用户要求把文章、Markdown 草稿、长文帖子、随笔、newsletter、书评或中文文章转换成可直接用于微信公众号的 HTML 排版，并带有本地预览、可选择的 Claude/OpenAI/Google 风格样式，以及一个复制富 HTML 以便粘贴到微信编辑器的按钮时使用。

S

stitch-react-components

gabelul / stitch-kit

将 Stitch 屏幕、本地 HTML 文件或 URL 转换为模块化的 Vite + React 组件 —— TypeScript、主题映射的 Tailwind、通过 CSS 变量实现深色模式，以及清晰的组件架构。适用于没有 App Router 的 Vite/React 应用。对于 Next.js 15 App Router，请改用 stitch-nextjs-components。只有 Stitch 路由需要 API key。

S

swiftui-animations

tryhuset / agent-skills

在 SwiftUI iOS/macOS 应用中构建、调试或完善动画时使用。涵盖隐式/显式动画、过渡、手势驱动交互，以及 PhaseAnimator 和 KeyframeAnimator 等现代 iOS 17+ API。

S

syncfusion-flutter-cartesian-charts

syncfusion / flutter-ui-components-skills

在 Flutter 应用中实现 Syncfusion Flutter Cartesian Charts（SfCartesianChart），支持多种 2D 图表类型。适用于折线图、柱状图、条形图、面积图、样条图、散点图、气泡图、金融图、堆叠图和直方图。此技能涵盖坐标轴类型（NumericAxis、CategoryAxis、DateTimeAxis）、缩放与平移、工具提示、轨迹球、图例、注释、技术指标、趋势线以及图表导出。

S

syncfusion-javascript-dashboard-layout

syncfusion / javascript-ui-controls-skills

构建具有拖放面板、动态调整大小和状态持久化的响应式仪表盘布局。引导用户实现 DashboardLayout 控件，具备面板管理、拖动、调整大小、浮动和持久化功能。包括事件处理、动态添加/移除面板，以及全面的 API 参考。

S

syncfusion-javascript-splitter

syncfusion / javascript-ui-controls-skills

实现并配置 Syncfusion TypeScript Splitter 控件，用于创建响应式多窗格界面。在实现窗格配置、方向更改、调整大小、折叠/展开功能以及内容加载时使用本技能。本技能涵盖嵌套布局、样式自定义，以及 Splitter 组件的所有 API 属性、方法和事件。

在处理 Tailwind CSS 工具类以进行布局、间距、排版、颜色和视觉效果时使用。涵盖工具类优先的 CSS 模式和类组合。

T

taste-design-system

madebymustafa / design-taste

为 Agent 工作流构建设计系统并进行审计：三级设计令牌（基础 → 语义 → 组件）、W3C DTCG 令牌格式、间距和字号比例、色阶、组件结构、文档、治理和采用指标。创建令牌、搭建组件库脚手架，或审计现有系统的一致性时使用。与 design-taste 核心技能搭配。

T

taste-motion

madebymustafa / design-taste

为 Agent 构建的界面打造动效：时长与缓动令牌、入场编排、悬停／激活微交互、滚动触发展示、布局过渡，以及遵循 prefers-reduced-motion。避免 AI 动效的两大问题：完全没有动效，或所有内容永不停歇地动。与 design-taste 核心技能搭配使用。

T

taste-typography

madebymustafa / design-taste

面向 Agent 构建界面的字体设计技巧：字体搭配规则、流式字号比例、行长、基线节奏、字重规范、可读性下限，以及多数 AI 生成页面显得廉价的字体排版原因。生成或审查任何含文本的 UI 时使用，并与 design-taste 核心技能搭配。

T

taste-web-performance

madebymustafa / design-taste

面向 Agent 构建页面的 Core Web Vitals 规范：LCP、CLS、INP 预算，不造成布局偏移的字体加载、不臃肿的图像，以及不会阻塞的 CSS/JS。设计精良的页面如果加载得像模板一样，就只完成了一半。生成或审计任何网页或组件时使用。与 design-taste 核心技能叠加使用。

T

toss-tech-design

ilbie / toss-design-skill

当需要把 129 篇文章的 toss.tech 设计总结中的 Toss Tech Design 原则应用于复杂产品流程、研究运营、内部工具、UX 文案、无障碍或品牌工作，且伴随高认知负荷、重复性手工劳动、信任问题或包容性缺口时使用。

U

ui-ux-pro-max

cin12211 / orca-q

UI/UX 设计智能。50 种风格、21 套配色、50 组字体搭配、20 种图表、9 个技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）。动作：plan、build、create、design、implement、review、fix、improve、optimize、enhance、refactor、check UI/UX 代码。项目：网站、落地页、仪表盘、管理后台、电商、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表。风格：玻璃拟态、黏土拟态、极简主义、粗野主义、新拟态、便当网格、深色模式、响应式、拟物化、扁平设计。主题：配色、无障碍、动画、布局、排版、字体搭配、间距、悬停、阴影、渐变。

U

ui-ux-pro-max

terminalskills / skills

UI UX Pro Max 是面向 AI 编码 Agent 的开源设计智能包：一个本地可搜索的数据库，涵盖 UI 风格、配色方案、字体搭配、图表类型和 UX 指南，另有一个生成器可将产品描述转化为设计系统。适用于用户要求安装或使用 UI UX Pro Max、生成设计系统、选择风格、配色或字体、改进 UX、重新设计界面、审查 UI 模式、改进用户流程、设计表单、构建导航，或让界面更直观精致。

U

ultra11y

maxgfr / ultra11y

用于依据 WCAG 2.2 AA 或 RGAA 等国家/地区标准审计仓库、站点或页面；生成带日期的符合性报告、准则网格、PRD 待办列表或工单；编写无障碍标记；修复无障碍问题；或搭建仓库门禁与渲染 DOM 采集流水线。内置的免安装引擎运行 93 项与成功准则绑定的静态检查，同时由 Agent 裁定判断类准则，并将渲染类准则路由到浏览器扫描；check/verify 会拒绝凭空编造的不符合项。若审查范围仅限某个 diff、分支或 PR，请改用 `review-a11y`。

U

ux-persona

djalmajr / skills

代入一个用户角色，通过 UI 走完 Web 应用的一条使用流程（从流程的入口点开始，绝不输入内部 URL），判断这段旅程是否可用并记录可操作的发现。以该流程为参数。当你想 "test as a user"、"check if it's usable"、"walk flow X as a persona"、"validate the usability of a screen/journey"，或使用 Webwright 风格可回放的截图/日志证据运行一条流程时使用。