Skills

A

animate

nexu-io / open-design

实现有明确目的的界面动画：缓动、弹簧效果、中断、退出和减少动态效果。用于现有组件或已确认的 UI 简报；这不是视频模板。

.png 和 .pdf 文档中使用设计理念创建精美的视觉艺术作品。当用户要求创建海报、艺术作品、设计或其他静态作品时，应使用此技能。创建原创视觉设计，不要复制现有艺术家的作品以避免侵犯版权。

C

css-styling-expert

cin12211 / orca-q

精通现代 CSS 特性、响应式设计、CSS-in-JS 优化、性能、无障碍设计和设计系统的 CSS 架构与样式专家。遇到 CSS 布局问题、样式架构、响应式设计问题、CSS-in-JS 性能、主题实现、跨浏览器兼容性或设计系统开发时，主动使用。如果有更合适的专业专家，我会建议切换并停止。

F

figma-audit-accessibility

southleft / figma-console-mcp-skills

针对单个 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 套餐。若要大范围扫描整个页面/画框，使用 figma-lint-design；若进行代码侧（HTML）检查，使用 figma-scan-code-accessibility。

F

frontend-enhancer

travisjneuman / .claude

提升 Web 应用的视觉设计：现代 UI 组件、布局、响应式设计、调色板和动画。用于样式设计和 UI 润色；探索新的设计方向时，先搭配 ui-research 使用。

P

pr-screenshots

github / awesome-copilot

在拉取请求描述中嵌入前后对比截图和带注释的图片。涵盖 PR 描述模式、Azure DevOps 和 GitHub 的图片上传，以及尺寸最佳实践。

S

scene-menu-bar

posthog / posthog

在场景的 <SceneTitleSection> 上方添加或编辑 SceneMenuBar 的约定。在添加新菜单项、在菜单间移动项目、用功能开关控制、构建新场景的 menubar，或将富输入（标签、combobox）接入该栏中使用。

S

spatial-swiftui-developer

tomkrikorian / visionosagents

设计并实现集成 RealityKit 内容的 visionOS 27 SwiftUI 场景。适用于使用 RealityView、Model3D、附件、体积窗口、ImmersiveSpace、空间手势、窗口管理、空间布局，或为 3D 呈现选择 SwiftUI 与 RealityKit API 的场景。

T

threejs-syntax-materials

impertio-studio / three.js-claude-skill-package

用于在 Three.js 中选择或配置材质、加载纹理或搭建 PBR 工作流时。可避免纹理色彩空间错误、忘记 material.dispose() 或修改后未调用 material.needsUpdate 等常见错误。涵盖全部 15 种以上材质类型、PBR 金属度/粗糙度、MeshPhysicalMaterial、纹理贴图、色彩空间。关键词：MeshStandardMaterial、MeshPhysicalMaterial、material、texture、PBR、metalness、roughness、normalMap、color space、SRGBColorSpace、blurry texture、pixelated、texture quality、filtering。

U

ui-radar

uizze / uizze

从 UIZZE 超过 800,000 个网页和 iOS 界面中查找并对比真实 UI 示例。用于 UI 灵感、UI 调研、设计参考、同类应用、用户流程、布局、导航、组件、交互状态和产品模式,在设计或重设计界面之前使用。

U

unlayer

unlayer / unlayer-skills

根据需求路由到特定的 Unlayer 子技能，涵盖构建器集成、独立的 Image Editor、自定义工具、内容导出或编辑器配置。

W

web-design-guidelines

pedronauck / skills

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

W

web-interface-architect

qodex-ai / ai-agent-skills

规划和设计 Web 应用界面，为 Web 平台制定组件系统、交互流程和响应式布局。

B

bug-reporting

mgifford / accessibility-skills

在提交、评审或生成无障碍缺陷报告时加载此 skill——无论是来自自动化工具输出、手动测试、用户报告，还是与残障人士一起测试。此 skill 的目的是让无障碍问题更易被准确报告，将它们与真实的人和任务关联起来，并让开发者无需反复沟通即可复现、理解和修复。在引用 WCAG 准则之前，绝对必须始终先描述障碍及其对任务的影响。在任何情况下都不得猜测残障诊断、将自动化工具输出视为合规结论，或在报告中泄露机密/个人数据。

C

canva-automation

davepoon / buildwithclaude

通过 Rube MCP (Composio) 自动化 Canva 任务：设计、导出、文件夹、品牌模板和自动填充。务必先搜索工具，以获取当前 schema。

D

dashboard-design

arnavpuri / designskills

面向信息密集界面的数据仪表盘和管理面板模式：应用外壳布局、KPI 卡片、图表选择、数据表格、状态徽章、实时指示器和响应式行为。当用户要求"构建仪表盘"、"创建管理面板"、"设计分析页面"、"制作数据视图"、"构建设置页面"、"创建表格视图"、"设计 CRM"、"构建内部工具"或任何数据密集型界面工作时使用。通用组件使用 ui-design；营销 KPI/功能卡片使用 card-design；主题细节使用 dark-mode。

E

extract-page-data

lintendo / axhub-skills

使用 Playwright 从任意网页提取结构化数据，包括截图、设计令牌、Markdown 格式的页面文本、交互元素映射和完整页面数据包。用户想要截取网页（整页或元素）截图、提取 CSS 设计令牌或主题信息、将页面内容转换为 Markdown、收集页面链接和交互元素，或导出完整的页面分析包时，使用此技能。适用于除 Axure 原型之外的所有 URL；Axure URL 请改用 extract-axure-data。

F

flowchart

unclecheng-li / ai_animation

生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。

G

geist-learning-lab

vercel-labs / skill-geist-learning-labs

使用 Geist 设计系统构建 Next.js 探索式交互学习体验。在创建教程、可探索式讲解、交互课程、代码沙盒、测验或任何教育类 UI 时使用。涵盖 Learning Loop 教学法、23 种以上的学习组件模式、进度跟踪、间隔重复和 Bret-Victor 风格的交互探索，均采用 Geist 深色优先的极简美学。

G

generic-design-system

travisjneuman / .claude

适用于任何项目的完整设计系统参考，涵盖颜色、排版、间距、组件和动画。可适配项目主题和技术栈。用于实现 UI、选择颜色、创建动画或确保品牌一致性。对于新的设计系统，请先使用 ui-research 技能。

G

graphic-designer

pablostanley / designteam-app

处理色彩系统、字体排印、构图、图像方向和视觉识别相关工作时启用。

M

marp-slides

robonuggets / marp-slides

创建精美的 MARP 演示文稿，包含 SVG 图表、交互元素、仪表板组件、动画、深色/浅色主题。触发词为 "marp"、"slides"、"presentation"、"deck"。

M

moai-domain-frontend

modu-ai / moai-adk

前端开发专家，涵盖 React 19、Next.js 16、Vue 3.5 以及基于组件架构的现代 UI/UX 模式。构建 Web UI、实现组件、优化前端性能或集成状态管理时使用

O

oil-motion

nexu-io / open-design

处理视频和序列帧，编译滚动、指针、拖动与状态驱动的网页动效；内含本地媒体处理脚本和运行时。新素材生成使用宿主工具。

S

site-motion-excellence-director

frankxai / awesome-motion-design-agent-skills

在规划、审查、制定规范、实现或改进 FrankX、Arcanea、Starlight 或 Vercel/Next.js 网站的高端网站/应用动效时使用。适用于动效设计系统、网站动态编排、滚动动效、生成媒体集成、运行时选择、减少动效方案、视觉 QA，以及将初步动效构想转化为可实施的规格说明。

T

tanstack-table

oakoss / agent-skills

适用于 React 的 TanStack Table v8 无头数据表。涵盖列定义、排序、筛选（模糊／分面）、通过 TanStack Query 实现服务端分页、无限滚动、虚拟化（TanStack Virtual）、固定列／行、行展开／分组、列宽调整，以及可复用的 Shadcn 风格组件。可避免 15 种已记录错误，包括无限重新渲染、与 React Compiler 不兼容，以及服务端状态不匹配。构建数据表、修复表格性能问题、实现服务端分页、添加筛选／排序或调试表格状态问题时使用。

U

user-personalization

mgifford / accessibility-skills

当项目具有个性化功能、用户偏好控制、主题选择器、字号调节、动效开关、对比度设置或任何用户可配置的无障碍适配时，加载此 skill。在任何情况下都不得在未经用户明确同意时覆盖或忽略用户操作系统级的无障碍偏好。绝对必须始终持久化用户偏好、立即应用它们，并遵循 prefers-reduced-motion、prefers-contrast 及类似的媒体查询。

W

web-styling-cva

agents-inc / skills

Class Variance Authority——使用 cva()、复合变体和 VariantProps 实现类型安全的组件变体样式

W

windows-app-developer

404kidwiz / claude-supercode-skills

擅长使用 WinUI 3、WPF 和 Windows App SDK 构建现代 Windows 应用程序。专长包括 MSIX 打包、XAML 样式和 MVVM 架构。

Y

youtube-thumbnail-design

styleof / superpowers

YouTube 缩略图设计，涵盖具体尺寸、对比度规则和移动端预览优化。包括安全区域、文字排布、面部表情心理学和 A/B 测试。适用于：YouTube 缩略图、视频封面图片、点击率优化。触发词：YouTube 缩略图、缩略图设计、视频缩略图、点击率、CTR 优化、YouTube 封面、视频封面图片、缩略图制作工具、缩略图技巧、YouTube 设计、视频预览图片

A

a11y-playwright-testing

fugazi / test-automation-skills-agents

使用 Playwright（@playwright/test）、TypeScript 和 axe-core 对 Web 应用进行无障碍测试。用于编写、运行或调试 WCAG 2.2 AA 检查、键盘与焦点测试、ARIA/语义验证、无障碍名称、表单标签、颜色对比度或屏幕阅读器测试模式。关键词：无障碍、WCAG、axe-core、键盘导航、焦点管理、ARIA。

A

apple-design

boraoztunc / skills

将 Apple 的界面设计和流畅、富有物理感的动效理念转化为适用于 Web 的方法。构建或评审手势驱动的 UI、弹簧动画、拖动／滑动／面板交互、惯性和可中断过渡、半透明材质与景深、排版（光学字号、字距、行距）、减少动态效果，或 Apple 风格界面的设计基础（反馈、空间一致性、克制）时使用。

A

architecture-diagram

mathews-tom / armory

生成完全可编辑的 SVG 架构图，云图使用原生 AWS、Azure 和 GCP 图标，其他图使用手绘风格通用图标。可选提供自包含的可编辑 draw.io mxGraph 配套文件。确定性布局自动计算区域嵌套和正交布线，而非手动放置坐标。触发词："architecture diagram"、"infra diagram"、"system diagram"、"deployment diagram"、"topology diagram"、"draw architecture"、"AWS diagram"、"Azure diagram"、"GCP diagram"、"cloud infrastructure diagram"、"VPC diagram"、"draw my AWS setup"。适用于用户想要一张之后仍能在 Figma、Illustrator、Inkscape 或 draw.io 中编辑的静态架构图时。不用于架构评审，请使用 architecture-reviewer。

D

design-guidelines

even-realities / everything-evenhub

Even Hub G2 智能眼镜的 UI/UX 设计指南——涵盖显示限制、布局模式、图标设计、Unicode 字符和社区资源。在设计眼镜应用界面或规划布局时使用。

G

generate-component-story

longbridge / gpui-kit

使用 GPUI 构建出色跨平台桌面应用的 Rust GUI 组件。

G

generic-fullstack-design-system

travisjneuman / .claude

全栈应用的完整设计系统参考。涵盖颜色、排版、间距、组件模式（shadcn/ui）、效果、GPU 加速动画和 WCAG AA 无障碍要求。实现 UI、选择颜色、应用间距、创建组件或确保品牌一致性时使用。

I

image-poster-generate

meitu / meitu-skills

文/图生海报，多风格多尺寸带排版，支持参考图/已有海报修改文字/背景/元素。当用户提到海报、宣传图、广告图、Banner、推广图、营销图、活动海报、促销海报、poster 时触发。

L

landing-page-audit

itallstartedwithaidea / agent-skills

Landing Page Audit 技能会全面评估点击后的体验，结合技术性能分析与转化率优化（CRO）评估。

L

lynx-openui

lynx-community / skills

为 Lynx OpenUI 渲染器生成有效的 OpenUI Lang v0.5 函数式记法程序。适用于 Codex 必须把自然语言的 UI 请求转换为供 OpenUiRenderer 使用的原始 OpenUI DSL 的场景，包括静态移动端 UI、$state、Query/Mutation 工具流程、Action 计划、流式友好输出，或受 catalog 约束的修改。不适用于 JSX、HTML、CSS、A2UI JSON，或实现新的 ReactLynx 组件。

M

miro-code-explain-on-board

miroapp / miro-ai

当用户想要在 Miro 看板上解释或可视化代码库时使用——基于真实仓库产物，产出最小且标注正确的架构/结构/行为图（流程图、UML 类图、UML 时序图、ERD）以及一份简短的配套文档。

P

presentation-design

dhruvjainin / absolute

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

P

presentation-design

maddhruv / absolute

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

P

pseudo-elements

raphaelsalaja / userinterface-wiki

审查 CSS 中伪元素的最佳实践和 View Transitions API 的使用情况。检查悬停效果、装饰层或页面过渡时使用。输出文件:行号格式的问题。

R

responsive-images

oakoss / agent-skills

使用 srcset、sizes、延迟加载和现代格式（WebP、AVIF）实现高性能响应式图像。涵盖用于防止 CLS 的 aspect-ratio、用于艺术指导的 picture 元素，以及用于优化 LCP 的 fetchpriority。添加页面图像、优化 Core Web Vitals、防止布局偏移、实现艺术指导或转换为现代格式时使用。

R

roblox-ui-implementation

ashexplained / roblox-skills

在 Studio 中实现 Roblox UI。适用于 ScreenGui、HUD、菜单、移动端安全布局、UI 状态控制器、触控操作、按钮、进度条、商店面板、奖励界面，以及通过 Roblox Studio MCP 验证 UI。

T

tailwind-css

iliaal / ai-skills

Tailwind CSS v4 模式：CSS 优先配置、工具类、组件变体和 v3 迁移。使用 Tailwind 编写样式、配置 @theme 令牌、使用 tailwind-variants/CVA、从 v3 迁移到 v4，或修复 Tailwind 样式和深色模式时使用

T

textual-builder

ypares / agent-skills

使用 Textual Python 框架（v0.86.0+）构建文本用户界面（TUI）应用。适用于创建基于终端的应用、制作纸牌游戏或交互式命令行原型，或用户提到 Textual、TUI 或终端 UI 时。包含全面的参考文档、纸牌游戏起始模板和样式指南。

V

valantic-brand

valantic-cec-deutschland-gmbh / claude-code-marketplace

应用 Valantic 的 "Liquid Brand Design" 体系，包括特定的视觉路线（A、B、C）、官方配色、字体以及办公/网页标准。

V

valantic-docx

valantic-cec-deutschland-gmbh / claude-code-marketplace

遵循 Valantic 的 Liquid Brand Design 生成品牌化 Word 文档（提案书、报告、规格说明），样式、配色与格式正确。

V

valantic-pdf

valantic-cec-deutschland-gmbh / claude-code-marketplace

遵循 Valantic 的 Liquid Brand Design 生成品牌化 PDF 文档（报告、白皮书、提案书），配色、字体与版式正确。

V

valantic-pptx

valantic-cec-deutschland-gmbh / claude-code-marketplace

遵循 Valantic 的 Liquid Brand Design 体系创建品牌化 PowerPoint 演示文稿，包含正确的幻灯片版式、配色与字体。

V

vueuse-motion-skilld

skilld-dev / vue-ecosystem-skills

在编写、审查或调试导入 @vueuse/motion 的代码时使用（v-motion 指令、Motion/MotionGroup 组件、useMotion、useSpring、预设、Nuxt 模块）。提供正确的 v3.x API 用法、变体和过渡语法、SSR 行为，以及 Vue 3 和 Nuxt 3 的配置方法。

W

wewrite-publish

imraywang / wewrite

WeWrite 排版发布模块：把 Markdown 做成微信预览，或在用户明确授权后推入公众号草稿箱；也支持主题画廊和图片帖。只处理微信公众号。

W

wewrite-visual

imraywang / wewrite

WeWrite 视觉模块：为公众号文章生成封面和必要的内文配图，或只交付提示词。触发词： 封面图、公众号配图、给文章配图、换封面。通用绘图和 logo 设计不触发。

X

xiaohongshu-card-notes

postplusai / postplus-skills

将现有 HTML 页面、落地页、口播稿、备忘录草稿、结果表或结构化素材转换为小红书卡片式图片笔记。用户希望基于素材进行逐页卡片规划、撰写封面文案或卡片文字，或制作可直接用于设计的小红书图片帖简报，而非从零撰写普通笔记时使用。此技能尤其适用于 3:4 小红书卡片，可混合以图片为主的页面和高密度备忘录页面，采用清晰的信息层级和适合截图的文字密度，而非泛泛且稀疏的轮播文案。

A

accessibility-tester

404kidwiz / claude-supercode-skills

WCAG 2.2 AA 合规专家，专长于审计、自动化测试、屏幕阅读器验证和问题修复。

B

brainstorm-prototypes

neeeophytee / finding-unknowns-skills

生成若干个真正不同的即用即弃变体（设计、方案、草稿），供用户做出反应。当用户只能通过看到才能认出自己想要什么时——视觉设计、UX 流程、命名、语气——或要求在构建前进行头脑风暴或制作原型时使用。

C

ci-cd

mgifford / accessibility-skills

在配置或审查 CI/CD 管道、GitHub Actions 工作流或自动化测试设置时加载此技能。通过执行质量门禁、结构化报告以及覆盖所有页面和用户偏好的分层自动化加手动测试，确保无障碍回归在代码进入生产环境前被发现。

E

escalation-design

owl-listener / ai-design-skills

AI 应在何时以及如何升级给人工、拒绝或请求澄清。

F

figma-check-design-parity

southleft / figma-console-mcp-skills

将 Figma 节点的实际规格与代码规格（你的组件渲染出的值）进行比较，获得 0–100 的一致性得分、差异列表和修复建议。用于检测设计到代码的漂移：触发词“check design parity”“does my code match the Figma”“compare this component to the design”“is my implementation faithful”“find differences between design and code”“verify the build matches Figma”“design QA against code”“parity score”。通过 use_figma（任何套餐）读取该节点的视觉/排版/间距/token/无障碍规格，并将其与你提供的 codeSpec 进行差异比对。它补充原生 get_design_context：不是生成代码，而是验证现有代码是否与设计保持同步。