Skills

F

fusion-design

equinor / fusion-skills

查阅 Fusion 设计规范，并将其应用于 Fusion 生态中的任何前端代码。适用于：布局、间距、组件用法、交互模式，以及任何 UI 实现决策。不适用于：后端改动、CI/CD、技能编写、数据层逻辑。

P

popup-cro

alirezarezvani / claude-skills

当用户想要创建或优化以转化为目的的弹窗、模态框、浮层、滑入式窗口或横幅时使用。当用户提到「退出意图」「弹窗转化」「模态框优化」「线索收集弹窗」「邮件弹窗」「公告横幅」或「overlay」时也使用。对于弹窗之外的表单，请参阅 form-cro。对于整体的页面转化优化，请参阅 page-cro。

S

styleseed

bitjaru / styleseed

使用 StyleSeed 构建、改进或检查 UI。它会保留项目的设计选择，并通过统一入口处理设置、布局、设计令牌、评审、渲染验证和更新。

F

frontend-visual-qa

daymade / claude-code-skills

审查已渲染的 UI，以及特定任务/对象链接交接；不包括仅检查普通来源引用。通过真实浏览器/原生应用操作流程和 Playwright 全面检查已渲染的 UI 与 Markdown/Obsidian 图片布局，包括 Web 应用、演示文稿/幻灯片、仪表板、设计系统或 Electron/原生应用。UI 实现后使用，以查找字体排版、溢出、响应式布局、路由、数据可视化、浏览器输出或原生外壳缺陷，或将渲染结果与参考进行比较。不要用于从零开始的 UI 设计（使用 ui-designer）或 QA 计划设置（使用 qa-expert）。

S

search

mobbin / skills

让每次 Mobbin 搜索都获得更好的结果，使参考内容与当前工作相匹配。在每次调用 search_screens、search_flows 或 search_sections 前使用。涵盖工具、如何编写有效查询、模式、获取更多结果，以及搜索结果不足时的处理方法。

U

ux-writing-content-design

hueyexe / frontend-agent-skills

在撰写、评议或实施产品 UX 文案、微文案、标签、CTA、空状态、引导流程、错误提示或通知时使用。

W

website-builder-setup

tenfoldmarc / website-builder-setup

安装完整的 AI 建站技术栈——UI/UX Pro Max、Framer Motion 动画和 21st.dev 组件。一个技能、三个工具，无需任何编程经验。

F

font-pairing-suggester

onewave-ai / claude-skills

为不同使用场景推荐字体搭配。提供高级字体的 Google Fonts 替代方案，并附层级结构示例。

I

interactive-dashboard-builder

anthropics / knowledge-work-plugins

使用 Chart.js、下拉筛选器和专业样式，构建自包含的交互式 HTML 仪表板。适用于创建仪表板、构建交互式报表，或生成无需服务器即可运行、带图表和筛选器的可分享 HTML 文件时。

M

motion-designer

ncklrs / startup-os-skills

资深动效设计师，拥有数十年的 After Effects 与动态图形经验，专注于为 Remotion 打造引人入胜的视频规格说明。适用于制作视频规格、规划动态图形、设计动画，或被要求「创建一个视频」「设计动态图形」「规划视频内容」「对视频进行规格拆解」时。输出包含时间轴、音频、音效和动画描述的详细逐场景规格。

D

data-viz

aladicf / better-web-ui

设计或改进数据可视化、图表和数据展示界面。用户要求添加图表、构建仪表板、可视化数据、选择图表类型、提升数据可访问性或展示指标与分析结果时使用。

F

forms

aladicf / better-web-ui

设计、构建或改进表单界面，以提升清晰度、完成率和用户信心。用户要求创建表单、重新设计表单流程、提升表单转化率、添加多步骤表单、改进表单 UX，或规划字段布局和验证时使用。

S

slides

openai / skills

使用 PptxGenJS、捆绑的布局辅助工具以及渲染/校验工具来创建和编辑演示文稿幻灯片（`.pptx`）。适用于构建新的 PowerPoint 演示文稿、根据截图/PDF/参考演示文稿还原幻灯片、在保持可编辑输出的前提下修改幻灯片内容、添加图表/示意图/视觉素材，或诊断内容溢出、重叠、字体替换等布局问题。

U

ux-usability-foundations

hueyexe / frontend-agent-skills

在设计、评估或改进界面可用性时使用，涵盖操作提示、反馈、限制、错误预防、导航清晰度或任务流程。

A

adapt

aladicf / better-web-ui

针对窄、中、宽布局、嵌入式或打印网页场景调整设计，同时保持可用性、层级和目标尺寸。用户提到响应式设计、断点、窄布局、视口变化、支持触控的浏览器或跨场景适配时使用。

A

add-icon

fortawesome / fontawesome-agent-tools

为用户的项目添加 Font Awesome 图标，按其集成方式生成正确的代码

C

carousels-sliders

dylantarre / animation-principles

适用于为轮播图、滑块、图片画廊或横向滚动内容制作流畅导航动画

I

information-architecture-navigation

hueyexe / frontend-agent-skills

用于为数字产品组织、评估或实施导航、标签、分类体系、层级结构、搜索、内容分组或寻路设计。

M

mobile-first-design

secondsky / claude-skills

以移动端屏幕为起点进行响应式界面设计，并通过渐进增强适配更大设备。适用于构建响应式网站、针对移动用户优化或实现自适应布局时。

T

typeset

aladicf / better-web-ui

通过调整字体选择、字号比例、层级、字重和易读性来改善 UI 排版，让文本呈现更协调。用户提到字体、排版、字号比例、易读性、文本层级，或字号不合适时使用。

U

user-journeys

alinaqi / maggy

用户体验流程 —— 旅程映射、UX 验证、错误恢复

A

adapt

educlopez / ui-craft

响应式布局专项检查，涵盖断点、触控目标、安全区域和流式字号。适用于 UI 在手机/平板上存在布局或触控问题时、添加尚未在多视口测试过的新页面时，或用户说 "make it responsive" / "fix mobile layout" 时。当用户要求对 UI 做 adapt，或在设计 / UI / 前端相关工作中提到 'adapt' 时调用。

P

presentation-design-enhancer

onewave-ai / claude-skills

将文字密集的幻灯片转变为视觉叙事。建议改进布局、图标使用和数据可视化。

T

transition-sequences

dylantarre / animation-principles

适用于编排多步动画——页面转场、新手引导流程、向导步骤、复杂揭示效果，或任何经过编排的动画序列。

W

watchOS

rshankras / claude-code-apple-skills

watchOS 开发指南，涵盖 SwiftUI for Watch、Watch Connectivity、复杂功能（complications）以及 watch 特有的 UI 模式。适用于 watchOS 代码审查、最佳实践或 Watch 应用开发。

F

fivem-nui

germanfndez / fiveai-skills

触发词：NUI、ui_page、SendNUIMessage、SetNUIFocus、RegisterNUICallback、FiveM 的 HTML/CSS/JS、FiveM 菜单 UI。用于构建 FiveM NUI 页面，连接 Lua 与浏览器之间的消息通信、回调和焦点控制。

H

humanize-ppt

learnprompt / humanize-ppt

为 Agent 制作的 PPT 而生的演示系统 — 为演讲而生，不止于模板。它把原始素材转换为 AST（audience-state-transfer）大纲，并逐页确定视觉增强方式（图片 / SVG 图示 / 视频），向下游渲染器（HTML-PPT 技能或原生 PPTX）交付制作简报，然后对渲染好的幻灯片执行上限 3 轮的演讲体检。它自身从不渲染幻灯片。在从原始素材生成 PPT/HTML 幻灯片之前使用，以及渲染之后用户说出「给这份 deck 做演讲体检」或「PPT 渲染质检」之类的话时使用。如果你只想得到一页漂亮的模板页，不要大纲也不要体检，那么只用渲染技能就够了。

I

imagegen-frontend-web

leonxlnx / imagegen-skills

高端前端图像指导技能，用于生成高质量、转化率导向的网站设计参考。关键输出规则 — 为每个部分生成一张单独的横向图像。8 个部分的落地页产生 8 张图像。绝不将多个部分压缩为一张图像。强制实施构图多样性（不总是左文字/右图像）、背景图像自由度、多样化 CTA、多样化 Hero 尺度（巨大/中等/极简小号）、叙述概念脊椎、二级阅读时刻以及所有图像的统一调色板。针对落地页、营销网站和开发者或编码 Agent 能准确重现的产品效果图进行优化。

A

a11y

aladicf / better-web-ui

系统地审查并修复 UI 中的无障碍问题，重点关注键盘导航、屏幕阅读器支持、颜色对比度、语义化 HTML、ARIA 用法和动态效果敏感性。用户希望改善无障碍性、让组件符合无障碍要求、修复 WCAG 违规、添加键盘支持或确保兼容屏幕阅读器时使用。

A

animate

educlopez / ui-craft

动效设计环节——在不违背 MOTION_INTENSITY 和项目动画栈的前提下，添加有目的的动画或删除多余动画。当用户要求添加动画、"让它更顺滑"、修复卡顿的过渡，或删减干扰性的动效时使用。当用户要求对其 UI 执行 animate，或在提及设计／UI／前端工作时提到 'animate' 时调用。

A

accessibility-testing

aj-geddes / useful-ai-prompts

对 Web 应用进行 WCAG 合规性测试，确保残障用户的可用性。适用于无障碍测试、a11y、axe、ARIA、键盘导航、屏幕阅读器兼容性和 WCAG 验证。

E

empty-state

aladicf / better-web-ui

为无数据、无结果、权限和错误情况设计有针对性的空状态，清晰呈现价值、设置有力的 CTA，并减少无用界面元素。适用于用户提到空白页面、无数据屏幕、无结果、权限状态或无效控件时，而非用于更广泛的入门引导策略。

E

education-learning

dylantarre / animation-principles

为教育平台、在线学习、辅导应用或技能培养体验设计动画时使用

R

react-native-unistyles-v3

jpudysz / react-native-unistyles

React Native 开发中使用 react-native-unistyles v3 的指南。以下情况会触发："unistyles"、"StyleSheet.create"、"create stylesheet"、"add theme"、"breakpoints"、"variants"、"withUnistyles"、"useUnistyles"、"ScopedTheme"、"UnistylesRuntime"、"style component"、"responsive styles"、"media queries"、"dynamic styles"、"scoped theme"、"adaptive theme"、"unistyles setup"、"unistyles config"、"withUnistylesConfig"、"unistyles metro"。涵盖设置（Babel 插件或 Metro 集成）、主题、响应式设计、变体、Web 功能、第三方集成和故障排查。

R

responsive-testing

spencerpauly / awesome-cursor-skills

在 Cursor 的浏览器中以多种视口尺寸打开应用，逐个截图并报告任何布局破损问题。

C

colorize

aladicf / better-web-ui

为过于灰暗、单色或缺少色彩含义的设计构建或完善 UI 色彩系统、暖调、语义色彩和基于色彩的层级。用户提到色彩暗淡、灰色 UI、缺少暖意、语义色彩较弱或需要强化色彩层级时使用。

G

gamification-loops

omer-metin / skills-for-antigravity

游戏化机制专家 — 积分、徽章、连续达成、进度条，以及让它们奏效的心理原理。涵盖可变奖励系统、进度机制、社会竞争和伦理考量。懂得如何在不做操纵的前提下创造参与度。当提到"游戏化、积分、徽章、连续达成、排行榜、成就、参与度、留存循环"时使用。

T

travel-hospitality

dylantarre / animation-principles

为旅行预订、酒店旅游应用、旅游平台或度假规划体验设计动画时使用

M

macos-notch-ui

fayazara / macos-app-skills

为 macOS 应用添加灵动岛（Dynamic Island）风格的刘海 UI。当用户想创建刘海叠加层、刘海扩展器、Mac 版灵动岛、刘海指示器，或任何从 MacBook 刘海区域延伸出的 UI 时使用此技能。当用户提到「刘海形状」「刘海窗口」「刘海开口」「刘海面板」「刘海附近的录制指示」「灵动岛风格」，或希望显示看起来从硬件刘海处浮现的状态/内容时，也应触发。涵盖 NSPanel 设置、带凹形贝塞尔耳朵曲线的 NotchShape、屏幕定位计算、弹簧动画以及显示/隐藏编排。

R

rive-animations

dylantarre / animation-principles

使用 Rive 交互式动画实现迪士尼的 12 项动画原则

T

typeset

educlopez / ui-craft

排版处理，涵盖字体选择、模块化比例、字距、行距、字重层级与微观排版细节。适用于字体显得千篇一律（无理由地默认使用 Inter）、比例随意、层级扁平，或用户说“fix the typography”/“the text doesn't feel right”时。当用户要求为其 UI 做排版，或在进行设计 / UI / 前端工作时提到“typeset”时调用。

D

data-visualizer

daffy0208 / ai-dev-standards

使用现代库创建图表、仪表板和数据可视化的专家

D

dramatic-2000ms-plus

dylantarre / animation-principles

适用于构建超过 2000ms 的长动画序列——电影感片头、故事段落、高端体验，在这些场景中动画本身就是产品

L

loading-states

dylantarre / animation-principles

在表示进度或等待状态时使用 — 加载指示器、进度条、骨架屏、微光效果，或任何表明系统正在工作的动画。

S

ss-resolve

bitjaru / styleseed

为某个产物编译生效的 StyleSeed 规则包，或以只读方式检查安装与证据的健康状况。在 setup 或 build 之前使用，或用于诊断规则漂移。

S

stitch-sdk-usage

google-labs-code / stitch-sdk

使用 Stitch SDK 根据文本提示词生成、编辑和迭代 UI 界面，管理项目，并获取界面的 HTML/图像。用户想在其应用中使用该 SDK 时使用。

A

awwwards-ui-skills

ihlamury / design-skills

Awwwards 的 UI 设计系统。用于构建受 Awwwards 美学启发的界面——浅色模式、Inter 字体、4px 网格。

C

canghe-xhs-images

freestylefly / canghe-skills

生成小红书（Little Red Book）信息图系列，包含 10 种视觉风格和 8 种版式。将内容拆分为 1-10 张卡通风格图片，针对 XHS 互动进行优化。当用户提到「小红书图片」「XHS images」「RedNote infographics」「小红书种草」，或需要为中国平台制作社交媒体信息图时使用。

G

github-profile-beautifier

wu529778790 / shenzjd-skills

适用于创建或改进 GitHub 个人主页 README — 主题化统计卡片、项目展示、技术栈徽章和打字机标题横幅。提供 5 套主题和智能项目排序（贪吃蛇贡献图需单独设置）。

K

k2f-survey-form

suzheng / k2f

设计蓝图反馈、研究和脉搏调查表单，确保范围明确、量表一致、布局可信且可填写，而非无重点的问题堆砌或通用 Google Form 粘贴稿。用户要求调查表、问卷、反馈表、客户或员工调查、评估表或结构化意见收集工具时使用。使用 AI 原生设计和最高审美标准创建调查表单，由 K2F 格式和引擎提供支持。K2F 专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理布局、排版和格式复杂性。

S

sveltekit-svelte5-tailwind-skill

claude-skills / sveltekit-svelte5-tailwind-skill

用于使用 SvelteKit 2、Svelte 5 和 Tailwind CSS v4 构建网站的综合集成技能

A

a11y-audit

plugin87 / ux-ui-agent-skills

依据 WCAG 2.2 AA/AAA 和 ARIA 模式审查 UI 或设计，并按具体准则提供发现结果、严重程度和明确的修复方法。适用于用户需要无障碍检查、对比度验证、键盘／屏幕阅读器审查，或确认组件是否符合 POUR 时。

C

ce-prototype

everyinc / compound-engineering-plugin

构建一次性原型，以验证某项功能应如何运作、如何被感知或如何呈现文本。当给出错误答案的代价高昂到难以挽回，而一个粗略的草图又无法定论时使用。不适用于头脑风暴期间的粗略视觉试探，不用于决定要构建什么，不用于打磨已经可用的功能，也不用于实现真正的产品。

C

clarify

educlopez / ui-craft

审查按钮、错误信息、空状态和表单提示中的 UX 文案——默认只提出意见，仅在提出要求时才修改。文案显得含糊、笼统或像 AI 写的，或用户说“修正标签”“改进错误信息”或“审查文案”时使用。用户要求对其 UI 进行 clarify，或在设计/UI/前端工作中提到“clarify”时调用。

G

game-asset-generation

eachlabs / skills

使用 each::sense AI 生成游戏美术资源。创建 2D 精灵、角色精灵表、无缝纹理、UI 元素、图标、图块集、加载画面、标志和游戏概念图。

N

normalize

aladicf / better-web-ui

审查并调整 UI，使其符合设计系统的标准、间距、令牌和模式。适用于用户提到一致性、设计偏差、样式不匹配、令牌，或希望让某项功能重新符合系统规范时。

U

ui-visual-validator

sickn33 / agentic-awesome-skills

严谨的视觉验证专家，专精 UI 测试、设计系统合规性与无障碍验证。

3

3d-retina-resolution

mengto / skills

让 3D 画布在 Retina 和 HiDPI 显示器上清晰渲染，包括明确设置为 200% 分辨率、同步渲染器与后处理尺寸、确保指针坐标正确，以及经过测量的质量回退方案。适用于 WebGL 输出模糊、2 倍渲染、高分辨率预览和显示密度变化。

U

uview-pro

uview-pro / skills

uView Pro 的 uni-app UI 组件库。在开发 uni-app 页面、使用 uView 组件（u-button、u-input、u-form 等），或需要表单、按钮、弹窗、toast、导航等 UI 元素时调用。

L

level-design

pluginagentmarketplace / custom-plugin-game-developer

关卡设计基础、节奏把控、难度递进、环境叙事，以及带来沉浸式游玩体验的空间设计。