Skills

M

motion-react

pedronauck / skills

使用 Motion（原名 Framer Motion）构建 React 动画，包括手势（拖动、悬停、轻触）、滚动效果、弹簧物理、布局动画、SVG、退出动画和 motion values。适用于构建 React 动画、添加悬停／轻触／拖动交互、滚动触发效果、布局过渡、共享元素动画、使用 AnimatePresence 实现退出动画，或处理 motion values 和弹簧。触发词：“animate”“motion component”“framer motion”“gesture”“drag”“scroll animation”“layout animation”“exit animation”“spring”“whileHover”“whileTap”“whileInView”“AnimatePresence”“layoutId”“useScroll”“useSpring”“useAnimate”“motion value”“reorder”“parallax”。

A

axiom-uikit

charleswiltgen / axiom

在 UIKit 与 SwiftUI 之间搭建桥接、现代化 UIKit 应用（场景生命周期、可调整大小）、调试 Auto Layout、Combine、TextKit、PencilKit 或 UIKit 动画时使用。

A

axiom-accessibility

charleswiltgen / axiom

修复或审查任何无障碍问题时使用——包括 VoiceOver、Dynamic Type、颜色对比度、触控目标、WCAG 合规性和 App Store 无障碍审核。

S

svelte

vercel-labs / json-render

用于 json-render 的 Svelte 5 渲染器，可将 JSON 规范转换为 Svelte 组件树。适用于使用 @json-render/svelte、根据 JSON 构建 Svelte UI、创建组件目录或渲染 AI 生成的规范。

U

ui-craft-dense-dashboard

educlopez / ui-craft

高密度仪表板／管理后台／Bloomberg／Retool／数据密集型内部工具。固定参数：CRAFT=7、MOTION=3、DENSITY=9。IBM Plex + 等宽数字、语义化调色板、4/8px 网格、迷你图、tabular-nums。触发词：仪表板、管理面板、数据密集型、分析、类似 Bloomberg、类似 Retool。

A

accessibility-testing

petrkindlmann / qa-skills

使用 axe-core + Playwright 检测 WCAG 2.2 AA 合规性，审计键盘导航，测试屏幕阅读器，验证 ARIA 模式，并映射法律合规要求（ADA、EAA、Section 508）。自动化工具只能发现 30-40% 的问题；此技能结合自动化和手动测试。适用于：“accessibility”“a11y”“WCAG”“screen reader”“axe”“keyboard navigation”“ARIA”“ADA compliance”。不适用于：Cookie 同意/GDPR 合规（使用 compliance-testing）；像素差异视觉回归（使用 visual-testing）。相关：playwright-automation、compliance-testing、visual-testing、ci-cd-integration

W

web-technique-to-skill

mengto / skills

将已构建的视觉或交互技术转化为可复用的 Web 设计技能：提取使其奏效的单一机制，并围绕该重点精确复现获批参考效果，再配套制作演示，以验证机制和视觉保真度。涵盖机制识别、清晰命名技术、说明已验证的运行环境和渲染器、审查参考图层、用具体数值而非形容词描述、保留自有暂存内容、记录代价高昂的注意事项、明确与相邻技能的界限，并在声称可用前通过浏览器验证。适用于页面、Canvas 场景、着色器、滚动效果、布局系统或悬停交互表现良好，且应沉淀为技能而非仅留在单个项目中的情况。

T

tailwind-css

bobmatnyc / claude-mpm-skills

Tailwind CSS 是一个实用类优先的框架，可用于快速开发支持响应式设计和深色模式的 UI

R

roblox-gui

sentinelcore / roblox-skills

构建、制作动画或调试 Roblox GUI 元素时使用，包括 HUD、菜单、世界空间 UI 和玩家标签。触发场景：ScreenGui 设置、SurfaceGui 或 BillboardGui 定位、UDim2 尺寸问题、TweenService UI 动画、响应式缩放、LocalScript GUI 逻辑、ResetOnSpawn 问题，或任何 Frame/TextLabel/ImageButton 布局工作。

B

build-interactive-particle-trail

mengto / skills

构建光标或触摸粒子交互效果：粒子沿经过的线段按距离发射到可循环使用的 GPU 点池中，并可选用键盘触发爆发效果。适用于交互式粒子轨迹、从表面扬起的花粉、指针扰动的灰尘、悬停粒子爆发，以及在不同手势速度下仍需保持间距一致的离散微粒。

F

filament-pro

marcelorodrigo / agent-skills

使用 Filament v5 构建 Laravel 管理面板。用于创建资源、表单、表格和小组件，以及使用 Livewire v4 测试管理界面。

V

vtex-io-storefront-react

vtex / skills

在为 Store Framework 体验构建 VTEX IO storefront 组件（位于 react/ 下）时使用。涵盖 storefront 组件结构、css-handles、storefront context hooks、浏览器安全的数据获取，以及组件作为主题区块使用时的行为。适用于自定义 storefront UI、产品组件、横幅、表单，或审查 VTEX IO 应用中面向购物者的 React 代码。

R

remotion-motion-graphics

haidrrrry / claude-remotion-skill

使用 Remotion（基于 React 的视频）创作和编辑专业的动态图形视频。每当用户想要制作视频、编辑视频、制作动画、构建片头/片尾/Logo 动画、创作 Reel/Short/推广/发布视频、为素材添加文字动画或字幕、将图片和 B-roll 合成到视频中，或提到 Remotion、动态图形、视频渲染、"让这个视频看起来更好/更不千篇一律"时，都要使用该技能。此外，在编辑已有的 Remotion 项目时，或用户抱怨他们的视频看起来平淡、泛泛或不专业时也应触发 —— 该技能包含确切的修复方法。在编写任何 Remotion 代码之前，务必先阅读该技能。

B

build-wireframe-scan-reveal

mengto / skills

使用不断扩展的世界空间扫描显现 Three.js 几何体：线框笼先于实体表面显现，随后逐渐消散。适用于线框扫描、径向网格显现、探测脉冲、全息组装、拓扑介绍，以及需要说明 3D 模型形态、而非简单淡出效果的入场动画。

R

resend-design-skills

resend / design-skills

需要 Resend 设计资源时使用。可查阅品牌指南和视觉形象。

B

bootstrap

mindrally / skills

用于响应式布局、组件和实用优先样式的 Bootstrap 开发指南。

C

cinetic

leonxlnx / cinetic

通过代码策划、制作并渲染高品质电影感动态设计，包括发布影片、产品与功能视频、用于落地页和社交媒体的循环功能动画、Logo 动效与揭示、UI 演示、应用演示、动态字体、预告片、片头和宣传短片。用户希望使用 Remotion、HyperFrames、HTML/GSAP 或 React 制作任何视频、动画、动态图形或动画演示，或要求为其绘制分镜、安排时间、配乐、渲染、润色或评价时，均可使用；即使用户只说“制作一个关于 X 的视频”“为此功能制作动画”或“我们需要一段发布短片”也适用。提供概念与文案规范、遵循所提供品牌的字体与色彩审美、驱动画面和代码生成音轨的节拍锁定时间线、编排与转场技巧、动态呈现真实产品 UI、电影级后期处理（真实运动模糊、无色带、BT.709、经过同步检查的复用），并通过联系表和渲染结果进行适度的自我批评迭代。

F

figma-use-motion

figma / mcp-server-guide

用于 `use_figma` MCP 工具的动效／动画上下文——通过手动关键帧、动画样式、缓动和时间线时长为 Figma 节点制作动画。任务涉及添加、编辑或检查节点动画时，与 figma-use 一起加载。也涵盖自定义动画样式的使用。

V

visual-style

calesthio / openmontage

通过 visual-style.md 文件创建、提取和应用可移植的视觉设计系统。适用于：（1）从零创建 visual-style.md 设计系统；（2）从网站 URL、视频或 PDF 品牌指南中提取视觉风格；（3）将视觉风格应用于 HeyGen 视频、HTML 幻灯片、Figma 或 paper.design；（4）浏览预制视觉风格库（Swiss、Saul Bass、Game Boy 等）；（5）用户提到“visual style”“design system”“brand style”或“style guide”；（6）为 HeyGen 视频设计统一的视觉语言。

B

blog-page-generator

kostja94 / marketing-skills

用于构建 Blog Index 的弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 构建新的 Blog Index。

U

ui-mobile

alinaqi / maggy

移动端 UI 模式——React Native、iOS/Android、触控目标

R

reference-to-motion

charlie947 / motion-graphics-skills

把你欣赏的参考素材转化为针对你自己主题和品牌的逐场景 Claude Motion 提示词。它接收一段视频以提取动效手法（截图、帧或某个短片或广告的缩略图拼版），并可选择接收一个外观参考以确定风格（网站、品牌、情绪板）。当有人说 "make me something like this"、"break down this reference"、"use my website as the look" 或 "turn this into a Motion prompt" 时使用。输出一份简短拆解，然后一条可直接粘贴、为每个场景标注时长的 Motion 提示词。

U

ui-ux-pro-max

pixel-process-ug / superkit-agents

用户需要全面的 UI/UX 设计指导时使用，涵盖样式、配色、字体、UX 指南、图表选择，以及在任何受支持技术栈上的无障碍、高性能实现。触发条件：用户提及“design”“UI”“UX”“color palette”“typography”“accessibility”“responsive design”“chart type”“style guide”，或正在构建任何面向用户的界面。

H

homepage-generator

kostja94 / marketing-skills

用于构建 Homepage 的已弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 构建新的 Homepage。

P

products-page-generator

kostja94 / marketing-skills

用于构建 Commerce Product Page 的已弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 构建新的 Commerce Product Page。

W

winforms-expert

dotnet / skills

仅当请求中包含明确的 Windows Forms 标记时，才创建、修改、调试或审查 Windows Forms 应用程序。适用于：WinForms、Windows Forms、System.Windows.Forms、WinForms Form 或 UserControl 设计器文件（*.Designer.cs 或 *.Designer.vb）、Visual Studio WinForms Designer、TableLayoutPanel、BindingSource、DataGridView、Control.InvokeAsync、组件托盘所有权或自定义控件序列化。不适用于：WPF 或 WPF XAML（包括 Window.InputBindings、KeyBinding、commands 或 DataContext）；.NET MAUI；Avalonia；以及未包含任何所列 Windows Forms 标记的请求。

E

ecommerce-branding

nexscope-ai / ecommerce-skills

构建并强化电商品牌形象。涵盖品牌定位、信息传达、视觉形象指南，以及销售渠道和营销触点上的品牌一致性。

B

brand-extract

nexu-io / open-design

通过操作应用内浏览器，从实时网站提取完整的 Brand Kit。适用于品牌提取项目在 Browser 标签页中打开网站，或用户要求“提取品牌”、“从 <url> 获取品牌”、“获取此网站的颜色/字体/徽标”，或基于参考网站构建品牌/设计系统时。与 agent-browser 工具配合使用；若反机器人页面拦截访问，则暂停并等待用户处理。

I

interior-design-visualization

eachlabs / skills

使用 each::sense AI 可视化室内设计改造。重新设计房间、更换风格、更新配色方案，并根据现有空间的照片预览翻新效果。

M

mintlify

cline / skills

构建 Mintlify 文档站点的全面参考资料。适用于创建页面、配置 docs.json、添加组件、设置导航或处理 API 参考。可跳转至所有组件和配置选项的详细参考文件。

L

law-of-similarity

owl-listener / designer-skills

应用相似性定律——通过共享的颜色、形状或尺寸信号表明元素属于同一类别。需要在相距较远的位置之间表达关联时使用。若要按位置分组，请使用 `law-of-proximity`。

V

vtex-io-admin-react

vtex / skills

在 admin builder 下构建面向管理端的 VTEX IO React 界面时使用。涵盖 VTEX Styleguide 和 Shoreline 的使用、管理页面组合、数据密集型管理交互，以及使管理界面与 VTEX Admin 环境保持一致。适用于 VTEX Admin 内的设置页面、审核工具、仪表板或运营 UI。

A

academic-pptx

gabberflast / academic-pptx-skill

用户想要创建或改进学术场景的演示文稿时，均使用此技能——例如学术会议论文报告、研讨会演讲、论文答辩、基金申请简报、实验室会议、特邀讲座，或任何观众会评估论证与证据的演示。触发词包括“conference talk”“seminar slides”“thesis defense”“research presentation”“academic deck”“academic presentation”。用户将“制作幻灯片”与学术内容结合提出请求时也会触发，例如“为我关于 X 的论文制作幻灯片”“为我的论文答辩创建演示文稿”“为我的基金申请制作演示文稿”。此技能负责内容和结构决策。创建或编辑 .pptx 文件本身的技术工作还需阅读 pptx SKILL.md。

F

faq-page-generator

kostja94 / marketing-skills

用于构建 FAQ Page 的弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 构建新的 FAQ Page。

E

elements

assistant-ui / skills

安装并自定义 assistant-ui 元素，即通过 `npx assistant-ui@latest add <item>` 从 r.assistant-ui.com registry 提供的 shadcn 风格组件目录。适用于：添加预置的聊天界面或组件（Thread、ThreadList、AssistantModal、AssistantSidebar、ToolFallback、ToolGroup、MarkdownText、Reasoning、Sources、Attachment、ModelSelector、Voice orb、McpConfig），或 120 个独立元素之一（approval card、agent plan、code diff、data table、chart 等）；在运行时连接的 `<name>.aui.tsx` 文件与基于 props 的独立文件之间做选择；通过 `components` 属性覆盖 Thread 插槽；编辑复制到 `components/assistant-ui/elements/` 下的源码；或在 `components.json` 中选择 Radix 还是 Base UI 风格。当来自 `@/components/assistant-ui/...` 的导入失败、元素渲染时没有样式，或 CLI 安装了错误的风格时，请转到此处。如需无样式的构建块，请使用 primitives；如需 CLI 脚手架本身，请使用 setup。

L

logo-generator

kostja94 / marketing-skills

用于构建 Logo 的弃用兼容条目。此组件现由 Bricks 维护；安装并使用 component-builder 构建新的 Logo。

A

agent-ui

inference-sh / skills

来自 ui.inference.sh 的 React/Next.js 开箱即用 Agent 组件。一个组件内置运行时、工具、流式传输、审批和微件。能力：即插即用 Agent、human-in-the-loop、客户端工具、表单填写。用于：构建 AI 聊天界面、Agentic UI、SaaS copilot、助手。触发词：agent component、agent ui、chat agent、shadcn agent、react agent、agentic ui、ai assistant ui、copilot ui、inference ui、human in the loop。

C

conversational-ux

owl-listener / designer-skills

设计语音和对话界面——对话流程、错误恢复和角色设定。适用于界面通过语音交流而非点击操作的场景。若要收集图形化输入，请使用 `form-design`。

C

cta-generator

kostja94 / marketing-skills

用于构建 Call to Action 的弃用兼容条目。此组件现由 Bricks 维护；安装并使用 component-builder 来构建新的 Call to Action。

L

law-of-figure-ground

owl-listener / designer-skills

应用图形-背景法则——确定哪个层级是前景且可操作的，哪个是背景。用于设计模态框、叠加层和纵深效果。若要在同级元素中突出某个元素，请使用 `von-restorff-effect`。

L

law-of-closure

owl-listener / designer-skills

应用闭合律：人眼会根据不完整形状补全隐含的形状。通过移除边框或利用负空间暗示结构来减轻视觉重量时使用。对于明确的容器，请使用 `law-of-common-region`。

M

motion

hairyf / skills

适用于 JavaScript、React 和 Vue 的 Motion 动画库。用于创建动画、手势、布局过渡、滚动联动效果，或处理 motion 值和动画控制。

F

flutter-theming

flutter / agent-plugins

暂无简介

F

framer-motion

pproenca / dot-skills

Framer Motion 性能优化指南。编写、审查或重构使用 Framer Motion 的 React 动画时，使用此技能以确保采用最佳性能模式。适用于涉及 motion 组件、动画、手势、布局过渡、滚动联动效果和 SVG 动画的任务

L

law-of-continuity

owl-listener / designer-skills

运用连续性法则——视线会沿着对齐和连贯的路径移动。适用于安排步骤、对齐内容，或设计轮播和时间线。若要分组而非排序，请使用 `law-of-proximity`。

U

ui-design-review

mastepanoski / claude-skills

全面评估视觉设计与美学。分析排版、颜色、间距、层级、一致性、品牌形象，以及当前产品类别的惯例，帮助打造精致、专业的界面。

V

vocabulary

index-how / vocabulary

index.how/to/articulate 使用的精准设计与 UI 术语，涵盖字体排印、色彩、图标、布局、交互、动效、无障碍、信息架构、文案、工具、分析和组件。当需要准确表达设计概念（“两个特定字母之间的间距叫什么？”）、为含糊描述的 UI 想法找到恰当名称、区分容易混淆的近义词（徽章与标签、工具提示与弹出框、不透明度与可见性、字偶间距与字距），或编写、审阅文案、规范、提交记录并希望使用精确术语而非模糊表达时使用。

暂无简介

P

platform-conventions

owl-listener / designer-skills

按照 iOS 和 Android 规范进行设计——了解各操作系统的要求、差异之处以及何时统一。发布原生应用时使用。适配断点请使用 `responsive-design`；匹配竞品模式请使用 `jakobs-law`（interaction-design）。

S

scroll-animations

dylantarre / animation-principles

在滚动时触发动画——包括显现效果、视差、粘性页眉、进度指示器或任何与滚动关联的动态效果。

L

lottie

mindrally / skills

在 Web 上实现高性能 Lottie 动画的专家指南

R

recharts

andy-spike / skills

使用 Recharts 库构建可组合的响应式 React 图表。适用于创建数据可视化，包括折线图、面积图、柱状图、饼图、散点图和组合图。支持图表自定义、响应式尺寸、工具提示、图例、坐标轴配置、性能优化和无障碍功能。

C

capacitor-splash-screen

cap-go / capgo-skills

使用 @capacitor/splash-screen 和 @capacitor/assets 配置并调试 Capacitor 应用的启动屏幕：`launchAutoHide`、`SplashScreen.hide()`、`launchFadeOutDuration`（Capacitor 9 中 Android 默认值从 200 改为 0）、Android 12+ SplashScreen API 主题（`Theme.SplashScreen`、`windowSplashScreenAnimatedIcon`）、iOS `LaunchScreen.storyboard` + `Splash.imageset`，以及 Capacitor 8.5 的 UIScene/SceneDelegate 影响（窗口在代码中创建，Main.storyboard 不再提供根视图控制器）。适用于启动时白屏或黑屏闪烁、启动屏幕一直不隐藏、Android 12 图标被裁切或过小、深色模式启动屏幕，或重新生成图标和启动屏幕资源。不要用于状态栏/导航栏颜色和内边距（safe-area-handling）、UIScene 迁移本身（capacitor-uiscene-migration）或启动性能分析（capacitor-performance）。

F

framer-motion

calesthio / openmontage

在 React 应用中使用 Framer Motion 实现 Disney 的 12 条动画原则时使用

L

lottie-bodymovin

calesthio / openmontage

使用从 After Effects 导出的 Lottie 动画实现 Disney 的 12 条动画原则时使用

M

motion-principles

athevon / genjutsu

面向 Claude Code、claude.ai 和 Cowork 的创意编码技能，涵盖 Web（GSAP、Motion、Three.js、CSS）、Android（Jetpack Compose）和 Apple（SwiftUI）的动效、微交互与设计系统。先提出交互方案供你批准，再编写代码。拒绝 AI 垃圾设计。

S

shadcn-svelte

vercel-labs / json-render

为 json-render Svelte 应用预先构建的 shadcn-svelte 组件。适用于使用 @json-render/shadcn-svelte、向 Svelte 目录添加标准 UI 组件，或使用 shadcn-svelte + Tailwind CSS 组件构建 Svelte 网页界面。

T

tailwind-patterns

jezweb / claude-skills

适用于生产环境的 Tailwind CSS 常见网站组件模式：响应式布局、卡片、导航、表单、按钮和排版。包含间距比例、断点、移动优先模式和深色模式支持。构建 UI 组件、创建落地页、设置表单样式、实现导航或修复响应式布局时使用。

D

design-system

jezweb / claude-skills

将现有网站或屏幕截图中的完整设计系统提取到 DESIGN.md 文件中。通过浏览器自动化和 HTML 检查分析颜色、字体排印、组件样式、间距和氛围。生成语义化设计系统文档，以优化页面生成的一致性。触发词：“extract design system”“design system”“create DESIGN.md”“analyse the design”“what design does this site use”“extract styles from”“reverse engineer the design”。

P

pyqt6-ui-development-rules

oimiragieo / agent-studio

PyQt6 桌面 GUI 开发规则——信号／槽架构、QSS 主题、QThread 并发、布局管理和跨平台渲染。确保 MVC 分离和响应式 UI 模式。