Skills

S

ss-review

bitjaru / styleseed

审查 UI 代码是否符合设计系统规范、无障碍要求和最佳实践

S

ss-setup

bitjaru / styleseed

在搭建第一个界面之前，通过选择输出语法、领域、页面类型、品牌配方、语义化配色配方、可选的审美风格以及受限范围的品牌 token 来配置 StyleSeed。

S

ss-a11y

bitjaru / styleseed

审查组件或页面的可访问性问题并加以修复

C

creating-reanimated-animations

estevg / skills

为 React Native 应用生成 React Native Reanimated 动画代码。当用户要求在 React Native 中创建、实现或添加动画时使用，包括转场、手势、滚动联动效果、布局动画、布局转场、进入／退出动画、CSS 动画、CSS 转场、共用元素转场、颜色动画、视差、淡入淡出、滑动、缩放、弹簧、缓动、衰减、关键帧、worklet、手风琴、底部抽屉、翻牌卡片、折叠式标题栏，或使用 react-native-reanimated 实现的任何动效。也可用于将 react-native-gesture-handler 与 Reanimated 集成、理解 worklet、屏幕间动画切换、使用 Jest 测试动画，或检查哪些属性可参与动画。

U

ui-design-brain

carmahhawwari / ui-design-brain

基于 60 多个有文档说明的界面组件的真实组件模式与最佳实践，生成生产级 UI。当用户要求构建 Web 界面、页面、仪表盘、表单、导航或任何 UI 时使用——确保输出现代、简约、具备 SaaS 品质，并遵循设计系统规范，而非泛泛的 AI 套路。

M

mobile-first-design

aj-geddes / useful-ai-prompts

优先为移动设备设计，再扩展到更大的屏幕。创建在各种设备尺寸下都能顺畅运行的响应式界面。

M

magento-hyva-specialist

maxnorm / magento2-agent-skills

使用 Hyvä 主题框架开发高性能 Magento 2 商店前端。适用于使用 Hyvä 主题、Alpine.js、Tailwind CSS 或现代前端开发的场景。精通 Alpine.js 架构、Tailwind CSS 样式设计和性能优化，打造高速电商体验。

P

principle-experience-first

michael-denyer / pstack-claude

涉及产品、UX 或功能范围的权衡时应用。优先考虑用户满意度，而非实现便利；宁可推出更少但打磨完善的功能，也不要推出更多粗糙功能。

W

wot-ui-unocss-preset-guide

wot-ui / open-wot

指导安装、配置并使用 @wot-ui/unocss-preset。Invoke when 用户询问该预设的接入、配置、使用示例或常见问题排查。

S

sass-best-practices

mindrally / skills

Sass（缩进语法）最佳实践和编码规范，用于编写整洁、易维护的样式表

S

ss-lint

bitjaru / styleseed

快速自动 Lint，几秒内检测常见的设计系统违规问题

F

flux-best-practices

black-forest-labs / skills

BFL FLUX 图像生成模型的综合指南。涵盖提示词编写、T2I、I2I、结构化 JSON、十六进制颜色、排版、多参考图编辑，以及 FLUX.2 和 FLUX.1 系列各模型的最佳实践

U

ui-design-patterns

manutej / luxor-claude-marketplace

常见界面模式、导航模式、表单模式、数据展示模式、反馈模式和无障碍设计注意事项

W

webflow-mcp:designer-tools

webflow / webflow-skills

在 Webflow Designer 中构建和管理页面、元素、组件和样式。适用于添加区块、创建布局、构建元素、检查或更新组件、查看组件内部内容、重组页面、创建新页面、预览页面结构、为元素设置样式或管理组件属性。构建、样式化和检查可针对指定的页面 ID 无头运行——无需连接 Designer。Designer 是 `designer_tool` 操作所必需的（读取/切换画布上打开的页面、以交互方式选择元素、创建页面文件夹、打开组件的画布视图），以及 `element_snapshot_tool` 的视觉预览。

S

ss-feedback

bitjaru / styleseed

为组件或页面添加适当的用户反馈状态（加载、成功、错误、空状态）

U

ux-audit-rethink

mastepanoski / claude-skills

基于 IxDF 的 7 大因素、5 项可用性特征和 5 个交互维度进行全面的 UX 审计。以用户为中心的设计原则为基础进行整体评估，并提出重新设计方案。

D

dembrandt

dembrandt / dembrandt-skills

编排器，按品牌、设计令牌、布局、组件、打磨和无障碍等环节推进 UI/UX 任务。适用于设计评审、UI 构建或界面审计等多方面关注的工作。

P

product-design

mblode / agent-skills

明确交互方式、操作范围、可逆性、恢复方式以及可达状态。适用于被要求「设计这个流程」「删除是否应可撤销」「选择哪种控件」或「评审这个产品决策」时。

C

ce-dogfood

everyinc / compound-engineering-plugin

对当前分支进行免人工、按 diff 范围的浏览器 QA：梳理用户流程、驱动真实浏览器、自主修复小问题并补充回归测试后提交代码、依据产品角色设定评估体验，并输出可长期留存的 dogfood 报告。仅支持手动调用。

T

text-and-bitmaptext

phaserjs / phaser

在 Phaser 4 中显示文本时使用此技能。涵盖 Text 游戏对象、BitmapText、Web 字体、文本样式、换行、对齐、内边距和动态文本内容。触发词：Text、BitmapText、this.add.text、font、word wrap、text style。

D

draw-io

davila7 / claude-code-templates

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

K

konsta-ui

cap-go / capgo-skills

使用 Konsta UI v5 构建 Capacitor 应用 UI（基于 Tailwind CSS v4 的 iOS 和 Material 组件，支持 React 19、Vue 3、Svelte 5）——CSS 优先的设置（`@import 'tailwindcss'; @import 'konsta/react/theme.css';`）、`@theme` 中的 `--color-brand-*` 颜色、`<App theme="ios|material|parent" safeAreas dark>`、与 Ionic 混用时的 `KonstaProvider`、`ios:`/`material:` 变体、`pt-safe`/`no-safe-areas` 工具类、`k-md-vibrant`/`k-md-monochrome`，以及从 Konsta v3/v4 在 `tailwind.config.js` 中的 `konstaConfig` 迁移。在安装或升级 Konsta、组件渲染时无样式、主题或暗色模式无法切换，或 Navbar/Tabbar 与系统栏重叠时使用。不适用于 Ionic 组件（ionic-design）、不含 Konsta 的纯 Tailwind 设置（tailwind-capacitor），以及原生安全区域／edge-to-edge 配置（safe-area-handling）。

T

truesheet-usage

lodev09 / react-native-true-sheet

面向使用者的指南：将 @lodev09/react-native-true-sheet 集成到 React Native 应用中。只要用户想添加、配置、控制或调试使用 TrueSheet 的底部弹窗，就使用此技能——包括基于 ref 的弹窗、带名称的全局弹窗、使用 TrueSheetProvider/useTrueSheet 的 Web 支持、React Navigation 或 Expo Router 的弹窗流程、由 Reanimated 驱动的动画、可滚动内容、堆叠、页眉/页脚、吸附档位、peek、侧边弹窗、键盘处理、遮罩、背景、液态玻璃以及 Jest 测试。此外，在用户从 v3 迁移到 v4、排查布局或手势问题，或询问任何 TrueSheet 的属性、事件或方法时也使用此技能——即使他们没有提到「TrueSheet」这个名字，只是描述了 React Native 场景中的底部弹窗。

A

aso-appstore-screenshots

adamlyttleapps / claude-skill-aso-appstore-screenshots

通过分析你的应用代码库、发现核心卖点，并使用 Nano Banana Pro 制作 ASO 优化的高转化率 App Store 截图。

F

framer-motion-react

c-jeril / framer-motion-skills

Framer Motion 的官方 React 集成技能——AnimatePresence、motion 组件、useAnimation、布局动画。适用于构建 React 动画、在 Next.js 中使用 AnimatePresence 或 Framer Motion，以及咨询 Framer Motion 的 React 模式、清理方式或 SSR 的场景。

R

responsive-design

mindrally / skills

响应式 Web 设计的全面指南，涵盖移动优先方法、弹性布局、媒体查询和跨设备优化

S

snowflake

adobe / skills

当需要将 AI 生成的静态 HTML 页面（Stardust、Mobirise、Relume、Lovable、v0、源自 Figma 等）转换为 Edge Delivery Services 页面，同时保留原始设计并让内容可在 Document Authoring 中编辑时使用本技能。触发语包括"把这个页面转换成 EDS"、"static-to-EDS overlay"、"convert to EDS blocks"、"next experimentation"、"next run"、"start run"，或提供需要可在 DA 中编辑的源 URL。支持两种模式——页面级（带插槽标记的覆盖模板）和块级（每个版块成为独立的 EDS block）。对于规范化的 EDS 块重写迁移，请改用 page-import。

T

terminal-ui

pproenca / dot-skills

面向使用 Ink 和 Clack 的 TypeScript 应用的终端用户界面（TUI）性能与 UX 指南。在构建命令行工具、带 TUI 组件的交互式终端提示或开发者工具时应使用此技能。涉及 TUI 组件、CLI 提示、终端渲染、键盘输入处理或开发者工具的任务时触发。

H

huashu-slides

alchaincyf / huashu-skills

从内容到成品 PPTX 的端到端演示文稿制作，含 AI 插画生成和 18 种设计风格。当用户提到"做 PPT"、"做幻灯片"、"演示文稿"、"Keynote"、"slides"时使用。

N

nextjs-shadcn

laguagu / claude-code-nextjs-skills

使用 shadcn/ui 构建别具一格的 Next.js 界面，为产品挑选排版、样式和有目的的视觉效果。适用于创建或打磨 Next.js + shadcn 应用、页面或组件，包括主题、预设、背景和设计系统 lint。大幅视觉方向与图标资源获取分别使用 frontend-design 和 icons。

U

ux-principles

manutej / luxor-claude-marketplace

用户研究、可用性启发式、用户心理学、无障碍、包容性设计、用户测试与 UX 指标

G

ghost

mindrally / skills

使用 Handlebars 模板、Alpine.js、Tailwind CSS 进行 Ghost CMS 主题开发，并做性能优化

C

component-canvas

ibelick / ui-skills

构建一个全屏交互式画布，通过平移和缩放浏览现有 UI 组件及其变体。

S

ss-component

bitjaru / styleseed

按照 StyleSeed 设计规范生成新的 UI 组件

D

dream-loop

achimala / dream-loop

根据描述构建游戏或应用，使实时截图与生成的渲染画面一致。当用户说出「dream loop」或要求构建图形保真度极高的内容时使用。

S

ss-page

bitjaru / styleseed

根据编译后的 StyleSeed 输出语法、surface adapter、品牌配方和 project lock 搭建新的产品页面或界面。

W

webflow-mcp:flowkit-naming

webflow / webflow-skills

在 Webflow 中应用 Flowkit CSS 命名系统。适用于创建 class、审查现有命名，或按 Flowkit 规范构建新组件。Flowkit 是 Webflow 官方的 CSS 框架，采用 utility-first 思路。基于页面 ID 以无头方式运行，无需连接 Designer（可选的实时画布便利功能除外，如当前页面、交互式元素选择）。

A

add-component

signerlabs / shipswift-skills

从 ShipSwift 配方中添加 SwiftUI 组件。当用户说「添加组件」「添加一个视图」「添加 X 视图」「我需要一个图表」「添加动画」或想要某个特定 UI 元素时使用。

M

motion

motiondivision / ai-kit

适用于 Motion（原 Framer Motion）和 CSS 动画的动画技能。提供动画最佳实践（包括针对 vanilla JS、React、Vue、Base UI 和 Radix 的具体建议）、文档和示例搜索、CSS 弹簧与弹跳生成、MotionScore 代码和运行时性能审计及 Performance Doctor 修复，以及可视化过渡编辑器。适用于编写动画、使用 Motion（motion、motion/react、motion-v、framer-motion）、制作 UI 动画、编写 CSS linear() 弹簧、通过代码或运行时审计或修复动画缓慢、性能问题、卡顿或布局抖动、搜索 Motion 文档或示例、添加、插入或构建 Motion 组件或 Motion UI 区块，以及升级 Motion 版本。

S

ss-motion

bitjaru / styleseed

应用五种个性种子之一或关键词动作库中的指定 StyleSeed 动效。当用户要求某个特定动效，或提到「springy」「snappy」「shimmer」这类氛围词时使用。

S

syncfusion-react-grid

syncfusion / react-ui-components-skills

实现 Syncfusion React Grid 组件，用于功能丰富的数据表格和网格。适用于数据展示、排序、筛选、分组、聚合、编辑或导出等场景。涵盖网格配置、CRUD 操作、虚拟滚动或无限滚动、层次网格、状态持久化，以及面向数据密集型应用的高级数据管理功能。

C

carousel-writer

social-media-skills / skills

用于撰写轮播帖——可滑动多图帖文（Instagram 轮播、LinkedIn 文档/PDF 轮播，或 TikTok 图片轮播）——收藏率和停留时长最高的形式之一。当用户说「写个轮播帖」「轮播帖」「X 的幻灯片」「LinkedIn 文档/PDF 帖子」「滑动帖」「把这个做成轮播」，或需要多页讲解或故事内容时使用。先读取品牌资料与语气设定；封面页通过 hook-writer 用钩子吸引并承诺值得滑动；每页推进一个观点并赢得下一次滑动；最后以偏收藏的 CTA 收尾。指定设计方向，并附上幻灯片配图的图像生成提示词包（Nano Banana / Ideogram）。文案交给 caption-writer，排期交给 scheduling-and-queue。

S

ss-tokens

bitjaru / styleseed

从主色生成无障碍的语义化色板，或查看、新增、修改设计令牌。当用户提供品牌色，或需要明暗主题角色时使用。

W

web-shader-extractor

lixiaolin94 / skills

当用户给出或引用某个网页 URL，并希望提取、复现、移植或在本地重放 WebGL、WebGPU、Canvas、着色器类、动态背景、交互式 3D 或网页视觉效果时使用。会锁定目标渲染表面分组，记录着色器/资源/渲染图/时序/输入证据，构建与证据匹配的本地基线，然后将其项目化。不适用于普通的 DOM/CSS 页面克隆。

R

react-flow

framara / react-flow-skill

React Flow（@xyflow/react）专家指导：构建交互式节点图、自定义节点与边、句柄、状态管理、布局、TypeScript 模式、性能优化、无障碍、SSR 和主题。适用于编写 React Flow 代码、创建自定义节点或边、排查流程问题、优化图性能、集成 Zustand，或使用 React Flow 构建基于画布的 UI。

U

ui-ux-expert

martinholovsky / claude-skills-generator

专注用户中心设计、无障碍（WCAG 2.2）、设计系统和响应式界面的资深 UI/UX 设计师。适用于设计 Web/移动应用、实现无障碍界面、创建设计系统或开展可用性测试。

I

ios-liquid-glass

prisma-labs-dev / apple-skills

API 参考：Liquid Glass（iOS 26+）。可查询玻璃特效、导航模式、GlassEffect 修饰符和设计原则。

S

ss-score

bitjaru / styleseed

依据组合式 StyleSeed 规则集，为视觉成品的实现质量打 0-100 分 —— 包含分类拆解、依据和优先级排序的修复建议。

I

instagram-carousel

marcolang / marketing-skills

生成高质量的 Instagram 轮播帖，输出可滑动的 HTML 预览，并提供可直接导出的幻灯片（1080×1350px PNG）。覆盖完整工作流：品牌设置、幻灯片文案、视觉设计系统（颜色、字体、组件）、HTML 生成，以及基于 Playwright 的导出。只要用户要求创建、设计或生成 Instagram 轮播（carousel）、carrossel、slides para Instagram 或任何 Instagram 多图帖子，即使没有明确说出“carousel”或“skill”，也应使用此技能。同样适用于“create a post with multiple slides”、“fazer carrossel”、“exportar slides para o Instagram”等请求。

S

ss-pattern

bitjaru / styleseed

使用现有基础组件，根据当前 StyleSeed 语法和品牌配方生成组合式 UI 模式。

I

ios-development

rshankras / claude-code-apple-skills

全面的 iOS 开发指导，涵盖 Swift 最佳实践、SwiftUI 模式、依据 HIG 的 UI/UX 评审以及应用规划。用于 iOS 代码评审、最佳实践、无障碍审查或新 iOS 应用规划。

M

motion

mindrally / skills

使用 Motion（原 Motion One）原生 JavaScript 动画库构建高性能动画的专家指南

S

ss-flow

bitjaru / styleseed

按照成熟的 UX 模式设计用户流程和导航结构

R

replay-ux-research

getsentry / skills

分析 Sentry 会话回放，找出特定产品区域的 UX 模式、痛点和用户旅程。当用户针对任意 Sentry 产品界面提出「show me how users use」「day in the life」「UX research」「replay research」「how do customers use」「what's the user experience like for」「watch replays of」「analyze replays for」「user behavior on」或「replay UX audit」等请求时使用。

S

ss-copy

bitjaru / styleseed

按照随意但礼貌的语气和调性生成 UX 微文案（按钮标签、错误信息、空状态、toast）

F

framer-motion-scroll

c-jeril / framer-motion-skills

Framer Motion 官方技能，涵盖滚动联动动画——useScroll、useTransform、滚动触发动画、视差效果。适用于构建滚动驱动动画、视差效果、进度指示器，或询问 Framer Motion 滚动、useScroll、滚动联动动画相关内容。

W

web-development

mindrally / skills

涵盖 Bootstrap、Django、HTMX 以及通用 Web 最佳实践的开发指南

A

api-page-generator

kostja94 / marketing-skills

用于构建 API Page 的已废弃兼容入口。该页面现由 Pagina 维护；请安装并使用 page-builder 来构建新的 API Page。

B

billing-sdk

dodopayments / skills

BillingSDK，面向 Dodo Payments 计费 UI 的开源 React 与 shadcn 组件库。适用于在 React 或 Next.js 中构建定价表、定价页、账户计费页、用量计量、额度余额、账单历史，或取消与升级 UI，也可用于运行 @billingsdk/cli init；请将 Dodo API 调用保留在服务端。

N

nanobanana-ppt-skills

sickn33 / agentic-awesome-skills

AI 驱动的 PPT 生成，支持文档分析和风格化图像