Skills

S

senior-frontend

borghei / claude-skills

面向 React、Next.js、TypeScript 和 Tailwind CSS 的前端开发。适用于构建 React 组件、优化 Next.js 性能、分析包大小、搭建项目脚手架、实现无障碍功能或审查前端代码。

S

starwind-ui

starwind-ui / skills

管理 Astro 和 React 项目中的 Starwind UI v3，包括初始化、迁移、添加、更新、搜索、调试、样式设置、主题配置，以及组合样式组件、Primitive 适配器或 Runtime 集成。适用于 Starwind 组件、starwind.config.json、Tailwind CSS v4 主题、V2 到 V3 迁移，或 Starwind CLI/MCP 相关工作。

S

syncfusion-angular-grid

syncfusion / angular-ui-components-skills

实现 Syncfusion Angular Grid 组件，用于功能丰富的数据表和网格。处理数据显示、排序、筛选、分组、聚合、编辑或导出时使用。此技能涵盖网格配置、CRUD 操作、虚拟滚动或无限滚动、层级网格、状态持久化，以及面向数据密集型应用的高级数据管理功能。

S

syncfusion-blazor-multicolumn-combobox

syncfusion / blazor-ui-components-skills

全面介绍如何实现 Syncfusion Blazor MultiColumn ComboBox 组件。在 Blazor 应用中，需要在下拉框中显示结构化数据并使用多列、筛选、选择、分页、虚拟化、分组和自定义选项时使用。适用于复杂数据结构和高级筛选场景。涵盖 Syncfusion.Blazor.MultiColumnComboBox 包中的所有 MultiColumn ComboBox 功能。

A

accessibility-audit

cuellarfr / design-skills

依据 WCAG 2.2 指南开展无障碍审计。评估页面、组件和流程是否符合 A、AA 和 AAA 级别要求。识别问题、评估严重程度、提供代码修复方案并生成审计报告。涵盖自动化测试、手动测试、键盘导航、屏幕阅读器兼容性、色彩对比度和语义化 HTML。

B

bunshin

athevon / genjutsu

召唤影分身：genjutsu 为整个网站或 Web 应用提供全规模流水线，可从零开始，也可进行全面重新设计。收集客户的真实素材，并行开展研究，由 Impeccable 主导方向、genjutsu 负责动效，通过并行 Agent 构建页面，然后持续进行修复、评审和冷静审视的艺术指导，直到只剩小问题、达到所选层级的轮次上限，或某轮没有修复任何问题。会先说明费用并询问两次。适用于 Web。需要能够启动子 Agent 的宿主。

C

canvas-design

alleneee / skill-agent

.png 和 .pdf 文档中使用设计理念创建精美的视觉艺术作品。当用户要求创建海报、艺术作品、设计或其他静态作品时，应使用此技能。创建原创视觉设计，不要复制现有艺术家的作品以避免侵犯版权。

F

flutter-duit-bdui

madteacher / mad-agents-skills

在 Flutter 应用中集成、修复、审查、迁移、测试或调试 Duit / flutter_duit 后端驱动 UI。任务提及 DUIT、flutter_duit、backend-driven UI、BDUI、server-driven UI、XDriver、DuitViewHost、DuitRegistry、HTTP 或 WebSocket 传输、自定义 Duit 小部件、组件、能力委托、编译时 DUIT 标志，或从后端渲染 JSON 布局时使用。

G

godot-adapt-desktop-to-mobile

thedivergentai / game-dev-agentic-skills

将桌面游戏移植到移动平台的专业模式，包括触控方案（虚拟摇杆、手势检测）、小屏幕 UI 缩放、移动 GPU 性能优化、电池续航管理和平台特定功能。创建移动版或跨平台移动构建时使用。触发关键词：TouchScreenButton、virtual_joystick、gesture_detector、InputEventScreenTouch、InputEventScreenDrag、mobile_optimization、battery_saving、adaptive_performance、MOBILE_ENABLED

H

hooked-model

pmprompt / claude-plugin-product-management

当用户提出“打造培养习惯的产品”“Hooked model”“触发、行动、奖励、投入”“创建有黏性的行为循环”或“设计习惯循环”等要求时使用。帮助设计能够让用户自发养成习惯的产品。Hooked Model（由 Nir Eyal 创建）解释了产品如何通过触发、行动、可变奖励和投入来培养习惯。

S

semantic-html

schalkneethling / webdev-agent-skills

编写周全、适用于所有用户的语义化 HTML。用于创建组件、页面结构或审查标记。强调优先使用原生 HTML 元素，而非 ARIA。将正确的文档结构和无障碍性视为基础，而非事后补充。

S

syncfusion-blazor-toolbar

syncfusion / blazor-ui-components-skills

实现 Syncfusion Blazor Toolbar（SfToolbar）组件，以创建交互式命令栏和工具栏。在使用带有按钮和图标的工具栏、命令栏或操作栏时使用。此技能涵盖支持溢出处理的响应式工具栏、项目配置和对齐、键盘导航、无障碍功能以及动态项目管理。

A

artifacts-builder

alleneee / skill-agent

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

B

brand-guidelines

alleneee / skill-agent

将 Anthropic 的官方品牌颜色和字体应用于适合采用 Anthropic 视觉风格的各类作品。适用于需要品牌颜色或风格指南、视觉排版或公司设计规范的场景。

G

godot-genre-card-game

thedivergentai / game-design-agentic-skills

数字卡牌游戏（CCG／卡组构筑游戏）专家级蓝图，涵盖卡牌数据结构（基于 Resource）、卡组管理（抽牌／弃牌／洗牌）、回合逻辑、手牌布局（弧形排列）、拖放 UI、效果结算（Command 模式）和视觉润色（godot-tweening、着色器）。适用于 CCG、卡组构筑游戏或战术卡牌游戏。触发关键词：card_game, deck_manager, card_data, hand_layout, drag_drop_cards, effect_resolution, command_pattern, draw_pile, discard_pile。

S

slide-deck

coreyhaines31 / makerskills

需要为 React/Next.js 幻灯片系统（${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/）起草、更新、转换或导出演示文稿时使用。使用现有基础组件（Eyebrow、Heading、Accent、Body、BulletList、Divider、TwoCol、GradientText）编写 TypeScript Slide[] 数组，提供 12 种循环使用的品牌渐变、可选的“我在哪里”背景说明区块以及演讲者备注。灵感来自 zarazhangrui/frontend-slides——叙事上“展示而非讲述”（提供 3 种角度供选择），并支持内容密度模式（演讲者主导或阅读优先）。有四种模式：new（根据简报起草）、update（修改现有内容并防止溢出）、ppt（将旧版 PPTX 转换为 React 演示文稿）、export（使用 Playwright 将现有 React 演示文稿快照导出为独立 HTML、PDF 或 Vercel URL，同时保留品牌样式）。触发词包括“/slide-deck”、“/slides new”、“/slides export”、“/slides update”、“/slides ppt”、“起草演示文稿”、“关于[主题]的演示文稿”、“关于[主题]的演讲”、“关于[主题]的主题演讲”、“面向[受众]的内部演示文稿”、“转换此 pptx”、“导出演示文稿”。

S

syncfusion-blazor-dashboard-layout

syncfusion / blazor-ui-components-skills

Syncfusion Blazor Dashboard Layout 组件的实现指南。构建包含可拖动或可调整大小的面板、状态持久化或响应式网格布局的仪表板界面时使用。涵盖面板定位、尺寸限制、拖放重排和自适应布局

S

syncfusion-blazor-menu-bar

syncfusion / blazor-ui-components-skills

使用 Syncfusion Blazor Menu Bar 组件实现导航菜单。使用此技能创建带有子菜单、图标、事件、动画和数据绑定的水平或垂直菜单。适用于在 Blazor 应用中构建专业的菜单栏。

T

theme-factory

alleneee / skill-agent

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

B

before-and-after

michaelshimeles / skills

截取网页或元素的更改前后截图，以供视觉比较。当用户说“截取前后对比”“截图比较”“视觉差异”“PR 截图”“比较新旧版本”，或需要记录 UI 变更时使用。接受两个 URL（file://、http://、https://）或两个图像路径。

B

brand-guidelines

davila7 / claude-code-templates

将 Anthropic 的官方品牌颜色和字体应用于适合采用 Anthropic 视觉风格的各类作品。适用于需要品牌颜色或风格指南、视觉排版或公司设计规范的场景。

C

conversion-rate-optimization

manojbajaj95 / claude-gtm-plugin

针对营销页面和潜在客户获取表单的转化率优化。用户希望提高主页、落地页、定价页、功能页、博客 CTA、联系表单、演示申请表单或活动页面的转化率时使用。产品引导使用 user-onboarding；生命周期邮件使用 marketing-automation；定价和付费墙使用 pricing-strategy；A/B 测试使用 ab-test-setup。

D

design-taste-frontend-v1

leonxlnx / taste-skill-classics

原版 taste-skill v1，供依赖其确切行为的项目使用。需选择启用：仅在按名称调用时运行

R

responsive-design-system

patricio0312rev / skills

使用 Tailwind CSS 实现响应式设计系统，包含移动优先断点、容器查询、流式排版和自适应布局。适用于用户提出“响应式设计”“移动优先”“断点”“流式排版”或“自适应布局”需求时。

S

syncfusion-blazor-stepper

syncfusion / blazor-ui-components-skills

为多步骤工作流实现 Syncfusion Blazor Stepper 组件。适用于创建分步导航 UI、向导、表单工作流或进度跟踪。涵盖 Blazor 应用中的分步导航、向导界面、步骤验证、动画、模板和 Stepper 自定义。

U

uniwind

pproenca / dot-skills

使用 Tailwind CSS 进行 React Native 样式设计的 Uniwind 最佳实践。编写、审查或重构使用 Uniwind 的 React Native 代码时使用。适用于涉及 Uniwind、className 样式、React Native 中的 Tailwind、NativeWind 迁移或主题设置的任务。

S

scientific-figure-making

chenliu-1996 / figures4papers

涵盖适用于学术论文、幻灯片和报告的可发表级 matplotlib 图表，包括柱状图、趋势图、散点图、热图和多面板布局，并遵循此代码库的统一样式、印刷/矢量导出规范，以及与 figures4papers 演示保持一致。用户使用 matplotlib 创建或定稿此类图表时使用。不适用于交互式仪表板或 Web 可视化（Plotly、Altair、Bokeh）、没有发表目标的纯探索性绘图、以 3D 或地理制图为主的工作，或以 Illustrator/Figma 为主的 инфографика 工作流。

S

syncfusion-blazor-context-menu

syncfusion / blazor-ui-components-skills

实现 Syncfusion Blazor ContextMenu 组件，用于构建右键菜单、上下文相关导航或弹出菜单系统。需要支持嵌套的分层菜单结构、数据绑定或自定义模板时使用。涵盖设置、自定义、事件和动态菜单管理。

S

syncfusion-blazor-media-query

syncfusion / blazor-ui-components-skills

使用 Media Query 组件创建响应式 Blazor 应用。当用户需要响应式布局、基于断点的渲染、适配屏幕尺寸、多设备支持，或需要根据设备类型有条件地渲染组件时触发。适用于构建可在手机、平板和桌面设备上运行的自适应 UI。

T

threejs-html

cesartevisual / threejs-skills

将 Three.js 与响应式 HTML、Next.js 或其他框架、滚动区段、叠加层和多个视图集成。

F

frontend-ui-animator

julianromli / ai-skills

为 Next.js + Tailwind + React 项目分析并实现有明确目的的 UI 动画。适用于用户要求添加动画、增强 UI 动效、为页面／组件制作动画或改善视觉反馈的情况。触发词：“add animations”“animate UI”“motion design”“hover effects”“scroll animations”“page transitions”“micro-interactions”。

在 React 项目中接入、生成、修改、联调或验收 HiUI 典型页与非典型页面时使用。适用于数据统计表、普通表格、树形表格、左树右表、数据可视化、异常反馈页、抽屉表单／详情、全页编辑／详情、不规范原型截图转规范页、老旧系统截图／URL／源码现代化转译，以及 host-integration、rules-only、legacy-host-compatible 等场景。

S

sketch-implement-design

sketch-hq / agents

Sketch 技能目录

S

syncfusion-blazor-breadcrumb

syncfusion / blazor-ui-components-skills

实现用于分层导航的 Syncfusion Blazor Breadcrumb（SfBreadcrumb）控件。构建面包屑导航、根据 URL 自动生成项目或管理动态导航序列时使用。此技能涵盖溢出模式、项目模板、图标自定义和响应式布局配置。

D

design

cognitedata / dune-skills

统一的 Aura 设计指南——涵盖组件和令牌、页面布局、UX 文案、表单和异步反馈，以及无障碍设计。适用于构建或设计面向客户的 UI、组织页面结构、撰写界面文本，或实现验证、加载、错误处理和无障碍功能。

F

frontend-design-system

akillness / jeo-skills

`design-system` 的兼容别名。当现有工作流、设置脚本或用户明确要求使用 `frontend-design-system` 时使用；常规 UI 系统、设计令牌、着陆页、仪表板和组件库任务应转交给 `design-system`。触发条件：旧版技能名称、frontend-design-system 别名、精确文件夹兼容性、兼容迁移的 UI 系统路由。

H

hierarchy-of-engagement

pmprompt / claude-plugin-product-management

当用户要求“定义我们的核心行动”、“北极星指标”、“累积收益”、“改进留存机制”、“参与度层级”或“Sarah Tavel 框架”时使用。帮助消费类产品识别推动长期留存的行动和收益。Sarah Tavel 在 Benchmark 创建的参与度层级框架，描绘了从核心行动到不断累积的损失的进阶过程。

M

marp-slide

davila7 / claude-code-templates

使用 7 种主题（default、minimal、colorful、dark、gradient、tech、business）创建专业的 Marp 演示幻灯片。适用于用户要求创建幻灯片、演示文稿或 Marp 文档的情况。支持自定义主题、图片布局，以及通过自动质量改进处理“让它更好看”的要求。

P

plain-writing

mobbin / skills

让 Mobbin 技能撰写的报告更像真人写作，并使用直白的界面用语。仅在 Mobbin 技能为用户撰写文本或用户按名称请求此技能时使用；不要用于 Mobbin 技能之外的写作。在不改变或增添事实的前提下，去除 AI 写作痕迹（长破折号、夸张措辞、设计术语、三段式表达和结尾客套语）

S

syncfusion-blazor-listview

syncfusion / blazor-ui-components-skills

Syncfusion Blazor ListView 组件实现指南。构建具有数据绑定、筛选、分组、虚拟滚动、选择模式和自定义模板的列表界面时使用。涵盖安装、模板、事件处理和高级模式。

S

syncfusion-blazor-timeline

syncfusion / blazor-ui-components-skills

构建按顺序显示事件和里程碑的交互式时间线组件。使用 SfTimeline 的对齐控件、自定义项目和事件处理程序。此技能涵盖在 Blazor 应用中创建可视化时间线所需的配置和自定义。

体验走查技能。适用于代码库、URL、截图三种输入，输出结构化体验问题报告，并同步生成本地 DOCX 报告。触发词：体验走查、UX review、交互走查、界面审查、体验问题。

3

3d-underwater-god-rays

mengto / skills

为 Three.js 场景添加体积感水下神圣光柱：沿每条视线以半分辨率推进一个漂移的涌浪场，使光柱汇聚于太阳，随相机产生视差并带有波动的焦散条纹，同时具备闪烁的水面底部、在波纹中摇曳的太阳，以及同样的光线在鱼群游过光束时形成的斑驳效果。适用于水下场景、从下方看到的海面、水族馆、礁石、海带林、潜水与沉船场景、鱼群、水中的阳光或光柱、焦散、“阳光穿过海洋的光线”，或背景上的水波纹。包含一个可复用模块和 Blue Hour 沙丁鱼群演示。

A

aws-architecture-diagram

awslabs / agent-plugins

使用官方 AWS4 图标库，将经过验证的 AWS 架构图生成为 draw.io XML。用户想创建、生成或设计 AWS 架构图、云基础设施图或系统设计可视化内容时，均使用此技能。根据 CloudFormation、CDK 或 Terraform 代码可视化现有基础设施的请求也会触发此技能。支持两种模式：分析现有代码库并自动生成图表，或从零开始进行交互式构思。导出 .drawio 文件，并可通过 draw.io 桌面 CLI 选择导出 PNG/SVG/PDF。

S

single-slide-ppt

huyansheng3 / ppt-skills

快速制作专业的单页 PowerPoint，用于概念可视化、对比、功能展示和决策框架。适用于用户需要制作“one-page PPT”“single slide presentation”“快速做个PPT”“做一页PPT”，或想以演示文稿形式呈现“之前/之后”“问题/解决方案”“功能网格”“流程”等概念。适合制作可视化摘要、产品提案、架构图或对比幻灯片。

S

specsfy-specialist-react-ui-components

promovaweb / specsfy

Escolher, compor e adaptar uma biblioteca de componentes React com Tailwind CSS para landing pages, marketing, navegação, formulários, dados, feedback e tipografia. Use quando uma interface React precisar de referências TSX reutilizáveis, exemplos visuais ou uma composição de página; use sempre em conjunto com a skill specsfy-specialist-ui-design, que governa hierarquia, layout, estados e coerência visual.

S

syncfusion-blazor-progress-bar

syncfusion / blazor-ui-components-skills

在 Blazor 应用中实现 Syncfusion Blazor ProgressBar 组件的指南。用于显示进度指示器、加载状态、任务完成状态或文件上传进度。涵盖线性和圆形进度条、不确定进度加载器、缓冲状态和进度跟踪。适用于在操作期间提供视觉反馈、显示完成百分比，以及任何需要可视化进度指示器的场景。

S

syncfusion-blazor-circular-gauge

syncfusion / blazor-ui-components-skills

实现 Syncfusion Blazor Circular Gauge（SfCircularGauge），用于径向数据可视化。创建速度计、转速表、KPI 仪表板或圆形进度指示器时使用。涵盖指针、量程、注释，以及 Blazor 应用中的圆形指标可视化。

W

wpds

automattic / agent-skills

构建采用 WordPress Design System (WPDS) 及其组件、设计令牌、模式等的 UI 时使用。

G

generative-ui

owl-listener / ai-design-skills

设计由 AI 动态生成 UI 组件的界面。

L

logo-designer

luongnv89 / skills

根据项目背景生成专业 SVG 徽标：7 种品牌变体和一个展示用 HTML 页面。用于产品标志、文字标志、图标和 favicon。不要用于仅需位图的徽标、插画或完整品牌指南。

P

publication

bergside / awesome-design-skills

适用于书籍、杂志和报告的印刷风格视觉语言，采用编辑网格和富有表现力的排版。

S

syncfusion-blazor-carousel

syncfusion / blazor-ui-components-skills

用于在图片库、商品展示和内容滑块中实现 Syncfusion Blazor Carousel 组件的指南。用户提到轮播组件、图片滑块、幻灯片、内容轮播、商品图库、轮播横幅、幻灯片切换，或需要以循环演示形式展示多个项目时使用。

B

bootstrap-parcel

twbs / bootstrap

使用 Parcel 在项目中引入并打包 Bootstrap 6 的 CSS 和 JavaScript。在用 Parcel 设置 Bootstrap、通过 Parcel 打包 Bootstrap 的 Sass 和 JS，或创建基于 Parcel 的 Bootstrap 项目时使用。

F

frontend-designer

jamesrochabrun / skills

运用设计系统最佳实践、现代 CSS 和与框架无关的模式，构建易于访问、响应式且高性能的前端组件。

S

screenshot

zernie / vigiles

使用预装的 Chromium 渲染本地网页/构建好的站点，并截取整页屏幕截图（桌面端 + 移动端）。当用户要求为 vigiles 着陆页（site/）、审计报告（report/）或任何本地 HTML/开发服务器截图、渲染或“看看效果”时使用。自动处理滚动显现问题（首屏以下的卡片截图为空白）。

E

emoji-sticker-generation

eachlabs / skills

使用 each::sense AI 生成自定义表情符号和贴纸包。根据照片创建个性化表情符号、表情包、动态贴纸，以及适用于 Slack、Discord、WhatsApp 等平台的表情符号集。

A

application

bergside / awesome-design-skills

采用紫色主题美学的应用仪表板，配有顶部导航栏、卡片式布局和优先考虑开发者的工作流。

M

minimalist

tasteskill / tasteskill

高端实用主义极简风格与编辑式 UI。对于视觉效果重要的网页任务，必须先自行生成设计图并深入分析，然后尽可能贴合设计实现网站。在 Codex 中，应优先使用大型、清晰且针对具体版块的图片，而非压缩的小图板；为版块或详情视图生成全新的独立图片，而不是裁剪旧图；避免敷衍、生成不足；避免层层嵌套卡片；并确保首屏区域简洁、宽敞、易读，在小型笔记本电脑上也清晰可见。

S

syncfusion-blazor-linear-gauge

syncfusion / blazor-ui-components-skills

在 Blazor 中实现 Syncfusion 线性仪表 (SfLinearGauge)，用于线性刻度的数据可视化。适用于创建温度计显示、进度指示器或测量可视化。此技能涵盖 Blazor 应用中的轴配置、指针、范围和仪表外观自定义。