Skills

I

icon-system

infrasity-labs / dev-gtm-claude-skills

创建图标系统规范，涵盖网格、尺寸、命名、分类和实施指导。

I

image-generation

massgen / massgen

MassGen 中图像生成与编辑的指南。在创建图像、编辑现有图像、迭代图像设计，或在图像后端（OpenAI、Google Gemini/Imagen、Grok、OpenRouter）之间选择时使用。

I

immersive-visuals-router

bbeierle12 / skill-mcp-claude

沉浸式视觉体验的总路由，整合 React Three Fiber、着色器、粒子、后处理、GSAP 动画和音频。在构建 3D 网页体验、可视化工具、创意编码项目、互动装置，或任何需要多种视觉技术的项目时使用。分派到 6 个专业领域路由，共覆盖 29 项技能。

L

landing-pages

flitzrrr / frontend-design-skills

以转化为导向的页面结构、CTA 设计、首屏优化、页面类型，以及为实现最高转化率的 A/B 测试。

L

law-of-proximity

infrasity-labs / dev-gtm-claude-skills

应用邻近法则，通过空间关系对相关元素进行分组。

L

lovstudio-find-logo

lovstudio / skills

根据品牌名称或 URL 从公开来源（Clearbit、og:image、favicon）获取公司/产品 logo，对候选进行评分（优先宽纵横比 + 透明背景），并将最佳项和备选项归档到配置好的 logo 收藏目录。当用户说 "find logo"、"找 logo"、"抓 logo"、"收集 logo"、"brand asset"、"需要 <brand> 的 logo"，或想要为网站/PPT/海报排版 logo 时触发。

L

low-code-generation

itallstartedwithaidea / agent-skills

低代码生成使用 AI 从自然语言描述或 schema 定义生成表单、表格、仪表盘和工作流 UI。

M

mask-reveal-transition

rheinmir / setup

通过有机的墨迹扩散型遮罩（ink-splatter/blob，`mask-image` 的 radial-gradient 随滚动进度动态变化）在图像间切换/显现，或使用 sticky 固定分屏（左图固定，右侧文字滚动,面板激活切换时通过遮罩换图）。原始逐字版本（Ink Transition、Pinned Split-Screen…）在仓库 Rheinmir/uiux-asset；assets/ 是轻量 vanilla CSS mask 版本，无 WebGL。当用户说 "mask reveal"、"ink transition"、"chuyển ảnh qua mask"、"split-screen sticky pin"、"blob reveal effect"、"vết mực loang"、"pin ảnh cố định cuộn chữ" 或 /mask-reveal-transition 时调用。不同于 `skills/scroll-effects`（简单的 opacity/translate 显现，没有形状遮罩）和 `skills/blur`（GPU 开销大的 WebGL shader，用于全屏图像切换——此技能是轻量的 CSS `mask-image`，不需要 Three.js/canvas）。

M

moai-library-shadcn

modu-ai / moai-adk

为 React 应用提供 shadcn/ui 组件库专业知识，涵盖 shadcn/cli v4、preset 系统、RTL 支持、统一 radix-ui 和 OKLCH 主题。在使用 shadcn/ui 实现 UI 组件、设计系统、CLI 工作流或注册表编写时使用。

N

navigation-patterns

infrasity-labs / dev-gtm-claude-skills

选择并设计符合产品结构、用户任务和平台惯例的导航模式。

N

north-star-vision

infrasity-labs / dev-gtm-claude-skills

清晰阐述一个引人注目的北极星产品愿景，以统一团队并启发战略性设计决策。

O

opendesign-components

finch-poi / opendesign-skills

OpenDesign 组件库使用指南。当需要使用 OpenDesign Vue 组件库快速搭建页面时使用此 skill。支持所有 OpenDesign 组件（46 个），包括按钮、表单、表格、对话框、卡片、图标、滑块、步骤条、轻提示等常用 UI 组件。使用场景：(1) 使用 OpenDesign 组件构建 Vue 页面，(2) 查找组件使用方法和属性说明，(3) 获取组件代码示例

P

pptx-posters

leonchaox / qinyan-academic-skills

使用 HTML/CSS 制作可导出为 PDF 或 PPTX 的研究海报。仅当用户明确要求 PowerPoint/PPTX 海报格式时使用此技能。标准研究海报请改用 latex-posters。此技能提供现代网页式海报设计,具备响应式布局和便捷的视觉集成。

P

principle-tagging

dragoon0x / taste-skills

按原则而非美学为设计参考打标签。构建一个真正可检索的库。适用于保存参考、整理灵感，或构建能返回有用结果的设计库时。

P

prototype-strategy

infrasity-labs / dev-gtm-claude-skills

为设计问题选择合适原型保真度和方法。

Q

quick-view-modal

finsilabs / awesome-ecommerce-skills

让购物者无需离开列表页即可预览商品详情并加入购物车，减少购物流程中的阻力

R

readable-measure

infrasity-labs / dev-gtm-claude-skills

在排版层级和响应式布局中设置最佳行长度以提升可读性。

R

roblox-ui

afrxo / roblox-agent-skills

构建 Roblox UI —— 引擎原语（GuiObjects、UDim2、AnchorPoint、layout、输入、容器）以及 Fusion 0.3 响应式框架。在编写、评审或调试 UI 组件、尺寸/定位、布局结构、输入处理、渲染顺序或组件生命周期时使用。仅限 UI 层 —— 引擎语义见 roblox-dev；语言规则见 luau-expert；Rojo/Wally 工作流见 roblox-toolchain。

S

scientific-visualization

leonchaox / qinyan-academic-skills

面向可发表图表的元技能。在创建需要多面板布局、显著性标注、误差棒、色盲友好配色以及特定期刊格式（Nature、Science、Cell）的期刊投稿图表时使用。使用出版级样式编排 matplotlib/seaborn/plotly。快速探索请直接使用 seaborn 或 plotly。

S

self-assessment

dragoon0x / taste-skills

在六个技能领域诊断你的品味缺口。知道该练习什么。适用于启动品味培养计划、检查进展，或确定需要改进的具体领域时。

S

service-innovation-workshop

timlai666 / skills

此技能必须用于将服务创新机会发展为概念、比较或原型验证计划（服務創新、創新機會、服務原型、創新流程、服務體驗工程）。当用户想要新的服务方向、价值共创，或在不指明方法的情况下测试现有服务概念时，也应使用此技能。让工作流匹配任务；独立的方法请求不需要完整的研讨会。

S

shadcn

openai / plugins

shadcn/ui 专家指引 —— 命令行、组件安装、组合模式、自定义注册表、主题、Tailwind CSS 集成和高品质界面设计。在初始化 shadcn、添加组件、组合产品 UI、构建自定义注册表、配置主题或排查组件问题时使用。

S

summarize-interview

infrasity-labs / dev-gtm-claude-skills

将用户访谈记录总结为结构化洞察，包含关键主题、引述和行动项。在完成用户访谈后使用，以高效提取并分享发现。

S

super-ppt

huyansheng3 / ppt-skills

基于 Python 的 PPT 编辑器，具备样式预设、自然语言动画支持和从 PPT/PDF 提取样式。当用户需要"edit existing PPT"、"modify slide"、"add animation to PPT"、"apply promotion style"、"extract style from PPT/PDF"、"提取样式"、"编辑PPT"、"修改第X页"、"添加动画"、"应用晋升风格"，或希望在各页 PPT 之间保持一致的样式时使用。支持编辑指定页面、应用主题预设（晋升/科技）、从现有文档提取样式，以及通过自然语言描述添加动画。

S

syncfusion-winforms-radial-gauge

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用中实现 Syncfusion Gauge 控件的指南。用于创建数据可视化仪表，例如用于圆形显示（速度表、温度计）的 RadialGauge、用于水平／垂直条和进度指示器的 LinearGauge，或用于 LED 风格字母数字显示的 DigitalGauge。涵盖带指针、范围和刻度的仪表盘、仪表面板、实时监控和 KPI 显示。

S

syncfusion-winforms-smith-chart

syncfusion / winforms-ui-components-skills

实现 Syncfusion Windows Forms Smith 图（SfSmithChart）控件，用于可视化传输线的阻抗与导纳。在高频电路应用、射频工程或传输线分析中使用。涵盖归一化电阻/电抗绘制、归一化电导/电纳可视化、串联配置、坐标轴自定义、标记、图例和工具提示。

S

syncfusion-winforms-status-bar

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用程序中实现 Syncfusion StatusBarAdv 控件的指南。在创建应用程序状态显示、底部面板或带 StatusBarAdvPanel 项的状态信息面板时使用。涵盖安装、面板配置、外观样式、渐变、边框、主题、对齐方式，以及用于增强状态栏显示的事件处理。

S

syncfusion-winforms-statusbaradv-panel

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用程序中实现 Syncfusion StatusBarAdvPanel 控件的指南。在创建带跑马灯文字动画、按键状态指示器、日期时间显示或区域性信息面板的自定义状态栏面板时使用。涵盖面板类型、外观样式、渐变、跑马灯动画、对齐方式、边框、主题和事件处理，以实现增强的状态栏面板显示。

S

syncfusion-winforms-syntax-editor

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用程序中实现 Syncfusion EditControl（SyntaxEditor）的指南。在创建带语法高亮、IntelliSense、多语言支持或类 Visual Studio 编辑能力的交互式代码编辑器时使用。涵盖安装、11 种内置语言的语法高亮（C#、VB.NET、XML、HTML、Java、SQL、PowerShell、JavaScript）、自定义语言配置、代码折叠、自动补全、查找/替换对话框、文件操作、导出（XML/RTF/HTML）、拆分视图，以及用于构建专业代码编辑器应用的全面事件处理。

S

syncfusion-winforms-treemap

syncfusion / winforms-ui-components-skills

实现 Syncfusion Windows Forms TreeMap 控件，用于以嵌套矩形进行层次数据可视化。在处理 TreeMap 控件、层次数据显示、节省空间的图表或颜色编码可视化时使用。涵盖 TreeMap 配置、布局算法、颜色映射，以及针对股票市场可视化和矩形布局数据分类的自定义。

T

team-workflow

infrasity-labs / dev-gtm-claude-skills

设计团队工作流，涵盖任务管理、协作惯例和工具。

T

test-scenario

infrasity-labs / dev-gtm-claude-skills

生成结构化的可用性测试场景，包含真实任务、成功标准和主持笔记——可直接用于真实参与者或主持式测试会议。

T

twig-components

dev-toolings / superpowers-symfony

使用 Symfony UX Twig Components（props、slots、匿名组件、CVA）构建可复用的 UI 组件，让模板更清晰

U

ui-page

sickn33 / agentic-awesome-skills

使用 StyleSeed 布局模式搭建新的移动端页面/屏幕

U

ui-ux-pro-max

robsonrung / rar-skills

选择或审查可复用的 UI 设计系统。适用于挑选共享的视觉或交互规则，或据此检查页面。

V

vercel-react-view-transitions

fcakyon / claude-codex-settings

关于使用 React 的 View Transition API（`<ViewTransition>` 组件、`addTransitionType` 和 CSS view transition 伪元素）实现平滑、原生感动画的指南。当用户想要添加页面过渡、动画化路由变化、创建共享元素动画、动画化组件的进入/退出、动画化列表重新排序、实现定向（前进/后退）导航动画或在 Next.js 中集成 view transitions 时使用此技能。当用户提及 view transitions、`startViewTransition`、`ViewTransition`、过渡类型或询问在 React 中动画化 UI 状态而不使用第三方动画库时也使用。

V

visual-ralph

yeachan-heo / oh-my-codex

面向前端 UI 的 Visual Ralph 编排：从生成的参考、静态参考或实时 URL 目标出发，使用 $ultragoal 并内置视觉判定与像素差异证据，直到实现匹配并留下可复现的设计系统。

V

voice-interaction

owl-listener / inclusive-design-skills

设计适用于不同言语模式、口音和沟通风格的语音交互和语音界面。适用于设计语音命令、语音搜索、听写、语音助手，或任何接受语音输入的界面。触发词：语音、言语、听写、语音命令、语音搜索、语音识别、口音、口吃、言语障碍、非语言、AAC、语音助手、说话转文字。

W

weapp-tailwindcss-lynx

sonofmagic / skills

为 ReactLynx + Rspeedy 配置 @weapp-tailwindcss/lynx 0.3.2 与 Tailwind CSS 4，覆盖 Rspeedy plugin、Lynx 原生 CSS、静态 className、theme 变量静态化、任意值、encoder 警告和 iOS/Android 运行端验证。Use for ReactLynx, Rspeedy, Lynx native CSS, arbitrary value compatibility, or Lynx bundle styling；不用于 React Native、uni-app App、Web 或普通小程序构建。

W

web-design-guidelines

siberiacancode / agent-skills

检查 UI 代码是否符合 Web 界面指南。当被要求「审查我的 UI」、「检查可访问性」、「审计设计」、「审查用户体验」或「根据最佳实践检查我的网站」时使用。

W

web-files-file-upload-patterns

agents-inc / skills

文件上传模式 —— 拖放式投放区、分块与可续传上传、预签名 URL 流程、文件校验（MIME 类型、magic bytes）、进度跟踪、无障碍（ARIA）

W

web-ui-tanstack-table

agents-inc / skills

TanStack Table v8 模式 - useReactTable、列定义、排序、过滤、分页、行选择、虚拟滚动、服务端数据

W

woocommerce-blocks

finsilabs / awesome-ecommerce-skills

使用 Gutenberg 区块定制 WooCommerce 结账页和购物车页面，支持服务端渲染、slot-fills 和可扩展性 hook

A

apple-design-web

s1gmamale1 / apple-design-skills

在构建 apple.com 风格的营销/产品页面时使用——落地页公式（吸顶半透明导航、以产品为主角、全出血特性区块、bento 网格、厚重页脚）、滚动驱动的叙事，以及让旗舰页面感觉“鲜活”的交互清单（持续阻尼的滚动进度、主题渐变、粘性堆叠固定、文字擦除、环境悬浮）、主视觉媒体管线（视频拖动、图像序列、素材获取）以及 Apple 的前端工程实践（渐进增强、原生 JS、性能纪律）。属于 apple-design 系列。关键词：apple.com、营销页面、落地页、hero、滚动叙事、视频拖动、交互清单、跨区块主题渐变、粘性堆叠、分章固定、环境悬浮、canvas 图像序列、createImageBitmap、WebGL 3D 查看器、视差、animation-timeline、滚动驱动动画、IntersectionObserver、渐进增强、srcset 懒加载、磨砂导航、媒体素材、设备边框、CC0、素材获取。

A

apple-native-ui

kemiljk / skills

构建或审查原生 Apple 界面，包括平台控件、无障碍、状态、导航和 macOS 窗口行为。

A

ascii-progress-and-spinner

full-stack-skills / ascii-skills

为 CLI UX 设计 ASCII 进度条和加载动画（确定/不确定、TTY 单行刷新、非交互式日志回退），并提供可复制的样式规范。

A

audit-accessibility-figma

southleft / skills-for-figma

针对单个 Figma 组件或组件集的深度无障碍评分卡——状态覆盖（default/hover/focus/disabled/error/active/loading）、焦点指示器质量与对比度、非颜色状态区分、目标尺寸、标注完整性，以及色盲模拟（protanopia/deuteranopia/tritanopia），全部汇总为各分类 0–100 的评分和按优先级排序的建议。当用户想在发布前审查单个组件时使用：触发词为 'audit this component'、'accessibility score for this button'、'is this component set accessible'、'check the states on this component'、'does my button have a focus state'、'color blind check'、'rate this component for a11y'、'component accessibility scorecard'。适用于任何 Figma 套餐。若要对整个页面/框架做广泛扫描，请使用 lint-design-figma；若要做代码侧（HTML）检查，请使用 scan-code-accessibility-figma。

B

bmad-excalidraw

bmad-code-org / bmad-builder

通过引导式或自主工作流创建 Excalidraw 图表。当用户要求 "create a diagram"、"make an Excalidraw"、"draw a flowchart" 或 "visualize this architecture" 时使用。

C

ckw-design

connerkward / ckw-design-skill

前端设计的入口。只要构建或触及任何 Web UI 的外观——组件、页面、仪表盘、落地页、React/Vue/HTML-CSS——以及当用户说“把这做得更好看/更漂亮”“修复间距/布局”，或提到样式、颜色、排版、字体、响应式设计、打磨或美学时，就使用它，即使没有出现“设计”一词。加载 design-thinking 获取方向；design-system 用于实现；design-spatial 用于布局；design-philosophy 用于视觉理念或艺术指导。

C

clearshot

udayanwalvekar / clearshot

用于 UI 实现与评审的结构化截图分析。以 5×5 空间网格、完整元素清单和设计系统提取来分析每张 UI 截图——每次都把事实与品味结合在一起。在构建时升级为完整的实现蓝图。对任何数字界面图像文件（png、jpg、gif、webp——网站、App、仪表盘、模型图、线框图）或诸如 'analyse this screenshot'、'rebuild this'、'match this design'、'clone this' 之类的命令触发。对非 UI 图像（照片、梗图、图表）跳过，除非用户明确想据此构建 UI；仅用于说明其内容（一条消息、一个错误）而分享的 UI 截图也跳过。不会因 HTML 源码、CSS、SVG 或以文本形式粘贴的任何代码而触发。

C

cli-ascii-logo

full-stack-skills / ascii-skills

生成 CLI 的 ASCII 艺术 Logo/Banner（支持 box drawing 边框、█ 块字符、ANSI 24-bit 渐变色）并提供可运行脚本与集成代码。适用于“做一个像 Spec Kit CLI 的终端 Logo / 彩色 ASCII banner / figlet 风格标题 / CLI 启动欢迎页”等需求。

C

cli-ux-designer

sjungling / sjungling-claude-plugins

当用户要求"设计 CLI"、"改进命令结构"、"格式化终端输出"、"审查 CLI 可用性"、"设计帮助文本"或"添加 flag 和参数"时，应使用本 skill。在设计新的 CLI 工具、改进命令接口、格式化终端输出或审查 CLI 可用性时自动激活。不适用于 GUI/网页设计、后端 API 或 shell 脚本编写。

C

compliance-mapping

owl-listener / inclusive-design-skills

将设计决策映射到无障碍标准和法律要求。在记录 WCAG 符合性、准备审计、跟踪合规状态，或法律、采购要求提供无障碍文档时使用。触发词：WCAG、compliance、conformance、audit、VPAT、accessibility statement、legal requirement、ADA、EAA、European Accessibility Act、Section 508、EN 301 549、accessibility standard、success criterion。

C

component-spec

infrasity-labs / dev-gtm-claude-skills

编写详细的组件规格说明，包括 props、状态、变体、无障碍要求和用法指南。

C

converting-html-css-to-wpf-xaml

christian289 / dotnet-with-claudecode

将 HTML/CSS 转换为 WPF CustomControl XAML，包含正确模式与常见坑的解决方案。适用于把网页设计转换为 WPF、将 CSS 动画转换为 Storyboards、实现 CSS border-radius 裁剪、CSS 伪元素（::before/::after）或 XAML 中的 CSS transforms。

C

craft-site

michtio / craftcms-claude-skills

Craft CMS 5 前端 Twig 开发——原子设计、模板架构、组件、Vite 构建链。涵盖原子/分子/组织、props/extends/block 模式、布局链、视图路由、内容构建器、图片预设、Tailwind 命名键集合、多品牌 CSS 令牌、JavaScript 边界（Alpine/DataStar/Vue、标签页、手风琴）、Vite 资源加载以及前端认证（登录、注册、密码重置、个人资料）。

C

critique-affordance

infrasity-labs / dev-gtm-claude-skills

评判屏幕的交互可供性——哪些看起来可点击、状态可见性、CTA 清晰度和操作可发现性。

C

critique-brand-consistency

infrasity-labs / dev-gtm-claude-skills

对照 mood.md、voice.md 和 tokens.md 评判屏幕的品牌一致性。

C

critique-composition

infrasity-labs / dev-gtm-claude-skills

评判屏幕的构图——平衡、留白、节奏和格式塔原则。

C

css-scroll-driven-native

rheinmir / setup

纯 CSS 页面滚动效果，通过 Native CSS Scroll-Driven Animations API（animation-timeline scroll()/view()、animation-range）实现——零 JavaScript。当用户说 "css scroll driven animation"、"animation-timeline"、"animation-timeline"、"scroll animation không js"、"css thuần cuộn trang"、"scroll-driven CSS" 或 /css-scroll-driven-native 时调用。不同于 `skills/scroll-effects`（它使用 IntersectionObserver JS，在所有现代浏览器中运行）——此技能 0 JS，但浏览器尚未完全支持（Firefox/Safari 仍在 flag/rollout 阶段），可作为 scroll-effects 之上的渐进增强使用，在需要确保在所有浏览器运行时不能替代它。