Skills

N

notifications-toasts

dylantarre / animation-principles

在为通知、Toast、警告、Snackbar 或系统消息设计动画以恰当吸引注意力时使用

S

swiftui-animation

jamesrochabrun / skills

该 Skill 提供高级 SwiftUI 动画、过渡、匹配几何效果以及 Metal 着色器集成的全面指导。适用于在 iOS 和 macOS 的 SwiftUI 应用中构建动画、视图过渡、Hero 动画或 GPU 加速效果时。

W

wireframing

manutej / luxor-claude-marketplace

低保真/高保真线框图、用户流程、信息架构、原型技巧和设计迭代流程

K

k2f-cv

suzheng / k2f

根据笔记、出版物列表和任职经历编写完整的学术或资深专业人士履历，确保章节顺序正确、书目信息准确，并清晰呈现较长列表的层级（而非一页式求职简历）。用户需要 CV、curriculum vitae、academic vita、教职申请 CV 或多页职业履历时使用。借助 K2F 格式和引擎，以 AI 原生设计和高水准美学标准创建 CV。K2F 专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理布局、字体排版和格式方面的复杂工作。

M

minimalist-ui

leonxlnx / taste-skill-classics

经典风格技能，可选启用：仅在按名称调用时运行。采用温暖的单色调、字体对比和平面 Bento 网格的编辑风格产品 UI。

S

symfony:twig-components

dev-toolings / superpowers-symfony

使用 Symfony UX Twig Components（props、slots、匿名组件、CVA）构建可复用的 UI 组件，让模板更清晰

S

suggest-icon

fortawesome / fontawesome-agent-tools

为特定场景、名词、动词或概念推荐合适的图标

D

delight

educlopez / ui-craft

愉悦感优化——在不添加装饰或彩纸效果的前提下，增加一两个令人难忘的微交互（文案的具体性、悬停效果编排、状态转换或一个标志性细节）。适用于 UI 功能正常但显得平庸，或用户说“让它显得特别”/“增添个性”时。用户要求提升 UI 的愉悦感，或在设计/UI/前端工作中提到“delight”时调用。

D

distill

aladicf / better-web-ui

移除不必要的元素、选项、功能和结构复杂性，简化杂乱的 UI。当问题在于控件、选项、功能或相互竞争的元素过多时使用；如果结构合理，真正的问题只是视觉强度过高或缺乏个性，则不要使用。

F

frontend-developer

dylantarre / animation-principles

用于在代码中实现动画、构建 UI 过渡，或当开发者需要面向 web/移动应用的实用动画指导时。

G

godot-ui-theming

thedivergentai / game-design-agentic-skills

使用 Theme 资源、StyleBox、自定义字体和主题覆盖实现统一视觉风格的 UI 主题专家蓝图。涵盖 StyleBoxFlat/Texture、主题继承、动态主题切换和字体变体。用于实现统一的 UI 样式或支持多主题时。关键词：Theme、StyleBox、StyleBoxFlat、add_theme_override、font、theme inheritance、dark mode。

G

gpt-image

wuyoscar / gpt-image2-skill

通过随附的 CLI 和 Reference Gallery 使用 GPT Image 2 或 2.5 生成或编辑图像。适用于图像请求，包括不精确的"GPT 2.5"模型名称、海报、排版、参考图编辑和局部重绘；生成前先确定模型选择。

H

harden

aladicf / better-web-ui

通过改进错误处理、i18n 支持、文本溢出处理和边缘情况管理，提升界面的稳健性，使其可靠并适用于生产环境。用户要求增强稳健性、达到生产就绪状态、处理边缘情况、添加错误状态，或修复溢出和 i18n 问题时使用。

H

harden

educlopez / ui-craft

生产就绪加固——审查并实现完整的非理想路径矩阵：加载骨架屏、空状态、错误消息、部分数据、i18n、离线、权限和首次运行引导。用于准备将界面投入生产，或用户说“空数据时会崩溃”/“没有加载状态”/“加固这个”时。用户要求加固 UI，或在设计/UI/前端工作中提到“harden”时调用。

Q

qiaomu-design-advisor

joeseesun / qiaomu-design

偏执型设计顾问 v2.0（融合版）— Jobs 式产品直觉 + Rams 式功能纯粹主义，融合五大顶级设计 Skill 实测精华（Anthropic frontend-design 的美学胆量、Vercel web-design-guidelines 的工程规范、taste-skill 的反模板拨盘、Emil Kowalski 的动效工艺、ui-ux-pro-max 的准则化组件行为）。重新设计页面、审视 UI 方案、优化交互体验、从零构建界面时使用。触发词："重新设计"、"redesign"、"优化界面"、"优化交互"、"设计方案"、"UI 审查"、"这个页面不行"、"界面不好看"、"帮我看看设计"、"设计建议"、"/design-advisor"。适用于：(1) 页面/组件设计与重设计 (2) UI/UX 方案评审 (3) 交互逻辑优化 (4) 视觉系统建立 (5) 设计决策咨询 (6) 参考真实网站设计系统 (7) 动效与组件工艺审查。核心能力：设计读取 + 三拨盘自适应 + 三阶段工作流 + AI 反套路禁令 + 动效工艺库 + 工程验收清单 + 58 个真实网站的 DESIGN.md 设计系统参考库（Google Stitch 格式）。额外触发词："参考XX的设计"、"像XX那样"、"XX风格"、"design system"、"DESIGN.md"、"给我一个设计系统"。

T

tailwind-patterns

davila7 / claude-code-templates

Tailwind CSS v4 原则。CSS 优先配置、容器查询、现代模式和设计令牌架构。

N

navigation-menus

dylantarre / animation-principles

为导航栏、菜单、侧边栏或导视元素添加动画，以创建流畅、直观的过渡效果时使用。

E

extract

educlopez / ui-craft

重构流程——将重复的 Tailwind 类组合和标记提取为组件，并将魔法值提升为设计令牌。当代码库存在明显重复、硬编码的十六进制值或像素尺寸，或用户说“清理一下”／“提取组件”／“将样式令牌化”时使用。用户要求对其 UI 进行提取，或在设计／UI／前端工作中提到“extract”时调用。

I

inspira-ui

secondsky / claude-skills

120 多个基于 Vue/Nuxt 的动画组件，配合 TailwindCSS v4、motion-v、GSAP、Three.js。适用于首屏主视觉区块、3D 效果、交互式背景，或排查安装配置、CSS 变量、motion-v 集成等报错。

K

k2f-exam-paper

suzheng / k2f

根据教学大纲、评分标准、往年试卷或指定阅读材料设计正式考卷，包括期中、期末、单元测验或居家评估，确保内容覆盖比例合理、作答要求明确，并预留适当答题空间。用户要求制作考卷、测试、测验、期末、期中或可打印并分发给学生的评估材料时使用。借助 K2F 格式和引擎，以 AI 原生设计和高审美标准制作考卷。K2F 专为 AI Agent 打造，使其专注于语义内容和设计意图，同时自动处理布局、排版和格式的复杂性。

D

depth

aladicf / better-web-ui

通过高度系统、凸起和凹陷表面、层叠效果及恰当的阴影行为，增加或调整界面层次感，让界面显得有结构而非扁平。当用户提到层次感、高度、阴影、分层、扁平卡片、按压状态、拖动反馈或凹陷控件时使用。

F

figma-shaders

figma / mcp-server-guide

**必需的前置条件**——在调用 `create_shader` 或 `update_shader` 前加载此技能。用户要求在 Figma 中创建、编写、更改、修复或迭代着色器效果、着色器填充、自定义效果、自定义填充或程序化着色器时使用。

D

distill

educlopez / ui-craft

精简处理——遵循 CRAFT_LEVEL，删减无法回答用户问题或推动行动的内容、结构、视觉元素和无用代码。当 UI 显得杂乱、CTA 过多、文字密集或装饰繁复，或用户说“简化一下”/“感觉太繁杂”时使用。用户要求精简其 UI，或在设计/UI/前端工作中提到“distill”时调用。

K

k2f-intake-form

suzheng / k2f

设计客户、患者或项目的 intake 表单，确保分区流程清晰、字段密度适当、填写布局可信，而非无结构的问卷堆砌或通用网页表单粘贴。用户要求 intake 表单、入门问卷、注册资料、新客户文件或新患者表单时使用。使用 AI 原生设计和最高审美标准创建 intake 表单，由 K2F 格式和引擎驱动。K2F 专为 AI Agent 打造，让其专注于语义内容和设计意图，同时自动处理布局、排版和格式复杂性。

P

pixel-art

wanshuiyin / auto-claude-code-research-in-sleep

为 README、文档或幻灯片生成像素艺术 SVG 插图。当用户说“画像素图”、“pixel art”、“make an SVG illustration”、“README hero image”，或想要一个可爱的视觉图时使用。

B

buttons-ctas

dylantarre / animation-principles

用于为按钮、CTA 或可点击的操作元素制作动画，以创造令人满意、响应灵敏的交互效果。

D

design-tokens

plugin87 / ux-ui-agent-skills

使用三层架构（原始 → 语义 → 组件）生成、扩展或审计 DTCG 格式的设计令牌。适用于创建调色板、字体比例、间距、阴影、圆角和动效令牌、多品牌主题，或验证令牌文件。涵盖颜色、排版、间距、阴影、边框、断点、动效、渐变、不透明度、模糊、尺寸、状态和主题。

I

imagery

aladicf / better-web-ui

改进界面中照片、屏幕截图、图标、插图和用户上传媒体的使用方式，让视觉元素提升而非损害清晰度。用户提到图像、屏幕截图、背景照片、主视觉图片、图标尺寸、用户上传媒体、裁剪、叠加层或图像可读性时使用。

I

interaction-patterns-components

hueyexe / frontend-agent-skills

在为 Web、移动端、SaaS、仪表板或设计系统选择、评估或设计 UI 交互模式和可复用组件时使用。

K

k2f-application-form

suzheng / k2f

为工作、项目或会员申请表设计蓝图，明确字段结构、适当的答题空间和专业的可填写版式，而非简单粘贴简历或生成通用问卷。用户需要申请表、可打印的申请材料、注册表或结构化申请文档（包括特定职位或需附带材料的申请）时使用。借助 K2F 格式和引擎，以 AI 原生设计和高审美标准创建申请表。K2F 专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理布局、字体排版和格式复杂性

M

muapi-color-analysis-board

samuraigpt / generative-media-skills

把人像照片变成高端杂志风格的「色彩分析板」（Dior / Ralph Lauren 风格）——最佳配色、冷暖色调、妆容指南、胶囊衣橱、发型与珠宝建议，全部排布在干净的米色／象牙白网格上。

R

roblox-ui

el4cteo / roblox-skills

响应式跨平台 UI——ScreenGui 与安全区（ScreenInsets）、Scale 与 Offset、UIListLayout flex/UIFlexItem、约束、StyleSheets/令牌/主题、RichText、手柄/触摸导航、UIDragDetector、CanvasGroup、补间动画、BillboardGui/SurfaceGui、React-lua/Fusion/Vide。在构建 HUD、菜单、商店、库存，或修复在移动端、主机端或其他屏幕尺寸上出问题的 UI 时使用。

C

clarify

aladicf / better-web-ui

改进 UX 文案、营销文案、标签、微文案、说明和错误消息，让界面和产品信息更易理解和使用。用户提到文案令人困惑、标签不清楚、错误文本不佳、CTA 缺乏力度、说明难以遵循，或希望改善 UX 写作时使用。

F

figma-prototyping

dylantarre / animation-principles

在 Figma 原型和 Smart Animate 中实现迪士尼 12 条动画原则时使用

C

create-canvas

ibelick / ui-skills

创建自由形式的画布，用于探索、比较和迭代任何内容

M

minimax-image-understanding

imsus / pi-extension-minimax-coding-plan-mcp

使用 understand_image 工具通过 AI 分析图像

W

webgl

martinholovsky / claude-skills-generator

用于 JARVIS 3D HUD 的 WebGL 着色器与特效。

U

unhappy

educlopez / ui-craft

状态优先的设计流程——先盘点并实现所有非正常状态（加载、空数据、错误、部分数据、冲突、离线），再处理正常流程，并将不可能的布尔状态重构为合适的状态机。开始构建新界面、检查现有界面的边缘情况，或用户说“处理错误状态”／“添加加载状态”／“数据缺失时会怎样”时使用。用户要求在 UI 中处理异常状态，或在设计／UI／前端工作中提到“unhappy”时调用。

W

web-artifacts-builder

sickn33 / agentic-awesome-skills

创建 React 前端产物，并将已审核的项目打包为可分享的 HTML 文件

3

3d-falling-leaves

mengto / skills

使用实例化几何体、独立翻滚、联动侧向漂移、共享风力、场景遮挡和感知摄像机的循环回收，在世界空间中构建可辨识的落叶效果。适用于 Three.js 等场景中的 3D 秋叶或飘动枝叶；2D canvas 覆盖层请使用 falling-leaves。

A

Academic Figure Prompt

ligphidonk / academic-figure-generator

当用户希望为 AI 图像工具（NanoBanana / Gemini / DALL-E / Midjourney）生成详细的英文提示词，以产出顶会级别的学术配图时使用此技能——包括框架图、网络架构图、流程图、模块细节图、对比／消融图和数据模式网格——尤其是当用户说出"论文配图提示词""生成论文配图""学术论文生图""架构图提示词""框架图提示词""顶会风格配图""CVPR 风格图""NeurIPS 风格图""paper figure prompt""academic diagram prompt"，或提供 LaTeX/PDF/Word 论文并要求生成配图提示词时。如果用户没有指定配色方案，需先列出 8 种预设配色选项和配色工具链接，再生成任何提示词。

O

optimize

aladicf / better-web-ui

诊断并修复 UI 性能问题，涵盖加载速度、渲染、动画、图像和包体积。用户提到缓慢、卡顿、性能、包体积、加载时间，或希望体验更快、更流畅时使用。

R

redesign

plugin87 / ux-ui-agent-skills

在不破坏功能的前提下，将现有网站或应用升级至高品质。审查当前设计，找出通用化／AI 化的痕迹，然后有针对性地应用审美与系统规则。用户希望改进、现代化、润色现有 UI／代码库，或让它“变得更好”时使用。

F

forms-inputs-checkout

hueyexe / frontend-agent-skills

用于设计、评审或实现表单、输入项、验证、结账、注册、支付或任何数据录入流程。

F

frontend-slides

sickn33 / agentic-awesome-skills

从零开始或通过转换 PowerPoint 文件，创建动画效果丰富的 HTML 演示文稿。

3

3d-four-seasons

mengto / skills

为 3D 场景添加协调一致的春、夏、秋、冬状态，在无需重建世界的情况下融合树叶、阳光、天空、地面材质、雪和粒子。适用于季节控制、建筑漫游，以及具有四季转换效果的户外场景。

M

modern-css

paulirish / dotfiles

编写现代高质量 CSS 的专业知识。在开始新的 CSS 项目或文件、用户询问新的 CSS 特性（例如 Masonry、View Transitions、Container Queries、滚动驱动动画），或要求将旧式样式重构为现代标准时，触发此技能。

A

apply-aesthetic

plugin87 / ux-ui-agent-skills

将视觉方向、风格类型（高端代理机构、编辑式极简、粗野主义、柔和 SaaS、暗黑科技）或 2,144 种具名设计系统（apple、linear-app、stripe、vercel、notion、material、shadcn、spotify、tesla……）解析为令牌系统。适用于用户想要特定外观、氛围或品牌感，或希望设计显得高端、昂贵、不落俗套的情况

A

ax-audit

mblode / agent-skills

使用 24 条规则和发布评定，审计 Agent 产品的工具对等性、权限、审批载荷、恢复能力和可信度。用户要求进行“AX 审计”、审查 Agent 审批流程，或评估 Agent 是否能够操作该产品时使用。

I

idea-validation

refoundai / lenny-skills

通过测试核心假设、构建低保真原型并收集高价值证据，帮助用户在投入大量工程资源之前降低新产品决策的风险。

M

mike-convex-thumbnail

get-convex / agent-skills

使用 Mike 提供的本地半身照抠图和本地 Convex 标志素材，为 Convex 视频生成 Mike 风格的 YouTube 缩略图概念和最终稿。当用户要求缩略图、YouTube 缩略图、视频缩略图方案，或类似 Convex 静态托管 “NO DASHBOARDS” 示例的缩略图时使用。

M

motion-one

dylantarre / animation-principles

适用于使用 Motion One（现代轻量级动画库）实现迪士尼 12 项动画原则

B

bolder

aladicf / better-web-ui

当设计显得平淡、普通或过于保守时，增强视觉冲击力、对比度、个性和构图信心。适用于设计需要更多活力、自信或记忆点的情况，而非真正的问题是杂乱、过度强烈或微小细节的润色。

G

game-design-core

omer-metin / skills-for-antigravity

交互体验设计的基础理论——循环、动机、手感与有意义的游玩艺术。当提到“游戏设计、核心循环、游戏手感、玩家动机、游戏机制、有意义的选择、进度系统、游戏经济、游戏平衡、游戏测试、GDD、游戏文档、趣味性、参与度、心流状态、风险与回报、玩家自主性、juice、游戏润色、8 种乐趣、Bartle 类型、MDA 框架、game-design、player-experience、core-loop、motivation、game-feel、MDA、playtesting、GDD、systems-thinking、player-psychology、engagement、flow-state”时使用。

暂无简介

S

syncfusion-react-calendars

syncfusion / react-ui-components-skills

在 React 应用中实现 Syncfusion React Calendar 组件的完整指南，涵盖 Calendar、DatePicker、DateRangePicker、DateTimePicker 和 TimePicker。内容包括安装、数据绑定、日期/时间选择、范围选择、格式化、本地化、掩码、验证、自定义、模板、无障碍以及受控组件模式。

U

ui-audit

tommygeoco / ui-audit

用于自动化 UI 审计的 AI 技能。依据经过验证的 UX 原则，从视觉层次、可访问性、认知负荷、导航等方面评估界面。基于 Tommy Geoco 的《Making UX Decisions》。

A

attention-direction

dylantarre / animation-principles

当需要控制观众的视线时使用——构图、编排动作、逐步揭示信息，或任何需要清晰视觉层次和焦点管理的场景。

C

craft-design-engineering

gustavo-fior / craft

来自 Craft（craft.gustavofior.com）的设计工程概念，涵盖排版、颜色、布局、动效、声音和数据细节，让界面更显协调。构建或审查 UI 组件、悬停和按压状态、边框、阴影、圆角、图标、数字、图表、动画时使用；用户要求润色、精修、提升品味或让某些内容“感觉更好”时也可使用。

M

mobile-design

manutej / luxor-claude-marketplace

移动端 UX 模式、触控交互、手势设计、移动优先原则、应用导航和移动端性能