Skills

A

asciify-engine

ayangabryl / asciify-engine

以 asciify.org 的方式应用 Asciify：让 ASCII 组件和背景融入真实界面，采用主题配色、避开文字，并遵循页面的圆角和动效。适用于字符形式的 UI 组件（加载、状态、提示、标签页、AI 状态、图表、过渡效果、页面）、动态 ASCII 背景、照片/视频/GIF 转换、GPU 字符场、壁纸/海报/印刷品的艺术效果、艺术风格与导出、悬停与动效、分层排版和渲染性能。

A

audit-stories

owl-listener / inclusive-design-skills

审计用户故事的无障碍包容性。串联：inclusive-user-stories、edge-case-identification。适用于审查现有待办事项、冲刺或一组用户故事，以检查它们是否考虑了多样化的能力。

B

better-ui

23jmo / jmo-skills

通过精确调整圆角、视觉对齐、阴影、图标状态和动画，打磨项目中的界面、图标与动效。

C

click-test-plan

infrasity-labs / dev-gtm-claude-skills

设计点击/首次点击测试，以评估导航和信息可查找性。

D

deep-component-figma

southleft / skills-for-figma

将单个 Figma 组件（或任意节点）提取为深度达 N 层的完整递归树——每个子节点的布局、填充/描边/效果、排版、已解析的绑定变量（token 名称 + 代码语法）、INSTANCE mainComponent 引用、原型反应和注释。当你需要最高保真度数据来为某一个组件生成生产代码时使用——触发词：'get the full component tree'、'deep extract this component'、'give me everything about this node for code gen'、'resolve all the tokens in this component'、'what instances does this component nest'、'extract reactions/prototype links'、'high-fidelity component spec'。可在任何套餐下将绑定变量解析为 token 名称。远比原生 MCP 的 get_design_context / get_metadata 更深入。

D

design-language-system

motormetrics / motormetrics

MotorMetrics 的 Monorepo

F

field-service-data-capture-reference-configure

forcedotcom / sf-skills

构建、编辑和部署 Salesforce Data Capture Flow（processType 为 DataCaptureFlow）——Field Service 移动/离线表单。适用于编写含 runtime_service_fieldservice:dc* 组件的 flow-meta.xml、Repeater 循环（.AllItems）、主从子记录持久化、视觉优化（渐变横幅、进度条、标注）、带 FLS/权限集的支撑对象、调试 DataCaptureFlow 部署错误，或排查已部署表单为何未出现在 FSL Mobile Forms 标签页（DDC/WorkPlan 组织范围默认值与 AssignedResource 共享前提条件）。

F

figma-to-divi

respira-press / agent-skills-wordpress

当用户说 'figma to divi'、'build this figma design in divi'，或交付一个 Figma 画框要求在 Divi 网站上的 WordPress 中重建时使用。将 Figma 节点树映射为原生 Divi 区块、行、列和模块（自动检测 Divi 5 区块或 Divi 4 短代码），并写入草稿，因此不会触及任何线上内容。

F

figma-to-gutenberg

respira-press / agent-skills-wordpress

当用户说 'figma to gutenberg'、'figma to blocks'，或交付一个 Figma 画框要求在使用区块编辑器的 WordPress 网站上重建时使用。将 Figma 节点树映射为核心 Gutenberg 区块，在全局样式中注册该画框的调色板，并写入草稿，因此不会触及任何线上内容。

F

fluid-design

kemiljk / skills

当物理连续性或直接操控很重要时，设计或改进弹簧、手势和可中断动效。

F

flutter-responsive-layout

thienqo / flutter-skills

跨设备、约束、断点、重叠、裁剪、方向和输入模式构建或修复自适应 Flutter 布局。当文字缩放导致重排、裁剪或控件消失时，与 flutter-accessibility 配合使用；不适用于一般的小组件状态架构。

F

fonts

jacbk / persona

挑选独到字体的参考。包含按风格、类别、原型划分的字体推荐，以及 Next.js 项目的字体搭配指南。

F

frontend-design

robsonrung / rar-skills

根据选定的视觉方向构建定制前端界面。用于定制页面、组件或站点；可复用的设计系统请使用 ui-ux-pro-max，React 行为请使用 advanced-react。

G

game-playtest-planning

lvtd-llc / skills

规划、执行并解读游戏试玩测试。适用于验证原型、新手引导、难度、机制、UI 清晰度、留存或趣味性时；以及编写试玩测试脚本、问卷、观察计划或埋点需求时。

G

game-story-world-character

lvtd-llc / skills

设计或评估游戏剧情、世界、角色、空间、临场感、美学和间接控制。在为玩法添加叙事、任务、关卡、环境、角色弧光、世界观构建、环境叙事或情感背景时使用。

G

generate

owl-listener / inclusive-design-skills

为产品生成多样化、包容性的用户画像集。链：disability-inclusive-personas、situational-impairment-mapping、assistive-technology-scenarios、ability-spectrum-mapping。在创建新的用户画像集，或扩展现有画像集以增强包容性时使用。

H

haiming-app-monetization

hammingdev / haiming-app-monetization

海明Dev（HammingDev）× 秒悟 Meoo 共创：评估移动 App 的 onboarding、付费墙、会员权益与套餐定价，结合项目代码和可核实竞品提出付费转化方案。适用于开发中或已上线 App 的商业化辅导、引导分支设计、试用及购买体验优化；不用于单纯获客或广告投放。

H

html-to-image

membranedev / application-skills

HTML to Image 集成。管理图像。当用户想要与 HTML to Image 数据交互时使用。

I

implementing-navigation

ancoleman / ai-design-components

为前端（React/TS）和后端（Python）实现导航模式与路由，包括菜单、标签页、面包屑、客户端路由和服务端路由配置。适用于构建导航系统或设置路由时。

I

ios-animation-design

existential-birds / beagle

设计并规划 iOS 动画，提供结构化规范，涵盖转场、微交互、手势驱动动效和加载状态。适用于用户要求为 iOS 应用规划、设计或编写动画规范时——包括屏幕转场、导航动画、交互手势、新手引导流程，或任何动效设计工作。也适用于用户想要动画建议，或在编写代码前想在不同动画方案之间做决定时。

K

keyboard-review

owl-listener / inclusive-design-skills

审查现有界面中的键盘导航与焦点管理。链：keyboard-navigation、feedback-and-status。在专门测试或审查键盘无障碍、发布前，或用户反馈键盘问题时使用。

L

lazyweb-design-research

lazywebhq / lazyweb-skill

Lazyweb Agent 技能：从 /lazyweb:lazyweb-welcome 开始，提供免费的截图参考，可选付费使用 20k+ A/B Test Agent

L

lazyweb-quick-references

lazywebhq / lazyweb-skill

Lazyweb Agent 技能：从 /lazyweb:lazyweb-welcome 开始，提供免费的截图参考，可选付费使用 20k+ A/B Test Agent

L

logo-with-variants

crafter-station / elements

创建具有多个变体（图标、文字标识、标志）以及亮色/暗色模式的 logo 组件。当用户提供 logo SVG 文件并希望在 Elements 项目中遵循 Clerk 模式创建基于变体的 logo 组件时使用。

M

motion-react

bm629 / agent-skills

在使用 Motion 库（framer-motion 的后继者：npm 包 `motion`，导入 `motion/react`）为 React 应用添加动画时使用——包括进场/退场动画、变体与 stagger、AnimatePresence、布局与共享元素过渡、动画数字滚动、手势状态——或用于判断某项任务到底需要 Motion，还是用普通的 CSS/Tailwind 过渡或 AutoAnimate 即可。涵盖将减弱动效无障碍（MotionConfig、useReducedMotion、WCAG 2.3.3/2.2.2）作为首要要求、性能纪律（仅使用 transform/opacity）、面向数据密集型产品 UI 的动效克制、Radix/shadcn 与路由集成，以及保持测试稳定（MotionGlobalConfig.skipAnimations）。关键词：motion、framer-motion、animation、AnimatePresence、layout animation、micro-interactions、reduced motion、page transitions、stagger、spring。

M

multimedia-accessibility

owl-listener / inclusive-design-skills

设计带字幕、文字稿和音频描述的无障碍视频、音频和多媒体内容。在创建或审查视频、音频、播客、网络研讨会、动画或任何基于时间的媒体时使用。触发词：captions、subtitles、transcript、audio description、video accessibility、podcast accessibility、multimedia、closed captions、sign language、media player、autoplay。

P

ph-thumbnail-creator

yoanbernabeu / producthunt-skills

为 Product Hunt 设计能让人停下滚动的缩略图。使用本技能来创建有效的缩略图和 GIF，在首页吸引注意力并让产品价值一目了然。

P

pm-brand-motion

konglong87 / superpm

使用场景：需要为品牌设计动效方向、制作 logo 动画 demo、定义品牌动效性格、从静态 logo 到动态展示的过渡。不适用场景：需要专业级动效交付（应交给设计师）、已有成品动效无需方向验证、仅需要文字描述不需要 demo

R

resume-formatter

infrasity-labs / dev-gtm-claude-skills

确保格式适合 ATS，并创建整洁、易于快速浏览的版式

S

scenario-map

owl-listener / inclusive-design-skills

为产品或功能映射跨能力谱系的包容性使用场景。链：ability-spectrum-mapping、situational-impairment-mapping、assistive-technology-scenarios。在规划测试覆盖、识别无障碍缺口，或了解功能在多样用户中的表现时使用。

S

simplify

owl-listener / inclusive-design-skills

简化内容与交互，以降低认知负荷。链：plain-language-design、cognitive-load-assessment、focus-attention-design。在拿到需要变得更易用的内容、流程或界面时使用。

S

stakeholder-communication

owl-listener / inclusive-design-skills

向非无障碍专家的利益相关方传达无障碍决策、要求和价值。在向管理层、产品经理、工程师或任何需要理解无障碍决策为何重要的人汇报无障碍工作时使用。触发词：stakeholder、business case、justify accessibility、explain accessibility、leadership、executive、ROI、why accessibility、cost of accessibility、persuade、convince、accessibility presentation。

S

style-library

nateherkai / hyperframes-student-kit

选择、定制或扩展项目可复用的 motion-graphics 卡片库和样式模板。用于选择视觉风格、添加卡片、构建新的样式包，或在 HyperFrames 视频中复用模板。

暂无简介

暂无简介

暂无简介

暂无简介

暂无简介

U

ui-ux-pro-max

mavcui / agent-skills-hunter

Agent Skills 终极集合地，一站式装载，“让每一寸上下文都发挥到极致” The Ultimate Collection of 400+ High-Quality Agent Skills for Claude AI — Creative, Technical & Enterprise Workflows

U

ui-ux-pro-max

mavscui / agent-skills-hunter

Agent Skills 终极集合地，一站式装载，“让每一寸上下文都发挥到极致” The Ultimate Collection of 400+ High-Quality Agent Skills for Claude AI — Creative, Technical & Enterprise Workflows

U

ui-ux-pro-max

zhanlincui / agent-skills-hunter

UI/UX 设计智能工具。包含 50 种风格、21 套配色、50 种字体搭配、20 种图表和 9 种技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）。操作：规划、构建、创建、设计、实现、审查、修复、改进、优化、增强、重构和检查 UI/UX 代码。项目：网站、落地页、仪表板、管理面板、电商、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表。风格：玻璃拟态、黏土拟态、极简主义、粗野主义、新拟态、便当网格、深色模式、响应式、拟物设计、扁平设计。主题：配色、无障碍、动画、布局、字体排版、字体搭配、间距、悬停、阴影、渐变。集成：通过 shadcn/ui MCP 搜索组件和示例

W

web-styling-scss-modules

agents-inc / skills

SCSS Modules——局部作用域的组件样式表、层叠层、Sass 模块系统、mixin，以及构建时值与运行时值

A

ability-spectrum-mapping

owl-listener / inclusive-design-skills

梳理产品或功能在人类能力全谱系中的运作方式 —— 而不仅是 "能用" 和 "不能用"。在规划无障碍覆盖范围、识别缺口或向相关方传达无障碍范围时使用。触发词：能力谱系、用户范围、谁能使用、谁不能使用、无障碍覆盖、无障碍范围、能力范围、需求谱系。

A

academic-beamer-deck

thinkingwithagents / skills

生成或重新设计学术 Beamer 幻灯片组，使其清晰、视觉精美、可安全编译，并针对现场演示进行优化。可将现有幻灯片或原始素材转化为结构清晰、节奏得当、专业的演示文稿，具备稳健的布局和一致的视觉设计。每当用户提到创建幻灯片、beamer 演示、重新设计幻灯片、改进幻灯片、学术演讲幻灯片、会议演示、研讨会幻灯片、从 tex 制作幻灯片或修复 beamer 幻灯片时使用此技能——即使他们没有明确说 "Beamer"。接受 .tex 文件、图表和演讲背景（受众、时长、场合、目的）作为输入。输出可直接编译的 .tex 文件、整理好的图表文件夹和可用于演示的幻灯片组。

A

accessibility-debt-tracking

owl-listener / inclusive-design-skills

跟踪并管理无障碍债务——已被推迟的已知无障碍问题。适用于管理无障碍问题积压、规划修复，或无障碍问题累积速度快于修复速度时。触发词：无障碍债务、技术债务、已知问题、积压、推迟、以后再说、修复、无障碍积压、问题累积、回归。

A

accessibility-excellence

sanky369 / vibe-building-skills

对照 WCAG 审计前端并修复不达标之处：语义化 HTML、键盘导航、焦点管理、屏幕阅读器支持（ARIA）、颜色对比度、表单和媒体替代方案。当用户问“这无障碍吗”“让它符合 WCAG/AA”“添加键盘导航”“修复屏幕阅读器支持”“a11y 审计”“我们收到了无障碍投诉/法律通知”，或在构建/评审带交互行为的 UI 组件时使用——即使没有提到无障碍。产出一份按优先级排序的无障碍审计（问题 × WCAG 准则 × 严重程度 × 修复），以及在代码中实现的修复。

A

accessibility

midudev / autoskills

按照 WCAG 2.2 指南审计并改进 Web 无障碍性。用户要求“改善无障碍性”“a11y 审计”“符合 WCAG”“屏幕阅读器支持”“键盘导航”或“使其无障碍”时使用。

A

analyze-component-set-figma

southleft / skills-for-figma

将 Figma COMPONENT_SET 作为状态机进行分析，用于代码生成——提取变体轴（状态/尺寸等），将状态变体映射到 CSS 伪类（hover→:hover、focus→:focus-visible、disabled→:disabled、error→[aria-invalid]），并计算各变体的视觉差异（仅每个状态下变化的部分）。适用于从 Figma 变体集生成交互式组件时——触发语：'analyze this component set'、'turn these variants into CSS states'、'generate a button/input/checkbox from Figma variants'、'what changes between the hover and default state'、'map Figma variants to component props'、'extract the state machine for this component'。将绑定的变量解析为 token 名称。原生 MCP 的 get_design_context/get_metadata 不覆盖此功能，它们无法提供变体轴→CSS 状态机的映射。

A

app-store-screenshot

zaferayan / app-store-screenshot-skill

将原始移动应用截图转变为带有设备边框、主题场景或品牌衍生背景以及简短标题的高品质 App Store 和 Google Play 营销截图，同时保持原始 UI 像素级精确。当用户分享 iOS 或 Android 应用截图并要求商店上架图、带边框的设备样机、发布或 Product Hunt 视觉素材，或一致的多屏截图集时使用。

A

applying-brand-guidelines

ovachiever / droid-tings

此技能为所有生成的文档应用一致的企业品牌形象和样式，包括颜色、字体、布局和文案

A

audit

owl-listener / inclusive-design-skills

审查界面是否支持多模态交互。串联：keyboard-navigation、touch-target-design、multi-modal-input、gesture-alternatives、feedback-and-status、motion-sensitivity。适用于审查现有界面的交互无障碍时。

B

bmad-agent-diagram-reviewer

bmad-code-org / bmad-builder

架构图评审器。当用户要求评审图表或验证架构时使用。

C

chakra-ui

mgd34msu / goodvibes-gemini

使用 Chakra UI v3 的组件、token 和 recipes 构建无障碍的 React 应用。适用于创建样式化组件系统、主题定制或无障碍表单控件。

C

chuangkit-skill

chuangkit-labs / chuangkit-skill

创客贴 Agent 会话技能 - 当用户希望通过创客贴生成、编辑、修改、续作或下载图片/视频时使用。覆盖场景包括：生成图片、生成海报、文生图、图生图、图生视频、文生视频、做动画、画一个xxx、来段xxx；编辑修改，如把xxx换成yyy、去掉xxx、加上xxx、改成xxx、调整xxx、局部修改、改镜头；风格转换，如转绘、换风格、风格迁移；视频续写延长、复刻视频/TVC/宣传片、短剧/短漫剧生成、音乐MV生成、产品广告/展示片制作、分镜/故事板设计、教育视频/短视频制作。用户提到创客贴、AIGC、Agent、上传参考图/视频、查看生成进度、下载生成结果时也应触发。关键判断：只要用户请求涉及 AI 图片、设计或视频的创作、生成、编辑、修改，无论措辞如何，都必须触发此技能。

C

color-font-skill

minimax-ai / skills

为 PPT/设计任务选择可直接用于演示的配色方案与字体搭配。当用户询问视觉主题选择、品牌安全配色或字体推荐时使用。触发词包括：配色, 色板, 字体, color palette, font, PPT配色, 字体搭配。

C

creative-portfolio-resume

infrasity-labs / dev-gtm-claude-skills

兼顾视觉设计与 ATS 兼容性，适用于创意类职位。

暂无简介

C

css-animations

pluginagentmarketplace / custom-plugin-css

创建高性能的 CSS 动画、过渡和动效设计

D

dart-sass

partme-ai / full-stack-skills

为 Dart Sass 提供全面指南，包括 Sass 语法、编译、mixins、函数和最佳实践。当用户询问 Dart Sass、需要将 Sass 编译为 CSS、使用 Sass 特性或在项目中使用 Sass 时使用。

D

design-flow

owl-listener / inclusive-design-skills

从设计之初就构建具有包容性输入与输出选项的交互流程。串联：multi-modal-input、keyboard-navigation、touch-target-design、feedback-and-status。适用于设计新功能、流程或界面，并希望从一开始就纳入包容性交互时。