Skills

S

stop-describing-ui

artouc / stop-describing-ui

移除用户界面中的说明性文案。编写、编辑或审查任何 UI 文本时使用，包括标题、空状态、按钮标签、开关和设置描述、辅助文本、对话框、横幅、权限通知和引导内容；当屏幕依赖句子解释其功能时也适用。用明确的动词、控件、图标和间距，替代对功能、副作用、后端行为及缺失能力的描述。

W

web-haptics

lochie / web-haptics

使用 web-haptics 库为 Web 应用添加触觉反馈。在构建面向移动端的 UI，需要按钮、开关、表单、选择器及其他交互元素具备触感反馈时使用。

U

ui-design

pproenca / dot-skills

UI/UX 与前端设计最佳实践指南（原 frontend-design）。在编写、审查或设计前端代码时应使用此技能，以确保可访问性、性能和可用性。涉及 HTML 结构、CSS 样式、响应式布局、表单设计、动画或无障碍改进等任务时触发。

D

draw-io

softaworks / agent-toolkit

draw.io 图形的创建、编辑和审阅。用于 .drawio XML 编辑、PNG 转换、布局调整和 AWS 图标使用。

F

feishu-cli-board

riba2534 / feishu-cli

飞书画板全能操作 · 5 种画图路径任选其一： (A) Mermaid/PlantUML 服务端渲染（思维导图/时序图/类图/饼图/流程图/甘特图，整图作为一个节点，飞书自动排版） (B) Mermaid 本地引擎 whiteboard-cli（绕开 par/参与方数等服务端限制，每个节点可点击编辑） (C) SVG 自由作图（任意视觉：飞轮/鱼骨/Dashboard/海报/插画/架构图等，每个 SVG 元素 → 1 个原生节点可单独编辑） → 使用 scripts/svg_to_board.py 把 SVG 翻译为飞书原生节点 (D) 简单 SVG 单节点装饰（图标/印章/小元素，2KB 以内 SVG） (E) 精排架构图（手写节点 JSON，绝对坐标 + 配色 + 连线 ID 引用） 当用户请求"画图/画板/whiteboard/画架构图/画流程图/画飞轮/画鱼骨/画路线图/画 Dashboard/画插画/画海报/ AI 自由作图/SVG 落画板/克隆画板/上传图片到画板/可视化/节点图/精排"时使用。 特别地，当用户反馈"右下角半截楼""z_index 错乱""节点翻倍""复杂图渲染不全""mermaid 服务端失败" 务必读 references/pitfalls.md 排障。 写类（add-board/create-notes/update/delete/clone/svg-import/upload-image/import）使用 App Token（默认 Bot 身份）， 无需登录；即使用户已 auth login，写类命令仍保持 App 身份不切换。 读类（image/nodes/export-code/svg-export/lint）登录后自动用 User Token，未登录回落 App Token。 svg-export 导出整板 SVG 视觉快照（POST /export，base64 解码），对任意画板有效（不限 svg 节点）， 配合 svg_to_board.py / board import 可实现「导出 → 编辑 → 回写」闭环。

M

mascot-logo-reconstruction

roble3 / cc-blender-skill

编排基于线框图、贴图包和正交视图，对吉祥物、Logo、品牌头像和风格化平面角色进行带失败门控、源锁定的 Blender 重建。当用户要求 1:1 还原品牌/模型，而非合理的风格化诠释时使用。

S

shiny-bslib

posit-dev / skills

使用 bslib (Bootstrap 5) 构建现代化 Shiny 仪表板和应用。适用于创建新的 Shiny 应用、将旧版应用现代化（fluidPage、fluidRow/column、tabsetPanel、wellPanel、shinythemes），或使用 bslib 页面布局、网格系统、卡片、value box、导航、侧边栏、填充布局、主题、手风琴、工具提示、气泡提示、toast 和 bslib 输入控件。假定已熟悉 Shiny 基础。

C

css-animation-creator

onewave-ai / claude-skills

创建专业的 CSS 动画、过渡、微交互和复杂动效设计。适用于添加动画、悬停效果、加载状态、页面过渡、滚动动画或任何动效设计工作。

T

three-js

mindrally / skills

面向 Three.js 和 React Three Fiber 开发的专家指导，涵盖现代 React、TypeScript 与性能最佳实践

G

gsap-awwwards-website

rebyteai-template / rebyte-skills

使用 GSAP 滚动动画、React 19 和 Tailwind CSS 4 的 SPYLT 产品落地页。

T

tailwind-v4

existential-birds / beagle

Tailwind CSS v4，采用 CSS-first 配置和设计令牌。适用于搭建 Tailwind v4、定义主题变量、使用 OKLCH 颜色或配置暗色模式。触发词：@theme、@tailwindcss/vite、oklch、CSS 变量、--color-、tailwind v4。

F

figma-designer

zhaono1 / agent-playbook

将 Figma 设计分析为可直接实现的视觉证据、设计令牌、组件规格和交互状态，便于交付给规划或开发环节。

S

scenes-gathered-zine-v1-3

zeejay0 / gathered-scenes-zine-skill

将用户提供的照片转换为 3:5 竖版 Gathered Scenes Zine 海报：以源自照片的抽象插画场域为底，将真实摄影锚定其中，把密集枝叶等微观细节大胆压缩为少数几个大而安静的形体，融入一种高彩度色相作为构图结构，并保留可见的手撕纤维状照片与纸的边缘。适用于用户想要触感十足的极简纸张拼贴、简化的插画、主动的留白、以英文为默认的克制微缩文字（中文或双语），以及明确却低调的撕纸边界时。

T

taste-skill

nexu-io / open-design

高主动性的前端技能，通过可调节的设计差异度、动效强度和视觉密度，让 AI 具备良好品味，避免千篇一律的粗制 UI。

A

antigravity-design-expert

sickn33 / agentic-awesome-skills

使用 GSAP 和 3D CSS 构建高交互性、空间化、无重力感与玻璃拟态风格网页界面的核心 UI/UX 工程技能。

E

efecto-graphic-design

pablostanley / efecto-plugin

使用 Efecto 设计图形素材——演示文稿、融资路演材料、活动海报、邮件页眉、博客配图、Open Graph 卡片、名片、简历、菜单、信息图、邀请函、通讯和文档。当被要求"设计一张海报"、"制作 pitch deck"、"做一份演示"、"设计名片"或任何平面设计任务时使用。需要 Efecto MCP 服务。

I

ionic

mindrally / skills

使用 Angular、Cordova 和 Firebase 集成构建跨平台移动应用的 Ionic 开发指南。

E

excalidraw

davila7 / claude-code-templates

在处理 *.excalidraw 或 *.excalidraw.json 文件、用户提到图表/流程图，或请求架构可视化时使用 —— 将所有 Excalidraw 操作委派给子 Agent，以避免冗长 JSON 导致上下文耗尽（单个文件：4k-22k tokens，可能超出读取上限）

P

presentation-design

aaronvanston / skills-presentations

为大胆、极简的演示文稿提供视觉设计指导。提供布局模式、字体排印层次、色彩规范和幻灯片构成规则。当有人询问「这页幻灯片应该是什么样？」、「……的设计指导」、「这页幻灯片用什么布局？」，或需要将内容转化为演示文稿的视觉结构时使用。

U

ui-ux-design-pro

saifyxpro / ui-ux-design-pro-skill

资深 UI/UX 设计专家，用于构建数据驱动的高端生产级界面。适用于：1. 从零设计复杂应用（仪表盘、SaaS、AI 工具） 2. 生成完整的设计系统（令牌、调色板、排版） 3. 从质量、无障碍性和「工艺」角度审查现有 UI 4. 查找经过验证的真实世界设计模式与实现细节 触发词："design a..."、"audit this..."、"create a design system"、"find icons"、"fintech dashboard"、"landing page"

M

mui

softaworks / agent-toolkit

Material-UI v7 组件库模式，包括 sx 属性样式、主题集成、响应式设计和 MUI 专用 hooks。适用于使用 MUI 组件、通过 sx 属性设置样式、自定义主题或使用 MUI 工具

D

design-system-starter

softaworks / agent-toolkit

通过设计令牌、组件架构、无障碍指南和文档模板创建并演进设计系统。确保产品间 UI 的一致性、可扩展性和无障碍。

F

frontend-design

vercel-labs / open-agents

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

R

replica-recon

jakeschincariol / replica-skill

将任意应用逆向拆解为侦察图谱：屏幕清单、用户流程、组件列表、推断的数据模型和功能矩阵，依据包括公开页面、截图、应用商店列表、帮助文档和用户自己的账户。这是 Replica pack 的第一步。用户说“克隆这个应用”“逆向分析 X”“X 是怎么工作的”“梳理 X”“X 有哪些页面”“我想构建自己的 X 版本”“复制这个应用”，或粘贴应用 URL 或 App Store 链接并希望重建时使用。

V

vue-typescript

mindrally / skills

精通使用 Vite、Pinia 和现代 UI 框架进行 Vue.js TypeScript 开发

E

excalidraw

softaworks / agent-toolkit

在处理 *.excalidraw 或 *.excalidraw.json 文件、用户提到图表/流程图，或请求架构可视化时使用 —— 将所有 Excalidraw 操作委派给子 Agent，以避免冗长 JSON 导致上下文耗尽（单个文件：4k-22k tokens，可能超出读取上限）

F

framer-motion-layout

c-jeril / framer-motion-skills

Framer Motion 官方布局动画技能 —— 共享布局过渡、layoutId、退出动画、AnimatePresence。适用于构建共享元素过渡、布局动画、可重排序列表，或询问 Framer Motion 的布局、layoutId、共享过渡时。

S

syncfusion-react-scheduler

syncfusion / react-ui-components-skills

实现 Syncfusion React Scheduler 组件，用于日历、事件排程和预约管理。适用于构建排程系统、日历应用、预订系统或时间管理界面。涵盖所有 Scheduler 视图（Day、Week、Month、Timeline、Agenda、Year）、数据绑定、资源排程、重复性事件、CRUD 操作、拖拽排程、自定义、无障碍支持以及高级功能。

T

threejs-skills

sickn33 / agentic-awesome-skills

使用 Three.js 创建 3D 场景、交互式体验和视觉效果。适用于用户需要 3D 图形、WebGL 体验、3D 可视化、动画或交互式 3D 元素时。

F

framer-motion-gestures

c-jeril / framer-motion-skills

Framer Motion 官方手势动画技能：拖拽、平移、点击、悬停、聚焦、触摸动画。在构建包含拖拽、平移、点击、悬停或触摸手势的交互元素时使用，或在询问 Framer Motion 的拖拽约束、手势处理器或交互动画时使用。

G

gluestack-ui-v4

gluestack / agent-skills

为 gluestack-ui v4 强制采用受限且有明确主张的样式规范。这是主概览技能，负责协调设置、组件、样式、变体、性能和验证等专门的子技能。

V

visual-explainer

nicobailon / visual-explainer

为系统、代码变更、计划、数据和技术概念生成自包含的 HTML 可视化说明。适用于图示、架构概览、diff 或计划评审、项目回顾、对比表格、幻灯片、动画讲解、带解说的 MP4 视频等可视化说明。

D

define-opportunity-tree

product-on-purpose / pm-skills

创建机会解决方案树，将期望成果与客户机会和候选解决方案关联起来，避免在持续探索中直接跳到解决方案。适用于梳理零散的功能想法，或说明路线图如何追溯到成果。若要对已有的扁平候选列表进行排序，请改用 define-prioritization-framework；此技能用于发现候选列表，不负责评分。

P

prototype

timschoch / mattpocock-skills

构建一个临时原型来回答设计问题。当用户想验证状态模型或逻辑是否合理，或探索 UI 应该是什么样时使用

M

motion

jezweb / claude-skills

使用 Motion（Framer Motion）构建 React 动画——手势（拖拽、悬停、点击）、滚动效果、弹簧物理、布局动画、SVG。体积：2.3 KB（mini）至 34 KB（full）。适用场景：拖放、滚动动画、模态框、轮播、视差。故障排查：AnimatePresence 退出、列表性能、Tailwind 冲突、Next.js「use client」。

B

build-feature

signerlabs / shipswift-skills

使用 ShipSwift 组件配方构建 iOS 功能。当用户说“build”、“create”、“add a feature”，或描述他们想要实现的 iOS 功能时使用。

O

orbital-hud-motion

roble3 / cc-blender-skill

在 Blender 主体周围创建有格调的圆形／轨道 HUD 与光晕动画，使用源自源文件的弧线、圆点、虚线、不透明度、视差和克制的运动。适用于装饰性圆环、光环、轨道标记、扫描环或 HUD 效果需要与 logo／吉祥物相呼应，而非看起来像随意放大的圆环。

S

ss-build

bitjaru / styleseed

使用 StyleSeed 的组合方法构建界面，然后运行代码门控与像素门控后再展示。适用于构建或重建界面；必要时先完成项目初始化。

D

design

subframeapp / subframe

在 Subframe 中创建或编辑页面、组件、代码片段、设计文档和主题，或探索并比较 Subframe 中的 UI 设计选项

D

discover-interview-synthesis

product-on-purpose / pm-skills

将用户研究访谈综合为可执行的洞察、模式和推荐。在开展用户访谈、客户通话或可用性测试之后使用，以提取并传达来自各参与者的发现。与 foundation-meeting-recap 不同，后者为某一场内部会议的出席者总结会议内容；此技能将研究对话汇总为有证据支撑的发现。

F

framer-motion-variants

c-jeril / framer-motion-skills

Framer Motion 官方技能，讲解动画 variants——状态机、编排动画、stagger、repeat、时序控制。用于构建编排动画、动画状态机、错落入场，或咨询 Framer Motion 的 variants、过渡 variants 以及编排动画时。

D

define-jtbd-canvas

product-on-purpose / pm-skills

创建 Jobs to be Done 画布，捕捉客户待办任务的功能、情感和社会维度。适用于深入理解客户动机、围绕任务进行设计或重新定义产品定位时。

E

explore-recipes

signerlabs / shipswift-skills

探索并浏览可用的 ShipSwift recipes。当用户表示想探索、浏览、显示 recipes、列出组件、询问有什么可用内容，或想了解 ShipSwift 提供什么时使用。

S

ss-verify

bitjaru / styleseed

对照 StyleSeed 契约检查渲染后的 UI 或视觉产出。报告发现的问题；仅在已授权的构建或修复任务中进行修复并重新渲染。

S

syncfusion-react-gantt-chart

syncfusion / react-ui-components-skills

实现、配置和定制 Syncfusion React 甘特图组件。适用于构建包含任务时间线、依赖关系、资源管理和日历驱动排程的项目计划应用。涵盖 GanttComponent 设置、任务约束、任务栏定制、筛选、排序、Excel/PDF 导出、关键路径分析、里程碑、前置任务、资源视图、基线跟踪和任务日历配置。

A

aws-architecture-diagram

vidanov / aws-architecture-diagram-skill

当用户要求创建、生成或构建 AWS 架构图、云基础设施图或使用 AWS 服务的系统图时，始终使用本技能。对于提及 Lambda、DynamoDB、S3、API Gateway 等 AWS 服务的 draw.io 图也适用。

G

gsap

mindrally / skills

使用 GSAP（GreenSock Animation Platform）构建高性能动画的专家指南

S

ss-restyle

bitjaru / styleseed

应用一个可选的 StyleSeed 美学风格配置，同时不改变所选的输出语法、产品职责或核心设计判断。

W

wordpress-theme-to-emdash

emdash-cms / skills

将 WordPress 主题的设计和模板行为迁移到由 EmDash 驱动的 Astro 网站。适用于主题迁移、设计匹配、PHP 模板转换和 CMS 接线。不要用于不影响网站主题的 WordPress 插件行为。

M

mobbin-search

mobbin / skills

在 Mobbin 中搜索真实应用的 UI 截图并进行视觉分析。在调用 `search_screens` MCP 工具之前必须先使用此 skill——它定义了如何规划搜索、组织回复，以及在截图即为答案时构建 HTML 证据板。当用户询问 UI／UX 设计模式、想了解其他应用如何处理某个界面或流程、需要设计灵感或参考、想比较不同应用的 UI 方案、提到 Mobbin，或任何与 `search_screens` 相关的场景时使用。对于任何与设计相关的问题都应积极触发——即使没有明确要求截图。

S

seed-design

daangn / seed-design

在使用 SEED Design 的项目中，需要官方文档与 CLI 说明，或进行安装、升级诊断时使用。

D

develop

subframeapp / subframe

使用同步组件或应用自身的设计系统实现或更新 Subframe 设计，设置 Subframe 组件，或说明画布与代码同步

H

huashu-design

alchaincyf / huashu-skills

设计哲学顾问，从 20 种风格中推荐 3 个方向，并生成视觉 Demo 和 AI 提示词。当用户提到“设计风格”“设计方向”“配色方案”“视觉风格”“设计评审”“推荐风格”时使用。

S

styled-components-best-practices

mindrally / skills

styled-components 在 React 应用中进行 CSS-in-JS 开发的最佳实践

S

ss-dial

bitjaru / styleseed

沿单一设计轴上调或下调——"更密实""更大胆""更扁平""更活泼""更锐利的转角"。用于单轴调整，而非情绪类词汇（那类请用 /ss-restyle）；会更新锁定项并重新运行检查。

在应用 Atomic Design 方法论、将 UI 组件组织为 quarks、atoms、molecules、organisms、templates 和 pages 时使用。涵盖核心原则与层次结构。

D

dashi-ppt

chuspeeism / dashi-ppt-skill

一项 AI Agent 技能，可从多种视觉主题生成可在浏览器中编辑的演示文稿，并导出为 HTML、PDF 和 PPTX。

H

hyva-cms-component

hyva-themes / hyva-ai-tools

创建自定义 Hyvä CMS 组件。当用户想要创建新的 Hyvä CMS 组件、构建 Hyvä 组件，或需要 Hyvä CMS 的 components.json 和 PHTML 模板方面的帮助时，应使用此技能。触发短语包括 "create hyva cms component"、"add cms component"、"new hyva component"、"build page hyva cms element"、"custom cms element"。

T

thumbnail-design

social-media-skills / skills

设计真正能赢得点击的 YouTube 视频封面图——移动端清晰可读、单一视觉焦点、内容真实。当有人想要设计 YouTube 封面图、提升 CTR、撰写封面图需求说明、选择封面文案或规划封面图 A/B 测试时使用。负责设计高 CTR 的封面图并撰写需求说明和 A/B 测试计划：封面图是一个承诺，而不是一张海报，需与标题作为一个整体设计，并且在移动端清晰可读。采用 CLICK 框架。先读取品牌档案和视频／标题。最终的位图由人工或图像／设计工具（nano-banana/ideogram/Canva/设计师）制作；YouTube 自定义封面图在 Studio 中直接上传（WoopSocial 没有封面图字段），Test & Compare 也是原生功能；TikTok/IG-Reel 的封面使用 WoopSocial 的 cover 字段并通过相应格式的技能实现。不做标题党、不使用未经同意的真实人物／深度伪造人脸，绝不伪造 CTR。区别于 youtube-publishing-and-metadata（元数据）以及 nano-banana/ideogram（由它们生成封面图位图，本技能只负责撰写需求说明）。

L

layout-paradigms-and-consistency

dembrandt / dembrandt-skills

选择一种布局范式（信息流、看板、表格、画布、主从视图、仪表盘），并在各个屏幕间复用。包含一个落地页叙事框架。适用于构建界面屏幕、页面模板或落地页时。