Skills

A

all-in-one-ui-ux-design

luisjppm / skills

统一的 UI/UX 操作系统,用于在 Web 与移动端技术栈上规划、设计、实现和审计现代界面。当需求涉及创建、重新设计、评审、修复或优化页面/组件(落地页、仪表盘、SaaS 应用、管理后台、电子商务、作品集、博客、移动端页面),并需要明确的视觉方向以及无障碍、交互、性能和响应式质量时使用。

A

angular-aria

angular-sanctuary / angular-agent-skills

为 Angular 实现 WAI-ARIA 模式的无头可访问 UI 原语

A

app-store-screenshots

onatcipli / skills

用于 iOS/macOS 应用的 App Store 截图调研、竞品分析、构建与上传工具。在为以下任一任务处理 App Store 截图时使用此技能：(1) 查找并分析所属类别的竞品截图，(2) 将竞品截图下载到本地以供参考，(3) 分析截图策略（风格、文案、功能），(4) 为截图文案调研 ASO 关键词，(5) 规划截图顺序与传达信息，(6) 使用 HTML/CSS 导出工具构建截图，(7) 生成本地预览网站以查看和对比截图，(8) 通过浏览器或 Puppeteer 按正确尺寸导出截图，(9) 为多个 App Store 区域本地化截图，(10) 通过 API 将截图上传到 App Store Connect。

A

arabic-rtl-best-practices

almubarmij / arabic-ai-skills

为阿拉伯语 Web 和移动应用实现从右到左 (RTL) 布局。当用户询问 RTL 布局、阿拉伯语文本方向、双向 (bidi) 文本、阿拉伯语 CSS、"right to left"，或需要构建阿拉伯语 UI 时使用。涵盖 CSS 逻辑属性、Tailwind RTL、React/Next.js RTL 设置、阿拉伯语排版和字体选择。除非用户明确要求共享的 RTL 模式，否则不要用于 Arabic RTL（排版相似但不同）。

A

astro-starlight

fusengine / agents

在使用 Astro Starlight 构建文档站点时使用——侧边栏配置、Pagefind 搜索、插件（blog/openapi/typedoc）、i18n、llms.txt。

A

auto-animate

ovachiever / droid-tings

面向 React、Vue、Solid、Svelte、Preact 的零配置动画，基于 @formkit/auto-animate（3.28kb）。可避免 10 多个已记录的错误：SSR/Next.js 导入、条件父元素、缺失 key、flexbox 宽度、表格 display、Jest/esbuild 配置、CSS position 冲突、Vue/Nuxt 注册、Angular ESM。适用于：为列表/手风琴/Toast/表单添加动画、排查 SSR 动画错误、需要无障碍动画（自动遵循 prefers-reduced-motion），或希望无需 Motion 开销的即插即用过渡。

将 Markdown 转换为带样式的 HTML，并支持兼容微信的主题。支持代码高亮、数学公式、Mermaid（通过无头 Chrome 渲染为 PNG）、PlantUML、脚注、提示框、信息图，以及可选的外部链接文末引用。用户请求“markdown to html”“convert md to html”“md 转 html”“微信外链转底部引用”，或需要将 Markdown 输出为带样式的 HTML 时使用。

B

brand-kit

scrollmark / social-skills

当用户希望其视频保持视觉一致时使用——一次性保存字幕样式、卡片颜色与几何形状、标题处理、徽标、字体、配音和 CTA 文案，而不必为每个视频重新决定。

B

browser-app-creator

jackspace / claudeskillz

创建完整的单文件 HTML/CSS/JS 网页应用，具备 localStorage 持久化、针对 ADHD 优化的 UI（60px 以上按钮）、深色模式和离线功能。适用场景：用户说"创建应用"、"构建工具"、"做一个仪表盘"，或要求任何基于浏览器的界面。

C

community-ff-mcp

mohn93 / ff-mcp

教 AI 助手如何使用 MCP 工具开发 FlutterFlow 应用。在处理 FlutterFlow 项目、编辑 FF YAML、创建或检查页面与组件、读取项目配置或浏览 FlutterFlow 组件树时使用此技能。它涵盖用于发现、读取、编辑和设置的全部 25 个 MCP 工具。触发词：FlutterFlow、FF YAML、FF page、FF component、FF widget、FF theme、FF project。

C

content-infographic

vstorm-co / content-skills

生成符合品牌风格的 SVG 和 HTML 信息图。当用户想要创建信息图、数据可视化、流程图、对比图、统计卡片或可视化数据摘要时使用。

C

cs-build-ui-mockup

codespringapp / codespring-skills

将 CodeSpring 计划变成客户能实际查看的可点击本地原型——每个核心功能一个界面、真实文案、可信数据、带有浅色与深色模式的规范化 token 驱动设计系统，以及展示品牌风格的样式指南页面。然后运行评审，揭示书面计划无法呈现的内容：界面顺序、层级、位置，以及事后发现并不完整的选择。将每处修正反馈到 CodeSpring 笔记和任务中。在地图和笔记已存在之后、生成 PRD 之前运行。触发词：“make a mockup”、“mock up the UI”、“show me what it looks like”、“build a prototype”、“design the screens”、“what would this app look like”、“create a UI mockup for this plan”、“I want to show the client something”。

C

css-module-generator

jeremylongshore / tons-of-skills-marketplace

生成 css module generator 操作。自动激活技能

C

cursor-reveal-hero

sergekostenchuk / ui-ux-agent-skill-system

在前端项目中构建、修复、调优并验证交互式光标拖尾遮罩揭示首屏效果。适用于实现基于 canvas 的底层/揭示合成、柔和径向光标遮罩、渐隐光标拖尾、揭示调试控件、无站点文字的全屏首屏场景，或针对光标揭示、悬停揭示、前后对比揭示和遮罩合成的浏览器冒烟检查。

D

design-consultation

borkweb / skills

提出针对特定产品的设计系统与可验证预览，以现有品牌资产和用户约束为基础。涵盖排版、色彩、布局、组件与无障碍。

D

design-it

sickn33 / agentic-awesome-skills

将前端设计任务路由到 48 种特定 UI 风格。适用于要求特定美学风格的网站、应用屏幕或 UI 组件任务。

D

design-review

borkweb / skills

根据产品的设计系统，检查渲染后的 UI 是否存在设计、响应式与交互缺陷。如被要求，施加限定范围的修复；报告证据与未测试的覆盖范围。

D

design-system-extractor

sylphxai / skills

从现有产品 UI、截图、类 Figma 规格、代码库、组件库、CSS、设计令牌、移动应用、Web 应用、仪表盘和营销页面中提取、审计并记录设计系统。适用于将不一致的 UI 转化为可复用的令牌、组件、模式、间距、排版、色彩、动效、无障碍和产品工艺规则。

D

design-ux

sickn33 / agentic-awesome-skills

UX / 可用性审计——对交互式 UI 进行启发式评估（不只是视觉打磨）。当 UI「感觉不对」、「用起来很难受」、难以学习、需要一堵说明墙，或在发布交互式工具/编辑器/应用之前，与 design 一起加载。

D

discovery-interview-guide

mohitagw15856 / pm-claude-skills

创建结构化的用户发现访谈指南，包含筛选问卷、讨论指南和综合分析框架。当规划用户访谈、客户发现会议、Jobs-to-be-Done 研究或问题验证时使用。产出完整的指南，涵盖暖场、问题探索，以及每次会谈的综合分析模板。

D

DrawIO Diagram Creation

thomasrohde / marketplace

当用户要求 "create a diagram"、"make a flowchart"、"generate a .drawio file"、"draw.io diagram"、"diagrams.net"、"architecture diagram"、"sequence diagram"、"ER diagram"、"class diagram"、"network diagram"、"org chart"、"workflow diagram"、"UML diagram"、"ArchiMate diagram"、"C4 diagram"、"C4 model"、"enterprise architecture"，或提及 "drawio"、"mxGraph" 或图表可视化时，应使用此技能。提供创建可用于生产的 DrawIO XML 文件的全面知识。

E

eng-architect

timlai666 / skills

本技能必须用于架构决策、模块边界划分、将计划或规格拆分为工单，或明确的 UI/设计评审。当实现需要尚未确定的架构选择，或用户不确定如何划分工作时，应当使用。不得将已经明确规格的实现扩展为新的规划工作。触发词：技術方案, 架構設計, 怎麼切模組, 拆任務, 切票, 排開發順序, 技術規劃, design review, UI review, AI slop scan。

E

excalidraw

kv0906 / cc-skills

以 JSON 文件创建 Excalidraw 图表，用于流程图、用户旅程、系统架构、线框图和可视化文档。当用户要求创建图表、流程图、可视化表示、架构图、思维导图或任何兼容 Excalidraw 的可视化内容时使用。输出可在 excalidraw.com 或任何兼容 Excalidraw 的应用中打开的 .excalidraw.json 文件。

F

figma-component-audit

mohitagw15856 / pm-claude-skills

审计 Figma 组件库的一致性、覆盖缺口和命名问题。当被要求审计组件、审查设计系统、检查组件一致性、识别缺失组件或评估 Figma 库健康度时使用。产出结构化的审计报告，按影响程度排列问题优先级，并给出命名建议和修复计划。

F

figure

vectorize-io / hindsight

绘制一个自包含的 SVG 动态图（方框、箭头、移动的数据），用于 GitHub README、PR、issue 或博客文章。当变更或说明需要图示时使用，例如展示请求流向、后台任务的工作方式或功能变更；用户要求制作图表、示意图、动画或“用视觉方式展示”时也使用。文档网站自身页面应改用交互式播放器（见步骤 4）。

F

fixing-motion-performance

marcioaltoe / skills

审查并修复动画性能问题，包括布局抖动、合成器属性、滚动联动动画和模糊效果。动画卡顿、过渡不流畅，或需要审查 CSS/JS 动画性能时使用。

F

flutter-add-widget-preview

dhruvanbhalara / skills

在 Flutter 开发中配置 widget 预览、测试可视化组件变体或隔离 widget UI 状态时使用。

F

frappe-builder

frappe / builder

在编辑器外管理 Frappe 站点上使用 Frappe Builder 构建的网站。当站点运行 Builder 应用时，可用于创建或编辑 Builder 页面、构建或修改 Builder 组件（属性、脚本、数据）、更换站点主题、根据站点的 DocTypes 创建数据驱动或动态路由页面、制作可保存的表单、添加页面脚本或发布内容。

F

frontend-design

open-slide / open-slide

创建具有鲜明特色、达到生产级水准且设计质量出色的前端界面。用户要求构建 Web 组件、页面、制品、海报或应用时使用此技能，例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 添加样式或美化。生成富有创意且精致的代码和 UI 设计，避免千篇一律的 AI 风格。

F

frontend-design

ovachiever / droid-tings

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

F

frontend-design

project-n-e-k-o / n.e.k.o

创建具有鲜明特色、达到生产级水准且设计质量出色的前端界面。用户要求构建 Web 组件、页面、制品、海报或应用时使用此技能，例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 添加样式或美化。生成富有创意且精致的代码和 UI 设计，避免千篇一律的 AI 风格。

G

game-design-flow-audit

stanestane / game-design-skills-bundle

从心流理论的角度审查游戏、功能、关卡序列、战斗循环、成长曲线、新手引导路径、活动结构或回归玩家旅程。用于评估挑战与技能是否始终匹配，诊断无聊、焦虑、挫败感骤增、难度陡升、空档区或节奏偏移，或找出设计从引人入胜转为令人疲惫或空虚的环节

G

github-repo-cards

ob-labs / agentseek

通过 gh CLI 获取 GitHub 仓库或趋势信息，并渲染精美的 SVG/PNG 卡片图像。当被要求可视化仓库统计数据、趋势仓库或生成 GitHub 风格卡片时使用。

G

grid-sticker-generator

guanyang / super-publisher

通用 4x4 网格贴纸生成器。使用严格的视觉准则（无文字、透明背景），并支持从参考中加载主题模板。

H

healthcare-ui-design

peterbamuhigire / chwezi-dev-engine

面向编码的软件开发引擎。提供可用于生产环境的技能系统，涵盖 Web 应用与移动架构、API、数据库、Web、移动、AI、安全、UX、SaaS 和 ERP 工程。通过分层的基础技能与专业技能编码可复用的工程判断，助力生成安全、可扩展、易维护且高性能的软件系统

H

help-center-design

vasilyu1983 / ai-agents-public

设计或审查 AI 优先的帮助中心/知识库/FAQ，包括分类体系、文章模板、分析和 AI 支持（RAG、chatbot、升级），采用 2025-2026 最佳实践

H

hig-components-dialogs

sickn33 / agentic-awesome-skills

Apple HIG 关于呈现类组件的指南，包括 alerts、action sheets、popovers、sheets 和 digit entry views。

H

hig-components-system

sickn33 / agentic-awesome-skills

Apple HIG 关于系统体验组件的指南：小组件、实时活动、通知、复杂功能、主屏幕快捷操作、top shelf、表盘、App clips 和 App shortcuts。

I

interaction-design

marcioaltoe / skills

设计并实现微交互、动态效果、过渡效果和用户反馈模式。用于优化 UI 交互、实现加载状态或打造愉悦的用户体验。

I

interactive-study-guide

petekp / agent-skills

将代码库学习指南转变为精致的交互式 Web 体验。当用户拥有已完成的学习指南 markdown 文件（来自 codebase-study-guide 或类似来源）并想将其变成交互式教学应用时，应使用此技能。在以下请求时触发：“让这个学习指南可交互”“把这个变成交互式体验”“可视化这个学习指南”“创建交互式版本”，或当用户拥有学习指南 .md 文件并想要更丰富的呈现时。产出一个由 Vite 提供服务的单页应用，具有滚动驱动的叙事、交互式架构图、动画代码走查和渐进式披露。

L

logo-management

motormetrics / motormetrics

MotorMetrics 的 Monorepo

M

maplibre-terrain-patterns

maplibre / maplibre-agent-skills

MapLibre GL JS 中的地形与山体阴影——raster-dem 源、Terrarium 与 Mapbox RGB 编码、hillshade 图层配置（单次与多次渲染）、3D 地形、动态等高线，以及自托管 DEM 瓦片。在向地图添加高程背景、山体阴影或 3D 地形时使用。

M

md-document

alirezarezvani / claude-skills

将长篇 markdown（规范、RFC、报告、计划、说明文）转换为单文件、轻度交互式 HTML 文档，包含粘性目录、滚动定位、搜索筛选、代码复制按钮，以及由设计系统驱动的品牌令牌。当 markdown-html-orchestrator 将输入归类为 DOCUMENT，或通过 /cs-md-document 直接调用时触发。通过 config_loader.py 读取设计系统配置，并内联用户的 12 个派生 CSS 自定义属性；若尚未完成引导，则拒绝渲染。输出为单文件——仅 Google Fonts 和 Prism.js CDN 为外部依赖；无需框架运行时或构建步骤。应在编排器路由后或确认完成设计系统引导后使用。

M

mermaid

ahgraber / skills

为聊天机器人流程生成可在 Markdown 中渲染的 Mermaid 图表，包括选择图表类型、生成有效的 Mermaid 代码块，以及通过捆绑脚本在本地验证或渲染图表。当用户要求聊天机器人流程图/时序图/状态图、想要 Mermaid 语法，或需要在无 Web 服务的情况下验证/渲染 Mermaid 时使用。

M

motion-design

dhruvjainin / absolute

将你的开发生命周期提升 10 倍的绝佳技能

M

motion-design

maddhruv / absolute

将你的开发生命周期提升 10 倍的绝佳技能

N

nerdzao-elite

sickn33 / agentic-awesome-skills

软件工程与产品设计工作流及高级产品设计师。涵盖规划、架构、TDD、整洁代码和像素级 UX 验证的完整工作流。

N

netresearch-branding

netresearch / netresearch-branding-skill

处理任何 Netresearch 视觉输出时使用：品牌页面、仪表板、HTML 报告、docs.typo3.org 上的 TYPO3 手册、扩展图标、README 徽章或 CSS 主题。应用 Logo、字体、颜色和页脚要求前，先选择托管手册或独立页面配置。

O

obsidian-mermaid

jykim / claude-obsidian-skills

创建与 Obsidian 兼容的 Mermaid 图表。优先使用方形布局（TB + subgraph LR），避免在标签中使用 markdown。在 markdown 文件中创建流程图、序列图或任何 Mermaid 图表时使用。

P

phone-ui-demos

unclecheng-li / ai_animation

把产品/知识点/文案做成 "手机系统 UI 风格" 的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成 "手机里发生的事"。

P

product-pair

alpacalabsllc / skills-for-architects

推荐与给定物品搭配良好的互补产品——沙发的边桌、书桌的工作灯等。当用户询问某产品"搭配什么"、想要协调的配套单品，或要求补全家具组合时使用。

Q

q-infographics

tyrealq / q-skills

将文档转换为商业故事和信息图。用于把报告、文档或文本转化为可视化摘要或信息图。

Q

qualaroo

membranedev / application-skills

Qualaroo 集成。管理 Surveys、Questions、Answers。当用户想要与 Qualaroo 数据交互时使用。

R

r-visuals

data-goblin / power-bi-agentic-development

面向 PBIR 报表的 R 可视化创建与 ggplot2 模式。当用户提到 "R visual"、"ggplot2"、"ggplot in Power BI"，或要求 "create an R visual"、"add an R chart"、"write an R visual script"、"inject an R script into Power BI" 时自动调用。

R

Rails Localization (i18n) - English & Arabic

kaakati / rails-enterprise-dev

面向 Ruby on Rails 应用的全面国际化 skill，包含恰当的英文和阿拉伯文翻译、RTL 支持、复数规则、日期/时间格式以及符合文化习惯的内容适配。

R

rampa-colors

basiclines / rampa-studio

使用 OKLCH 色彩空间生成数学上准确的颜色调色板。用于构建设计系统、颜色梯度、无障碍调色板、主题 CSS 变量，或当用户询问颜色生成时。

R

react-native-core

maikotrindade / awesome-react-native-skills

React Native 核心组件、布局、样式、动画、列表、平台 API 以及最佳实践。在使用原生组件构建 iOS/Android UI 时使用。

R

reagraph

reaviz / skills

在使用 reagraph 库于 React 中构建交互式 2D 或 3D 图与网络可视化时使用（GraphCanvas、节点-链接图、力导向布局）。涵盖数据形态（GraphNode、GraphEdge）、16 种布局算法、选择、套索、相机控制、尺寸策略与主题。

R

retro-print

madebymustafa / design-taste

风格包：Risograph／70—80 年代印刷复兴。暖色纸张、颜料油墨（红色和蓝色最多各一种）、半色调网点纹理、错位套印效果、橡皮图章细节、海报字体。适用于 zine、活动、代理机构、食品／饮料品牌、音乐，以及任何需要温暖模拟质感的表达。叠加于 design-taste 核心技能之上。

S

scientific-schematics

jimmc414 / kosmos

使用 Python（graphviz、matplotlib、schemdraw、networkx）创建出版级科学图表、流程图和示意图。专精于神经网络架构、系统图和流程图。在 figures/ 文件夹中生成 SVG/EPS，并带有自动化质量验证。