Skills

创建逼真的产品样机和演示文稿

M

moodle5-theme

nicolasflores9 / skills

基于 Boost（Bootstrap 5.3）创建和自定义 Moodle 5.1+ 主题。当用户想要：从零创建 Boost 子主题、修改现有主题的 SCSS 样式、覆盖 Mustache 模板、添加或修改管理设置、自定义渲染器、覆盖图标或字体、从 Bootstrap 4 迁移到 5、调试缓存或 SCSS 编译问题、创建输出组件，或任何与 Moodle 5.x 视觉外观相关的任务时，使用此技能。当提到 "theme"、"Boost"、"Moodle SCSS"、"Moodle Mustache template"、"theme settings"、"customize Moodle"、"change Moodle styles" 或类似术语时也会触发。

UI/UX 设计智能。50 种风格、21 套配色、50 种字体

N

normies

2389-research / review-squad

当你想以全新的眼光看待一个网站时使用——不同类型的人第一次接触它会有怎样的体验。它会派出技术熟练度各异的 Agent，让他们以冷启动方式访问网站，并报告困惑、阻力和第一印象。

通过布局与样式提升 UI 精致度

P

pencil-design-bridge

sergekostenchuk / ui-ux-agent-skill-system

将已批准的 UI/UX 方向简报桥接到 Pencil 设计工作流，且不把 `.pen` 文件当作纯文本处理。当项目需要 Pencil MCP/工具交接、可编辑的设计探索、感知设计系统的画布工作，或在已知 senior-ui-ux-orchestrator、ui-ux-pro-max、Stitch 或 Figma 约束后评审 Pencil 输出时使用。

P

plan-design-review

borkweb / skills

审查 UI 方案中的交互状态、设计系统契合度、可访问性与视觉验收。可在被要求时改进方案；保留现有品牌选择。

P

popup-cro

mysticaltech / marketingskills

当用户想要创建或优化以转化为目的的弹窗、模态框、浮层、滑入式窗口或横幅时使用。当用户提到「退出意图」「弹窗转化」「模态框优化」「线索收集弹窗」「邮件弹窗」「公告横幅」或「overlay」时也使用。对于弹窗之外的表单，请参阅 form-cro。对于整体的页面转化优化，请参阅 page-cro。

P

pos-restaurant-ui-standard

peterbamuhigire / chwezi-dev-engine

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

P

pp-context-dev

mvanhorn / printing-press-library

用于 Context.dev 的 Printing Press 命令行工具。面向 Agent 的网站智能、品牌信息补全、抓取、爬取、结构化提取、截图、样式指南、竞品地图、来源包和变更摘要。

P

product-manager

shining319 / claude-code-single-person-workflow

资深产品经理，负责需求分析到产品设计全流程。触发词：产品设计、需求分析、用户画像、PRD、功能规划、MVP、用户故事、产品方案。

P

prototype

borkweb / skills

在投入正式方案之前，构建一次性原型以充实设计。分两条路径——针对状态/业务逻辑问题的可运行终端应用，或可从一个路由切换的多个截然不同的 UI 变体。当用户想要做原型、验证数据模型或状态机、制作 UI 模型、探索设计方案，或说“prototype this”“let me play with it”“try a few designs”时使用。

P

prototype

hu3rror / my-skills

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

Q

qt-qml

l3digitalnet / claude-code-plugins

Claude Code 插件

R

react-native-skills

cowork-os / cowork-os

React Native 与 Expo 在性能、UI 模式及原生集成方面的最佳实践。

R

responsive-design

dhruvjainin / absolute

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

R

responsive-design

maddhruv / absolute

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

R

rn-skia

imfa-solutions / skills

React Native Skia（@shopify/react-native-skia）完整最佳实践、GPU 加速的 2D 图形、60fps/120fps 动画模式、自定义着色器，以及面向 iOS 和 Android 的生产优化。在编写、审查、修复或优化 React Native Skia 代码时使用，包括 Canvas 渲染、形状、路径、渐变、滤镜、文本/字体、图像、视频、Skottie/Lottie、粒子系统或自定义 SkSL 着色器。触发场景涉及 @shopify/react-native-skia、Canvas、Circle、Rect、Path、Group、useImage、useFont、LinearGradient、RadialGradient、RuntimeShader、Blur、BlurMask、Shadow、Atlas、Picture、Skia.Paint、Skia.Path、与 Skia 搭配使用的 useDerivedValue、interpolateColors、usePathInterpolation、useRSXformBuffer、BackdropBlur、ImageShader、FractalNoise、Turbulence、Paragraph、TextPath、TextBlob、Skottie、AnimatedImage、drawAsImage、immediate mode 与 retained mode 的对比，或任何基于 Skia 的绘制/动画。当用户要求用 React Native Skia 构建图表、绘图画布、进度环、粒子效果、毛玻璃、霓虹发光、图像滤镜或其他 GPU 加速图形时也会触发。

R

run-spike

jayden-dang / skills

当设计问题需要可运行的答案时使用——用户想要

R

ryux

ryuxdsgn / design-intelligence

RYUX——面向 AI Agent 和设计师的设计智能。告知它你正在做什么，它便会分流至 Analyze（理解现有界面）、Design（在 Figma、pen.dev 或模型稿中创建或改进 UI 和 UX）、Build（通过代码实现）、Critique（结合证据找出优先修改项或进行启发式评估）或 QA（依据设计验证构建），只读取任务所需的知识（产品、UX、UI、交互、表单、内容、无障碍、响应式、设计系统、前端、反低质内容），并以质量关卡收尾。适用于任何 UI、UX、文案、前端、设计审查或设计分析任务，也适用于产品视觉内容：插画、3D、图像、图标、徽标和动态效果，即使请求中没有提到 RYUX。

为 PowerPoint、Keynote 和 Google Slides 设计有效的演示文稿

S

stitch-design-bridge

sergekostenchuk / ui-ux-agent-skill-system

当 UI/UX 项目在 `ui-ux-pro-max` 产出设计智能之后、在 Figma/代码实现之前，应使用 Google Stitch 或 Stitch MCP/API 工作流进行快速 AI UI 探索时，使用本 skill。本 skill 将 UX、SEO/LLM、品牌、无障碍和 Pro Max 约束转化为可供 Stitch 使用的提示词，评估 Stitch 输出，准备 Figma/代码交接，在不泄露密钥的情况下检查 Stitch API/MCP 配置，并避免 Stitch 成为相互冲突的事实来源。

S

stitch-mcp-generate-screen-from-text

gabelul / stitch-kit

使用 Stitch 从文本提示词生成高保真 UI 界面或线框图。这是核心的文本转 UI 生成工具——Stitch 工作流的核心。

S

stitch-ui-prompt-architect

gabelul / stitch-kit

通过两条路径构建可供 Stitch 使用的提示词——路径 A 将模糊想法增强为打磨过的提示词，路径 B 将 Design Spec JSON 与用户请求合并为结构化的 [Context] [Layout] [Components] 提示词。

S

swiftui-wcag-accessibility-auditor

ramzesenok / ios-accessibility-audit-skill

依据 WCAG 2.2 Level A/AA 审计 SwiftUI iOS 功能代码的可访问性，并返回可直接修补的修复方案。当评审 SwiftUI 视图/屏幕（包括认证、表单、设置和自定义控件）且你需要既具备标准可追溯性（WCAG + WCAG2Mobile 解读），又能以简洁、按优先级分组的 Markdown 格式提供实用、最小的代码改动，并对代码无法确定的行为给出用户后续检查项时使用。

S

syncfusion-aspnetcore-3d-chart

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 中实现 Syncfusion 3D Chart 的指南。当用户需要 3D 图表功能、数据可视化、系列配置、坐标轴设置，或工具提示和选择等交互式图表功能时，请始终使用本 skill。涵盖设置、数据绑定、图表类型、样式和用户交互。

S

syncfusion-aspnetcore-bullet-chart

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 应用中实现 Syncfusion Bullet Chart 的指南。在构建对比性能可视化、KPI 仪表盘、进度跟踪、目标对比图表，或任何需要展示实际值与目标值的场景时使用本 skill。Bullet Chart 能以紧凑的格式有效地将实际表现与目标基准进行对比——非常适合仪表盘、高管摘要和性能监控系统。当用户提到 bullet chart、performance comparison、target visualization、KPI dashboard、progress bars with targets 时触发。

S

syncfusion-aspnetcore-datepicker

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 应用中实现 Syncfusion DatePicker 组件的完整指南，涵盖 Tag Helper、自定义日期格式、范围验证、事件、全球化和样式，用于构建专业的日期输入表单。

S

syncfusion-aspnetcore-multiselect

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 应用中实现 Syncfusion MultiSelect 组件的完整指南，涵盖 tag helper、数据绑定、过滤、模板、复选框和无障碍支持，用于构建高级下拉选择表单。

S

syncfusion-aspnetcore-numerictextbox

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 应用中实现 Syncfusion NumericTextBox 组件的完整指南，涵盖 Tag Helper、货币/百分比格式、范围验证和全球化支持，用于构建专业的数值输入表单。

S

syncfusion-aspnetcore-spinner

syncfusion / aspnetcore-ui-components-skills

使用 Syncfusion 在 ASP.NET Core 应用中实现加载旋转指示器的全面指南。在实现加载指示器、提供进度反馈或在异步操作期间阻塞 UI 时使用此 skill。涵盖旋转指示器的创建、显示/隐藏生命周期、类型、样式、自定义模板和配置方法。包含表单提交和数据加载等真实场景的模式。

S

syncfusion-aspnetcore-switch

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion ASP.NET Core Switch 组件的指南。当为表单输入或状态管理创建开关按钮/开关时可使用本技能。涵盖安装、基础实现、属性配置、事件处理和样式自定义。提供入门、属性、事件和样式的文档指引。

S

syncfusion-aspnetcore-treemap

syncfusion / aspnetcore-ui-components-skills

使用 Syncfusion 在 ASP.NET Core 中实现交互式分层 TreeMap 可视化。创建支持多种布局、颜色映射、下钻能力和交互功能的分层数据树状图。每当用户需要可视化分层数据结构、展示具有相对大小的嵌套类别、实现交互式下钻导航，或通过树状图进行数据探索时，都可使用本 skill。

S

syncfusion-aspnetcore-uploader

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 应用中实现 Syncfusion Uploader 组件的完整指南。当处理文件上传、异步处理、验证、拖放支持，或为专业 Web 表单进行企业级文件处理时，可使用本技能。

S

syncfusion-flutter-maps

syncfusion / flutter-ui-components-skills

为在 Flutter 应用中进行交互式地理数据可视化而实现 Syncfusion Flutter Maps (SfMaps)。适用于处理形状图层、瓦片图层、分区统计图或地图标记和叠加层。本技能涵盖 GeoJSON 渲染、OpenStreetMap/Bing Maps 集成、气泡、图例、工具提示、缩放和平移，以及空间数据可视化。

S

syncfusion-flutter-pyramid-charts

syncfusion / flutter-ui-components-skills

为实现比例和层级数据可视化而实现 Syncfusion Flutter Pyramid Charts (SfPyramidChart、PyramidSeries)。适用于在 Flutter 中处理金字塔图、漏斗式可视化或基于分段的数据比较。本技能涵盖系列配置、分段分离、间隙比例、PyramidMode、数据标签、图例和工具提示自定义。

S

syncfusion-flutter-spark-charts

syncfusion / flutter-ui-components-skills

为实现紧凑轻量的数据可视化而实现 Syncfusion Flutter Spark Charts (SfSparkLineChart、SfSparkAreaChart、SfSparkBarChart、SfSparkWinLossChart)。适用于在 Flutter 仪表板中处理微型图表、sparkline、KPI 指标或内联趋势图。本技能涵盖全部四种 spark 图表的图表配置、数据绑定、标记、工具提示和轨道球。

S

syncfusion-flutter-treemap

syncfusion / flutter-ui-components-skills

为在 Flutter 应用中可视化层级和比例数据而实现 Syncfusion Flutter TreeMap (SfTreemap)。适用于处理矩形树图布局、嵌套矩形、下钻导航或层级数据可视化。本技能涵盖布局、标签、工具提示、图例、选择、颜色映射和下钻导航。

S

syncfusion-winui-badge

syncfusion / winui-ui-components-skills

实现 Syncfusion WinUI Badge 控件（SfBadge）以显示通知徽标和状态指示器的指南。当处理通知徽标、未读数徽标、BadgeContainer 或 WinUI 应用中的通知浮层时使用此技能。涵盖形状、颜色、定位、对齐、动画和自定义模式。

S

syncfusion-winui-treeview

syncfusion / winui-ui-components-skills

在桌面应用中实现 Syncfusion WinUI TreeView（SfTreeView）控件的完整指南。当处理层级数据显示、树形结构或基于节点的导航时使用此技能。涵盖 WinUI 应用中用于文件浏览器、组织架构图、分类浏览器以及可展开/折叠数据可视化的 TreeView 实现。

T

tailwind-coder

majesticlabs-dev / majestic-marketplace

在将 Tailwind CSS 样式应用于 Rails 视图时使用。使用工具类、响应式设计模式，并与 Rails 视图助手集成。

T

tailwind-design-system

makerjackie / jackie-skills-starter

使用 Tailwind 构建一致的设计系统：token、组件和使用模式。

T

tailwind

display-design-studio / skills

Tailwind CSS v4 最佳实践技能，涵盖工具类优先模式、@theme 变量、响应式设计、深色模式、自定义样式、性能、无障碍性以及 Figma 到 Tailwind 主题生成工作流。当用户提及 Tailwind、tailwindcss、@theme、工具类、Tailwind 配置、Figma 设计令牌，或要求构建、配置、审查或迁移 Tailwind CSS 项目（包括 v3 到 v4 迁移）时使用。

T

tailwindcss-v4

tlq5l / tailwindcss-v4-skill

Tailwind CSS v4 模式：CSS 优先配置、@theme/@utility/@variant 指令、从 v3 迁移。在使用 Tailwind v4 项目时使用。

T

TanStack Table

ovachiever / droid-tings

使用 TanStack Table v8 构建无头数据表格。为 Cloudflare Workers + D1 数据库提供服务端分页、过滤、排序和虚拟化模式。在构建大数据集表格、与 TanStack Query 协同或排查状态管理问题、分页协调错误、性能瓶颈时使用。

U

ui-humanizer

gabrielgreco1 / skills

去除网站、落地页、应用、仪表板、文档和幻灯片（HTML/CSS、Tailwind、React、shadcn）的“AI 感”。在创建或审核任何界面时使用；当有人要求设计“少点 AI 感”“更人性化”“少点模板感”“少点 SaaS 感”，或要求视觉参考（Pinterest、Dribbble、Awwwards）时也可使用。覆盖完整流程：简报、编码前草稿、浏览器内查找参考、设计系统、构建，以及使用检测器审计。识别大家两秒内就能察觉的套路：标题上方的小眉题、标题中的渐变色或异色词、侧边框卡片、带脉冲小圆点的标签、用 emoji 代替图标、Tailwind 紫、到处都是胶囊标签、玻璃拟态、“工作原理”分三步、Playfair 字体搭配末尾斜体、没有图片的网站、看起来像给面包店用的 SaaS 网站。基于 @greco_dev 主题帖的 51 条回复（2026 年 10 月）。

U

ui-styling

jackspace / claudeskillz

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 实用优先样式和基于 canvas 的视觉设计，创建美观且易于访问的用户界面。适用于构建用户界面、实现设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现深色模式、生成视觉设计和海报，或在多个应用中建立一致的样式规范。

U

use-design-system

bluzir / claude-code-design

从组织级注册表 ~/.claude/design-systems/<name>/ 为当前项目显式加载设计系统。适用于用户说 "use the Acme design system"、"apply company-x tokens" 或类似表述时。

通过访谈、可用性测试和行为分析开展定性用户研究、综合洞察并为产品决策提供依据

V

visual-content-director

sergekostenchuk / ui-ux-agent-skill-system

为 UI/UX 项目规划和管理图像、视频、生成式视觉素材、首屏媒体、素材获取、视觉佐证以及内容与媒体的匹配。适用于站点或应用在实现、Stitch、Pencil、Figma 或代码交接之前，需要高端视觉方向、照片/视频素材计划、生成图像提示词、前后对比媒体或视觉素材 QA 的场景。

V

visual-plan

builderio / agent-native

将普通文本计划转化为丰富的交互式视觉计划，包含图表、文件地图、注释代码、待解决问题，以及适用时的 UI/原型评审。

V

vue-creater

helloggx / skill

使用 Vite 8 和 Tailwind 4 搭建高保真 Vue 3 应用的工具套件。通过 DSL 和 Tokens 支持设计驱动的工作流。适合快速原型开发或可投产的前端搭建。

W

wcag-design

alexsnchz / skills

创建符合 WCAG 2.2 AA 标准且保持高设计质量的无障碍生产级前端界面。在构建任何需要或期望满足无障碍合规（WCAG、ADA、Section 508、EN 301 549）的 Web 组件、页面、仪表板或应用时，或在审查/修复现有 UI 代码中的无障碍问题时，使用此技能。将全面的 W3C WAI 无障碍知识与独具特色的前端设计原则相结合。

W

web-artifacts-builder

bbeierle12 / skill-mcp-claude

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

W

wechat-theme-extractor

yangsonhung / awesome-agent-skills

在从微信文章中提取视觉样式并生成 markdown-wechat-converter 主题时使用。

W

well-actually

2389-research / review-squad

当你想就某个网站或项目获得吹毛求疵、爱挑刺、有主见的反馈时使用——就像 Hacker News 评论者、排版洁癖者、语法挑剔者和标准纯粹主义者会给出的那种反馈。它会找出专业评审因为「太琐碎」而跳过的问题。

W

wow-api-xml-schema

jburlison / wowaddonapiagents

World of Warcraft XML schema 的完整参考——用于在插件 XML 文件中定义 UI 框架、纹理、字体和动画的所有 XML 元素、属性、类型、默认值和继承关系。涵盖 <Ui>、<LayoutFrame>、<Frame> 及其所有子类型（Button、EditBox、Slider、StatusBar、Cooldown 等）、<Texture>、<MaskTexture>、<Line>、<FontString>、<Font>、<FontFamily>、<AnimationGroup>、<Animation> 及其所有子类型（Alpha、Scale、Translation、Path、Rotation），以及 <Anchors>、<Layers>、<Scripts>、<KeyValues>、<Color>、<Gradient>、<TexCoords>、<Shadow> 等共享元素。适用场景：编写或阅读 WoW 插件 XML 文件、在 XML 中定义框架、设置 XML 模板，或理解 XML 属性到 API 的映射。

3

3d-web-experience

liuchiawei / agent-skills

擅长构建 Web 3D 体验，使用 Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 场景。涵盖产品配置器、3D 作品集、沉浸式网站，以及为 Web 体验增添纵深感。适用于：3D 网站、three.js、WebGL、react three fiber、3D 体验。

A

adding-animations

fusengine / agents

第 4 阶段：通过 modify_frontend 添加 Framer Motion 滚动显现（IntersectionObserver）、悬停缩放/透明度过渡、焦点环状态、加载骨架屏、玻璃拟态模糊层、渐变光球背景。

A

adding-animations

fusengine / claude-plugins

通过认知自动化和协作式 Agent 系统重新定义开发。