Skills

A

apexcharts

apexcharts / apexcharts-skill

用于构建 ApexCharts.js 图表和数据可视化的 AI 技能（目标版本 v8）。用户要求使用 ApexCharts 创建、配置或排查任何图表时使用，涵盖折线图、面积图、柱状图、饼图、圆环图、radialBar、散点图、气泡图、热力图、K 线图、箱线图、小提琴图、直方图、雷达图、极区图、rangeBar、rangeArea、树图、漏斗图、金字塔图、仪表图、旭日图、冰柱图、unit、waffle、瀑布图、哑铃图、流图和雨云图。涵盖正确的数据格式、生命周期、格式化器、tree-shaking、SSR 及功能平台（插件、canvas 渲染器、自定义系列、小多图、撤销/重做、可分享视图、主题、交叉筛选、注释创作、故事板、流式处理、下钻、突出显示筛选）。了解 v8 默认包中包含的图表类型和功能，以及需要显式导入或完整包的内容。在 React / Vue / Angular 项目中，优先使用框架封装包（`react-apexcharts`、`vue3-apexcharts`、`ng-apexcharts`），而非核心 API。

A

atutun-xhs-cover

panggungunvibe / atutun-xhs-cover

阿囤囤风格小红书封面提示词生成。用于 AI 工具、效率方法、产品测评、教程部署、个人经验、播客推荐、职场认知类内容的爆款竖版封面设计。特点是真人出镜、超大柔和浅黄（#FDFFA7）/白色中文标题、粗黑描边、人物抠图描边、绿色勾选清单、emoji 贴纸、箭头标注、高对比高密度构图。关键词：小红书封面、爆款封面、阿囤囤风格、AI 教程封面、产品测评封面、封面提示词。

B

banana-cli

anionex / banana-slides

通过 Banana Slides API 创建、管理和导出 AI 生成演示文稿的命令行工具。适用于用户要求：(1) 根据想法、大纲或描述生成 PPT/演示文稿/幻灯片，(2) 将项目导出为 PPTX、PDF 或图片，(3) 批量生成多个演示文稿，(4) 以编程方式管理项目、页面、素材或模板，(5) 改造/重新设计现有 PPT 或 PDF，(6) 用自然语言编辑幻灯片图片。

B

bevy-a11y

chrisgliddon / bevy-skills

在设计或审查 Bevy 0.19 中高标准的电子游戏无障碍功能、集成屏幕阅读器和焦点导航、支持自适应控制器与完整按键重映射、实现字幕或音频描述、检查对比度和运动安全，或构建残障玩家测试证据时使用。

B

bootstrap-icons

sjnims / bootstrap-expert

当用户询问 Bootstrap Icons、Bootstrap 图标库、如何安装 Bootstrap Icons、如何使用 Bootstrap Icons、Bootstrap 图标字体、Bootstrap 图标 SVG、Bootstrap 图标 sprite、Bootstrap Icons CDN、Bootstrap Icons npm、Bootstrap Icons Composer、PHP Bootstrap Icons、Laravel 图标、外部图片图标、img 标签图标、CSS 背景图标、CSS mask 图标、如何设置 Bootstrap 图标样式、Bootstrap 图标尺寸、Bootstrap 图标颜色、Bootstrap 图标无障碍，或需要在 Bootstrap 项目中使用图标时，应使用此技能。

B

builder-ux

bbeierle12 / skill-mcp-claude

用于 Three.js 建造类游戏的建造者用户体验系统。适用于实现预制体/蓝图保存与加载、撤销/重做命令模式、幽灵预览放置、多选或复制/粘贴建造机制的场景。涵盖让建造操作感觉灵敏直观的 UX 层。

C

canvas-design

bbeierle12 / skill-mcp-claude

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

C

color-theory

flitzrrr / frontend-design-skills

面向 Web 项目的色彩模型、调色板、对比度、色彩心理学、色彩调和与深色模式。定义了 60-30-10 规则、语义化配色、设计 token 和 WCAG 对比度要求。

C

component-preview

civitai / civitai

使用 Ladle 以真实的 Mantine + Tailwind 样式预览 React 组件。适用于修改 UI 组件、修复视觉缺陷，或用户想查看某个组件的样子时。创建 Ladle stories，在深色/浅色模式下截图，并呈现以供审阅。UI 变更后可主动使用。

D

dark-mode-testing

revitalb-port / skills-registry-demo

在 Cursor 浏览器中切换浅色和深色模式，为两种状态截图，并标记缺失的令牌映射或对比度问题

D

data-to-ui

dralgorhythm / claude-agentic-framework

Data-to-UI 流水线模式。在将 JSON 数据转换为 React 组件、从 schema 创建 TypeScript 类型、构建派生类型或创建数据工具时使用。

D

design-compare

artemnovichkov / skills

将 Figma 设计稿与实现截图进行对比，识别布局、字体、颜色和尺寸方面的差异。生成结构化视觉审查表，以及带滑动和并排模式的交互式 HTML 对比页面。当用户要求将设计与预览对比、将 Figma 与截图对比、检查设计实现，或同时提供 Figma URL 和截图时使用。

D

design-craft

kipperacademy / skillpper

有主张的产品设计 skill，用于构建、评审、打磨和迭代落地页、应用、仪表盘、AI 产品、设计系统和品牌触点。先 UX 与理解，再克制（三种字号、删除装饰），然后基础，最后战术技艺 —— 层级、间距系统、字号阶梯、HSL 调色板、阴影、收尾细节。由 20 个 YC Design Review 视频（Linear、Stripe、Cursor、Framer）以及 Refactoring UI 一书提炼而成。只要用户要求设计、改版、批评或打磨任何面向用户的东西时使用："make it look better/more professional/trustworthy"、去 AI/vibe-coded 感、修落地页或定价页、提升转化、设计 AI 功能或 Agent UI、建立 token 或设计系统、评审 URL/截图/原型。战术性 UI 问题也触发 —— 间距别扭、视觉层级、选色、字体排印、空状态、Tailwind/CSS 样式 —— 即使没有"设计"这个词。不适用于纯后端/DevOps 工作。

D

direct-mail-strategist

ckorhonen / claude-skills

直邮营销专家策略师，负责撰写有说服力的文案、设计高转化率的邮件物料，并制定衡量策略。适用于规划直邮营销活动、撰写邮件文案、设计明信片/信件，或通过增量提升分析衡量营销活动效果。

D

dxe

kemiljk / skills

从设计工程角度审查仓库或 UI 界面。用于 DXE 检查或广泛的界面审查；仅在有人要求时才修复，并依据证据加载专家指导。

F

flutter-fix-layout-issues

dhruvanbhalara / skills

在修复 RenderFlex 溢出错误、无界高度和宽度异常，或 ParentDataWidget 布局冲突时使用。

F

flutter-improving-accessibility

thesimpleapp / flutter-app-skills

让 Flutter UI 支持 TalkBack、VoiceOver、JAWS/NVDA、大号文本、高对比度和减少动态效果。涵盖 Semantics、MergeSemantics、ExcludeSemantics、BlockSemantics、48×48 点击目标、仅图标的工具提示、TextScaler、MediaQuery a11y *Of getter、排序键与键盘焦点、对比度和指南测试。当用户提到无障碍、a11y、semantics、TalkBack、VoiceOver、屏幕阅读器、点击目标、工具提示、文本缩放、高对比度、减少动态效果，或运行 /flutter-improving-accessibility 时使用。

F

frame-data-rollup

nexu-io / html-video

原生的 Remotion 数据帧——柱条通过弹簧物理从零按真实数据增长，同时数字同步从 0 滚动到目标值。数字鲜活起来，这是静态 HTML 图表做不到的。

F

frontend-orchestrator

sanky369 / vibe-building-skills

诊断代码库的前端设计成熟度，并按正确的顺序编排前端设计技能。当用户提出宽泛或模糊的设计请求时使用——'让这个看起来更好'、'润色 UI'、'这感觉像个 MVP'、'我们的前端一团糟'、'设计该从哪里开始'、'让它显得专业'、'规划一个设计系统'——或者当请求横跨多个设计关注点且不清楚适用哪一个单一技能时。通过检查实际代码（Tailwind 配置、CSS 变量、组件结构、hex 代码漂移）评估成熟度，选择五条实现路径之一，并产出设计路线图：一份有证据支撑的成熟度诊断，加上有序的技能序列及每一步传递给下一步的产物。如果请求明确对应单一关注点（仅间距、仅颜色、仅字体），跳过此技能并直接调用该技能。

H

html-ppt-zhangzara-8-bit-orbit

nexu-io / open-design

玩家打造复古街机收藏的历程：痴迷、搜寻，以及这些机器逐渐承载的意义。为朋友和爱好者社群打造的高质量决策型故事演示文稿

H

html-ppt-zhangzara-cartesian

nexu-io / open-design

一篇关于地方最低工资上涨对就业影响的经济学毕业论文 — 包含识别策略、证据与局限性。打造为面向论文委员会、可用于决策的课程答辩幻灯片。

H

html-ppt-zhangzara-cobalt-grid

nexu-io / open-design

为不断增长的客户提出 Open Design 续约与席位扩展的商业论证：实现的价值、使用证明与扩展 ROI。打造为面向拥护者与财务审批人、可用于决策的 B2B 销售幻灯片。

H

html-ppt-zhangzara-coral

nexu-io / open-design

Coral — 近黑底色上的奶油色与珊瑚色，搭配超大号 Bebas Neue。适用于任何需要温暖图形感与编辑风格的内容：时尚、美妆、健身、餐饮、生活方式品牌、代理机构资质介绍。

H

html-ppt-zhangzara-creative-mode

nexu-io / open-design

为户外品牌揭示品牌视觉识别系统 — 标志、色彩、字体以及保持一致性所遵循的规则。打造为面向品牌团队与客户、可用于决策的设计工艺幻灯片。

H

html-ppt-zhangzara-daisy-days

nexu-io / open-design

Daisy Days —— 明快柔和的粉彩演示文稿，配手绘雏菊、星星与彩虹。友好、柔和、温暖。适合任何需要友好、柔和、愉悦感的场景：教育内容、儿童与家庭、健康项目、社区工作坊、手工艺 / 插画类创作者作品集。

H

html-ppt-zhangzara-editorial-tri-tone

nexu-io / open-design

一次文化杂志改版中的字体与色彩系统 —— 网格、三色调色板与版式套件。为编辑与设计团队打造，作为决策级设计工艺演示文稿。

H

html-ppt-zhangzara-long-table

nexu-io / open-design

OpenDesign 的单位经济模型与 BYOK 成本模型：假设、敏感性，以及它为何可扩展。为 CFO 与投资者打造，作为决策级数据与财务演示文稿。

H

html-ppt-zhangzara-neo-grid-bold

nexu-io / open-design

Neo-Grid Bold —— 编辑式新粗野主义，在米白纸张上使用单一霓虹黄强调色。适合任何需要自信与编辑图形感的场景：设计主导的提案、品牌项目、创始人演讲、大会主题演讲。

H

html-ppt-zhangzara-peoples-platform

nexu-io / open-design

People's Platform（Block & Bold）—— 行动主义海报式能量：奶油底色上的蓝、橙、红，配 Alfa Slab + Caveat Brush。适合任何需要诚实、响亮、图形感的场景：文化评论、宣言、公民与社区演示文稿、设计演讲、活动提案。

H

html-ppt-zhangzara-pink-script

nexu-io / open-design

Pink Script —— After Hours —— 黑色画布、亮粉色强调色、珍珠奶油纸张、Instrument Serif 标题：深夜编辑式奢华。适合任何需要夜间感、刻意感与些许奢华感的场景：时尚品牌演示文稿、创作者个人品牌、夜生活 / 夜店 / 烈酒发布、奢侈品产品揭幕、编辑特写。

H

html-ppt-zhangzara-raw-grid

nexu-io / open-design

Raw Grid —— 新粗野主义演示文稿，粗边框、偏移阴影，配粉色 / 鼠尾草绿 / 墨色调色板。适合任何需要直接与图形自信感的场景：创始人提案、加速器演示、品牌演示文稿、独立产品发布、创作者作品集。

H

html-ppt-zhangzara-sakura-chroma

nexu-io / open-design

Sakura Chroma —— 复古日式磁带包装美学：奶油纸张、斜向彩虹色带、窄体粗体字、JIS 风格规格复选框。适合任何需要像复古日式磁带包装或 TDK / Sony / Sakura Color 产品目录的场景：独立硬件品牌演示文稿、音乐厂牌发行日程、模拟录音室回顾、zine 与杂志提案、kawaii-tech 产品发布、创意工作室年报。

H

html-ppt-zhangzara-stencil-tablet

nexu-io / open-design

针对制造业监管机构的职场安全合规审查 —— 调查结果、证据链与整改指令。为监管机构与工厂管理层打造，作为决策级政策简报演示文稿。

为你的 Next.js 应用添加账户与组织设置页面

I

idea-to-ui-design-brief

akoliteza / hermes-agent-idea-workflow

在产品/设计文档转化为聚焦的 UI 设计简报、可选的 AI 图像生成概念提示词以及可直接落地的 UI 方向时使用，且不替代原有的 idea 工作流。

I

inkjs-design

akiojin / skills

Ink.js（用于命令行的 React）设计与实现指南。使用场景：(1) 创建或修改 Ink.js 组件 (2) 实现 Ink 特有的 hooks（useInput、useApp、useFocus）(3) 处理 emoji/图标宽度问题（string-width 变通方案）(4) 构建终端响应式布局 (5) 管理多屏导航 (6) 实现动画（spinners、progress bars）(7) 优化性能（React.memo、useMemo）(8) 处理键盘输入和快捷键 (9) 测试命令行 UI（ink-testing-library）

I

input-handling

josiahsiegel / claude-plugin-marketplace

当用户询问 TUI 输入处理、raw 模式、cbreak 模式、终端键盘解析、Esc 与 Alt 的歧义、Ctrl-C、快捷键、焦点管理、鼠标事件、滚轮、括号粘贴、粘贴安全、命令面板、表单、文本编辑、resize 事件或键位设计时，应使用本 skill。以下情况主动激活：raw 模式、键盘输入、键位绑定、鼠标支持、粘贴处理、焦点模型、终端表单、文本输入、vim/emacs 风格快捷键、输入冲突以及跨平台 Windows/macOS/Linux 输入行为。提供：输入架构、快捷键规则、焦点模式、粘贴/鼠标安全与故障模式排查。

I

ios-animation-code-review

existential-birds / beagle

审查 iOS 动画代码的正确性、性能、可访问性以及 Apple API 最佳实践。在审查包含动画代码的 .swift 文件时使用 — withAnimation、.animation()、PhaseAnimator、KeyframeAnimator、matchedGeometryEffect、navigationTransition、CABasicAnimation、CASpringAnimation、UIViewPropertyAnimator、UIDynamicAnimator、symbolEffect、scrollTransition、contentTransition 或自定义 Transition 遵循。

L

logo-colorway-generator

sanbaoai / logo-generator-skill

为现有 logo、生成的品牌系统板、吉祥物 logo、基础 logo、应用图标、字标组合、印章和标识表添加令人难忘的色彩系统、自适应布局、场景板和配色提示词，而不改变底层符号。适用场景：用户要求添加颜色、重新着色、创建调色板、生成配色、制作色彩应用、提升一眼冲击力、改善广泛受众吸引力、更改配色板背景/布局，或用品牌色增强之前生成的 logo。

M

meltflex-design

meltflexdevs / skills

使用 MeltFlex AI 根据照片生成逼真的室内和室外改造效果图。用户想要改变风格、重新设计、整理空间、虚拟布置或重塑房间、外立面或花园；更换地板、墙面饰面、楼梯、门窗；改造厨房或浴室；将 3D 草图转为照片；或预览不同风格、材料或季节下的空间时使用。也可生成电影感的视频漫游；3D 模型和 3D 世界请使用配套技能 meltflex-3d。直接调用 MeltFlex REST API，无需额外安装。

N

navigation-design

flitzrrr / frontend-design-skills

菜单模式、面包屑、搜索功能、信息架构与用户流程。导航是每个网站的骨架，需具备无障碍实现。

N

nous-branding

magnus919 / agent-skills

生成与 Nous Research 品牌标识一致的图像和内容。适用于在 Nous / Theia / Hermes 生态中创作视觉内容：一种融合新古典主义雕像、赛博朋克/工业颓废与复古动漫插画的“赛博古典”风格。涵盖官方品牌配色、字体排印（Inter/IBM Plex Sans、JetBrains Mono、重度做旧展示字体）、Nous Girl 吉祥物、纹理系统和图像提示词构建。附带配色、吉祥物和品牌拼贴的参考图，可用作 img2img 输入。本技能不用于无关请求；请路由到最接近的具名专家。

O

originplot

deliuou / originplot-skill

使用外部 Windows Python 和 originpro 包自动化 Origin/OriginPro 绘图，从运行时到导出控制图形层级，将任意数据映射到 Worksheet/Matrix/Layer/Plot 对象，应用出版级模板和 Nature 风格规则，批量导出图形，并保存可编辑的 OPJU 项目。对于出版风格的图形，请遵循内置的调色板/样式和层级控制规则。

P

player-experience-modeling

lvtd-llc / skills

对目标玩家、动机、情绪、乐趣、需求、心流、新颖性、判断力和兴趣曲线进行建模。当定义游戏面向谁、塑造留存、诊断无聊或困惑、设计进度，或让玩法与期望的情感曲线对齐时使用。

P

pptx-creator

sundial-org / awesome-openclaw-skills

根据大纲、数据源或 AI 生成的内容创建专业 PowerPoint 演示文稿。支持自定义模板、样式预设、根据数据生成图表／表格，以及 AI 生成的图像。适用于用户要求制作幻灯片、融资演示、报告或演示文稿的情况。

P

product-delight

kemiljk / skills

当用户要求愉悦感或打磨时，改进产品关怀、预期和有用的反馈。

R

removebg

membranedev / application-skills

Remove.bg 集成。管理图片。当用户想要与 Remove.bg 数据交互时使用。

R

review-ui-states

every-app / open-seo

Semrush 和 Ahrefs 的开源替代方案

S

scenes-gathered-zine-live-flow-v1-0

zeejay0 / gathered-scenes-zine-skill

从提供的照片运行完整的 Gathered Scenes 工作流，到静态海报、场景自适应的 v0.2 平面撕纸 Apple Live Photo ZIP，并可选择将该 ZIP 交接给本地 Live Photo Importer。当用户想要完整的从源图到 Live Photo 流程、带自定义叙事撕纸路径和宽大圆润的低频轮廓时使用；不适用于纯静态海报、3D 纸卷曲或照片场景内部的动效。

S

smooth-shadow-ring

flornkm / shadow-plugin

在已安装 shadow-plugin 的 Tailwind 项目中为任何有高度感的表面（card、dialog、popover、dropdown、menu、tooltip、sheet、toast）设置样式时使用。通过 smooth-shadow-ring-* 工具类来处理高度，避免将 border/ring 与 shadow 搭配而产生的双重边框伪影。

S

storybook-setup

storybookjs / storybook

当 Storybook 已经安装，且用户想要一个可用的 `preview` 文件和真实组件的 stories 时，使用这个技能。

S

syncfusion-flutter-calendar-datepicker

syncfusion / flutter-ui-components-skills

在 Flutter 应用中实现 Syncfusion Flutter Calendar（SfCalendar）和 Date Range Picker（SfDateRangePicker）部件，用于日期和日程 UI。适用于构建预约日历、预订系统、日期范围选择器或事件排程界面。本 skill 涵盖日历视图、重复事件、日期导航、本地化、回调和自定义。

S

syncfusion-javascript-context-menu

syncfusion / javascript-ui-controls-skills

实现 Syncfusion TypeScript ContextMenu 组件的综合指南。当构建在右键或长按时出现的上下文菜单时，可使用本技能，包括嵌套菜单、动态项、动画、事件、样式和数据绑定等功能。本技能涵盖从基础设置到滚动、无障碍和自定义模板等高级功能。

S

syncfusion-javascript-query-builder

syncfusion / javascript-ui-controls-skills

如何实现 Syncfusion JavaScript QueryBuilder 组件，涵盖列、数据绑定、规则管理、筛选、模板、拖放交互、导入导出以及无障碍支持的全面指导。当用户在 TypeScript 应用中需要 QueryBuilder 设置、规则创建、复杂查询构建、高级自定义或动态筛选 UI 需求的帮助时使用此 skill。

T

taste-design-review

madebymustafa / design-taste

对现有界面进行结构化的视觉与易用性审查，包括着陆页、SaaS 应用和作品集。优先查看截图，并依据 taste 规则、Nielsen 启发式原则和无障碍基准进行评估；按严重程度列出发现及具体修复方案，并验证修改前后效果。用户要求评审、审查或改进现有 UI 时使用。

T

theme-shopify-section-structure

niccos-shopify-workspace / shopify-cursor-skills

Shopify 主题 section 结构、文件组织与 schema 要求。在创建或修改 Shopify 主题 section 时使用。

使用 Bubbletea v2 和 Charm 生态构建可维护、可测试的 TUI 组件的最佳实践。涵盖组件组织、状态管理、异步操作、视觉模式以及常见陷阱。

U

ui-cloner

ragnar-pwninskjold / tech-snacks

当用户提供 URL 并希望为自己的产品复刻或克隆某网站的 UI、设计或视觉风格时使用。完整 4 阶段 SRIP 流水线的入口。

U

ui-pattern-research

xgent-ai / skills

用于比较和筛选器、权限编辑、表格、批量操作及编辑流程的交互方案；不用于纯视觉灵感搜集、已确定方案的直接实现或代码评审。结合产品约束，交付方案选择、状态行为与验收条件。

U

ui-translation

iress / design-system

使用 @iress-oss/ids-components 和 @iress-oss/ids-tokens，将自然语言的 UI 描述转换为 IDS（Iress Design System）组件实现。当用户用日常语言描述 UI 并希望得到 IDS 组件代码，或要求使用 IDS 构建表单、页面、布局或组件时使用。