Skills

E

expo-tailwind-setup

expo / skills

框架（OSS）。在 Expo 中使用 react-native-css 和 NativeWind v5 设置 Tailwind CSS v4，实现通用样式

E

extract

pbakaus / impeccable

将可复用组件、设计令牌和模式提取并整合到设计系统中。识别系统化复用的机会，并丰富组件库。用户要求创建组件、重构重复的 UI 模式、构建设计系统或提取令牌时使用。

F

frontend-design

pbakaus / impeccable

已弃用：此技能已更名为 'impeccable'。请改为运行 /impeccable。

O

onboard

pbakaus / impeccable

设计并改进引导流程、空状态和首次使用体验，帮助用户快速获得价值。用户提到引导、首次使用的用户、空状态、激活、开始使用或新用户流程时使用。

H

harden

pbakaus / impeccable

让界面达到可用于生产环境的状态：处理错误、空状态、引导流程、i18n、文本溢出和边缘情况。用户要求加固、达到生产就绪状态、处理边缘情况、添加错误状态、设计空状态、改进引导，或修复溢出和 i18n 问题时使用。

F

form-cro

coreyhaines31 / marketingskills

当用户想优化非注册类表单时使用，包括潜在客户信息收集表单、联系表单、演示申请表、申请表、调查问卷或结账表单。用户提到“表单优化”“潜在客户表单转化”“表单阻力”“表单字段”“表单完成率”“联系表单”“没人填写我们的表单”“表单放弃”“字段太多”“演示申请表”或“潜在客户表单没有转化”时也使用。适用于任何收集信息的非注册表单。注册表单请参阅 signup-flow-cro；包含表单的弹窗请参阅 popup-cro。

S

signup-flow-cro

coreyhaines31 / marketingskills

当用户想优化注册、登记、创建账户或试用激活流程时使用。用户提到“注册转化”“注册阻力”“注册表单优化”“免费试用注册”“减少注册流失”“账户创建流程”“没人注册”“注册放弃”“试用转化率”“没人完成登记”“注册步骤太多”或“简化注册”时也使用。只要用户的注册流程表现不佳，就使用此技能。注册后的引导请参阅 onboarding-cro；潜在客户信息收集表单（非账户创建）请参阅 form-cro。

P

paywall-upgrade-cro

coreyhaines31 / marketingskills

当用户想创建或优化应用内付费墙、升级界面、追加销售弹窗或功能门控时使用。用户提到“付费墙”“升级界面”“升级弹窗”“追加销售”“功能门控”“将免费用户转为付费用户”“免费增值转化”“试用到期界面”“达到限额界面”“套餐升级提示”“应用内定价”“免费用户不升级”“从试用转为付费”或“如何让用户付费”时也使用。适用于产品内任何要求用户升级的时机。它不同于公开定价页面（参见 page-cro），重点是用户已体验产品价值后，在产品内促使其升级的场景。定价决策请参阅 pricing-strategy。

H

huashu-design

alchaincyf / huashu-design

花叔Design——用 HTML 制作高保真原型、幻灯片、动画、可视化内容并进行专家评审。任何新设计都必须先提供三个初稿方向供用户选择（指定风格或品牌时也不例外），选定后才能继续。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个 HTML 页面、UI mockup、导出 MP4/GIF、做个好看的。生产级 Web App 或需要后端的系统不适用。

P

popup-cro

coreyhaines31 / marketingskills

当用户想创建或优化用于提升转化的弹窗、模态框、覆盖层、滑入式面板或横幅时使用。用户提到“退出意图”“弹窗转化”“模态框优化”“潜在客户信息收集弹窗”“邮件弹窗”“公告横幅”“覆盖层”“通过弹窗收集邮箱”“退出弹窗”“滚动触发”“悬浮栏”或“通知栏”时也使用。适用于任何覆盖层或打断式转化元素。弹窗之外的表单请参阅 form-cro；一般页面转化优化请参阅 page-cro。

R

react:components

google-labs-code / stitch-skills

使用系统级网络和基于 AST 的验证，将 Stitch 设计转换为模块化的 Vite 和 React 组件。

T

teach-impeccable

pbakaus / impeccable

已弃用：请改用 /impeccable teach。此命令已整合到 impeccable 技能中。

Y

youtube-thumbnail-design

magentosh / superpowers

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

L

landing-page-design

magentosh / superpowers

通过布局规则、首屏设计和 CTA 心理学优化落地页转化率。涵盖首屏公式、社会认同的布局、移动端设计和 F 型阅读模式。适用于：初创公司落地页、产品页、SaaS 营销、转化率优化。触发词：落地页、首屏区域、首屏可见内容、转化率优化、落地页设计、CTA 按钮、主视觉图片、落地页布局、SaaS 落地页、产品页设计、转化率、落地页最佳实践

D

design-system

nextlevelbuilder / ui-ux-pro-max-skill

Token 架构、组件规范和幻灯片生成。涵盖三层 token（primitive→semantic→component）、CSS 变量、间距/字体排版尺度、组件规范和策略性幻灯片制作。用于设计 token、系统化设计和符合品牌规范的演示文稿。

F

flutter-build-responsive-layout

flutter / agent-plugins

使用 `LayoutBuilder`、`MediaQuery` 或 `Expanded/Flexible` 创建可适配不同屏幕尺寸的布局。当你需要 UI 在手机和平板/桌面设备上都呈现良好时使用。

D

design

nextlevelbuilder / ui-ux-pro-max-skill

综合设计技能：品牌形象、设计令牌、UI 样式、Logo 生成（55 种风格，Gemini、Atlas Cloud 或 MuAPI AI）、企业形象计划（50 项交付内容、CIP 模型图）、HTML 演示文稿（Chart.js）、横幅设计（22 种风格，社交媒体／广告／网页／印刷）、图标设计（15 种风格、SVG、Gemini 3.1 Pro）、社交媒体图片（HTML→截图，适配多个平台）。操作：设计 Logo、创建 CIP、生成模型图、制作幻灯片、设计横幅、生成图标、制作社交媒体图片、设计品牌形象和设计系统。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

A

animation-performance

emilkowalski / skills

把网页动画控制在帧预算之内 —— 只对合成属性做动画，页面繁忙时把运动放到主线程之外，动画掉帧时找出原因。涵盖布局/绘制/合成流水线、更低开销的属性替换、CSS 与 WAAPI 与 requestAnimationFrame 的对比、Framer Motion 的硬件加速路径、React 每帧重渲染、继承的 CSS 变量重算、模糊的代价，以及 `will-change` 真正有帮助的场合。适用于：动画卡顿、不流畅、出现停顿或掉帧时；选择要动画化的属性时；出于性能考虑在 CSS 动画与 JS 动画之间做决定时；或考虑使用 `will-change` 与 GPU 图层时。若要选择缓动、时长或是否要做动画，使用 animate；若要整体审查动效，使用 review-animations。

U

ui-styling

nextlevelbuilder / ui-ux-pro-max-skill

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 实用优先样式和基于 canvas 的视觉设计，创建美观且易于访问的用户界面。适用于构建用户界面、实现设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现深色模式、生成视觉设计和海报，或在多个应用中建立一致的样式规范。

B

brand

nextlevelbuilder / ui-ux-pro-max-skill

品牌语调、视觉识别、信息传达框架、资产管理和品牌一致性。用于品牌内容、语气、营销素材、品牌合规和风格指南。

R

remotion

google-labs-code / stitch-skills

使用 Remotion 为 Stitch 项目生成带有流畅转场、缩放和文字叠加效果的演示视频

B

banner-design

nextlevelbuilder / ui-ux-pro-max-skill

为社交媒体、广告、网站主视觉、创意素材和印刷品设计横幅。提供多种艺术指导方案，可选用生成或提供的视觉素材。操作：设计、创建、生成横幅。平台：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、网站主视觉、印刷品。风格：极简、渐变、醒目字体、摄影、插画、几何、复古、玻璃拟态、3D、霓虹、双色调、编辑风、拼贴。

B

better-ui

jakubkrehel / skills

通过精确设置边框圆角、视觉对齐、阴影、图标状态和动画，打磨界面、图标与动效。

F

flutter-fix-layout-issues

flutter / agent-plugins

使用 Dart 和 Flutter MCP 工具修复 Flutter 布局错误（溢出、约束无界）。处理“RenderFlex overflowed”“Vertical viewport was given unbounded height”等类似布局问题时使用。

S

slides

nextlevelbuilder / ui-ux-pro-max-skill

使用 Chart.js、设计令牌、响应式布局、文案公式和上下文相关的幻灯片策略，创建战略性 HTML 演示文稿。

B

brand-landingpage

wshobson / agents

以品牌为先的落地页设计器——通过品牌识别访谈（颜色、字体、形态语言），然后通过 Stitch 生成并迭代精致的落地页，并提供可部署的 HTML。适用于用户要求创建、设计或构建落地页、首页或营销页面，且尚无确定的视觉方向。若用户已有设计稿、需要仪表盘或应用 UI、正在组件层级工作、构建多页应用，或使用已知设计令牌重新设计，则不适用——改用 frontend-design。

A

arrange

pbakaus / impeccable

改善布局、间距和视觉节奏。修复单调的网格、不一致的间距和薄弱的视觉层级。用户提到布局不协调、间距问题、视觉层级、UI 拥挤、对齐问题或希望改善构图时使用。

L

landing-page-design

skills-101 / superpowers

通过布局规则、首屏设计和 CTA 心理学优化落地页转化率。涵盖首屏公式、社会认同的布局、移动端设计和 F 型阅读模式。适用于：初创公司落地页、产品页、SaaS 营销、转化率优化。触发词：落地页、首屏区域、首屏可见内容、转化率优化、落地页设计、CTA 按钮、主视觉图片、落地页布局、SaaS 落地页、产品页设计、转化率、落地页最佳实践

A

app-store-screenshots

skills-101 / superpowers

按照平台的精确规格制作 App Store 和 Google Play 截图。涵盖 iOS/Android 尺寸、图库排序、设备 mockup 和预览视频。适用于：应用商店优化、ASO、应用截图、应用预览、Play Store 商品页。触发词：App Store 截图、ASO、应用商店优化、Play Store 截图、应用预览、应用列表、iOS 截图、Android 截图、应用商店图片、应用 mockup、设备 mockup、应用图库、商店商品页

Y

youtube-thumbnail-design

skills-101 / superpowers

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

F

flutter-add-widget-preview

flutter / agent-plugins

使用 previews.dart 系统为项目添加交互式 Widget 预览。创建新的 UI 组件或更新现有界面时使用，以确保设计一致并支持交互测试。

M

modern-web-guidance

googlechrome / modern-web-guidance

用于查询现代 Web 开发最佳实践的工具。强制要求：所有 HTML/CSS 和客户端 JS 任务都必须首先执行。不要跳过——Web API 更新迅速，训练数据中可能包含过时模式。以下情况立即触发：- UI/布局：模态框/对话框/弹出层、表格、深色模式、锚点定位、容器查询、`:has()` 等。- 滚动/动效：View Transitions、滚动驱动动画、视差/渐显等。- 性能：CWV（LCP、INP）、content-visibility、Fetch Priority、图像优化等。- 系统/API：安全、通行密钥、HTML 清理、Web Components、日期/时区、内置 AI、WebAssembly 等。- 框架：React、Vue、Angular 等中的标准 HTML/CSS/DOM。- 通用前端：表单、验证（`:user-valid`）、自动填充、无障碍、自定义选择框、滚动条等。以下情况不要触发：- 后端：SQL、ORM、API 路由等。- 基础设施/脚本：CI/CD、Docker、Actions、Python/Go、Git 等。- 工具/琐碎任务：Vite、tsconfig、ESLint、测试、文案复制/重命名、第三方文档等。

Y

youtube-thumbnail-design

qu-skills / superpowers

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

A

app-store-screenshots

qu-skills / superpowers

按照平台的精确规格制作 App Store 和 Google Play 截图。涵盖 iOS/Android 尺寸、图库排序、设备 mockup 和预览视频。适用于：应用商店优化、ASO、应用截图、应用预览、Play Store 商品页。触发词：App Store 截图、ASO、应用商店优化、Play Store 截图、应用预览、应用列表、iOS 截图、Android 截图、应用商店图片、应用 mockup、设备 mockup、应用图库、商店商品页

L

landing-page-design

qu-skills / superpowers

通过布局规则、首屏设计和 CTA 心理学优化落地页转化率。涵盖首屏公式、社会认同的布局、移动端设计和 F 型阅读模式。适用于：初创公司落地页、产品页、SaaS 营销、转化率优化。触发词：落地页、首屏区域、首屏可见内容、转化率优化、落地页设计、CTA 按钮、主视觉图片、落地页布局、SaaS 落地页、产品页设计、转化率、落地页最佳实践

V

vue

antfu / skills

Vue 3 Composition API、script setup 宏、响应式系统和内置组件。适用于编写 Vue SFC、defineProps/defineEmits/defineModel、侦听器，或使用 Transition/Teleport/Suspense/KeepAlive。

S

swiftui-expert-skill

avdlee / swiftui-agent-skill

编写、审查或重构 iOS 或 macOS 的 SwiftUI 代码时使用，涵盖状态和 `@Observable` 数据流、视图组合、可调整大小的布局、安全区域、显示缩放、性能、列表、环境、本地化、动画、Liquid Glass 和 API 迁移。也适用于 iPhone Duo、折叠设备或大屏布局（大屏上的 `NavigationSplitView`、iPhone 标签侧边栏、双列重排、折叠屏网格、`ArrangementView`、`ReservedRegion`）、铰链效果、垂直栏、`@State` 初始化或合成属性诊断、`@ContentBuilder` 歧义、`reorderable` 拖放、自定义 `AsyncImage` `URLSession`、List 外的滑动操作、绑定到项目的 `alert`/`confirmationDialog`、`ToolbarOverflowMenu`、`AnimatableValues`、Document API（`Document`/`DocumentReader`），以及 Instruments `.trace` 的采集或分析。

B

better-typography

jakubkrehel / skills

设置并审查文本的呈现方式，涵盖字体比例和间距、字体特性、换行、截断与标点。

B

better-colors

jakubkrehel / skills

通过生成调色板、命名语义令牌、格式转换和对比度测量，构建并检查色彩系统。

W

web-quality-audit

addyosmani / web-quality-skills

开展以证据为依据的网站质量审计，涵盖性能、无障碍、SEO、最佳实践和 Agent 式浏览。用户要求“审计我的网站”“检查网站质量”“运行 Lighthouse 审计”“检查页面质量”或“优化我的网站”时使用。

F

firecrawl-website-design-clone

firecrawl / firecrawl-workflows

根据 Firecrawl 抓取的证据，将任意网站的设计系统提取为适用于 Agent 的 DESIGN.md。用户希望从网站获取颜色、字体、间距、组件、布局模式或品牌/UI 指南，以便 AI Agent 创建新网站、复刻其风格或构建受该设计启发的页面时使用。

B

baoyu-infographic

jimliu / baoyu-skills

生成具有 21 种版式和 22 种视觉风格的专业信息图。分析内容、推荐版式×风格组合，并生成可供发布的信息图。用户要求创建“infographic”“信息图”“visual summary”“可视化”或“高密度信息大图”时使用。

D

design-system

nextlevelbuilder / ui-ux-pro-max-skill

Token 架构、组件规范和幻灯片生成。涵盖三层 token（primitive→semantic→component）、CSS 变量、间距/字体排版尺度、组件规范和策略性幻灯片制作。用于设计 token、系统化设计和符合品牌规范的演示文稿。

E

expo-ui

expo / skills

使用 @expo/ui 包构建原生 UI：iOS 上使用真正的 SwiftUI，Android 上使用 Jetpack Compose。对于表单页（BottomSheet）、选择器、滑块、开关、菜单和分组表单区段，默认使用 @expo/ui；不要使用 Reanimated、@gorhom/bottom-sheet 或 RN 内置 Picker/Switch；改用 @expo/ui。仅当 @expo/ui 缺少相应组件时才回退到 RN 内置组件。注意：@expo/ui List 会渲染类似 iOS Settings 屏幕的原生分组行，并非虚拟化列表；大型数据集请使用 FlatList/FlashList。涵盖通用组件（Host、Column、Row、Button、Text、List、BottomSheet、FieldGroup、Switch、Slider、Picker、Menu）、RN 社区库的直接替代方案，以及特定平台的 SwiftUI/Jetpack Compose 视图树。不适用于 Expo Router 导航、Reanimated 或数据获取。

E

expo-native-ui

expo / skills

构建美观且具有原生体验的 Expo 界面。涵盖 Apple HIG 样式、语义颜色、原生控件、SF Symbols、媒体、视觉效果、渐变、存储和响应式布局。路由和导航请使用 expo-router 技能；动效和动画请使用 expo-animation 技能。

D

design

nextlevelbuilder / ui-ux-pro-max-skill

全面的设计技能：品牌形象、设计令牌、UI 样式、Logo 生成（55 种风格，Gemini 或 Atlas Cloud AI）、企业形象项目（50 项交付物、CIP 模型图）、HTML 演示文稿（Chart.js）、横幅设计（22 种风格，社交媒体/广告/网页/印刷）、图标设计（15 种风格、SVG、Gemini 3.1 Pro）、社交媒体图片（HTML→截图，支持多平台）。操作：设计 Logo、创建 CIP、生成模型图、制作幻灯片、设计横幅、生成图标、制作社交媒体图片、设计品牌形象和设计系统。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

U

ui-styling

nextlevelbuilder / ui-ux-pro-max-skill

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 实用优先样式和基于 canvas 的视觉设计，创建美观且易于访问的用户界面。适用于构建用户界面、实现设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现深色模式、生成视觉设计和海报，或在多个应用中建立一致的样式规范。

B

baoyu-cover-image

jimliu / baoyu-skills

通过组合 11 种调色板和 7 种渲染风格，根据 5 个维度（类型、调色板、渲染、文本、情绪）生成文章封面图。支持电影宽屏（2.35:1）、宽屏（16:9）和正方形（1:1）比例。用户请求“generate cover image”“create article cover”或“make cover”时使用。

E

excalidraw-diagram-generator

github / awesome-copilot

根据自然语言描述生成 Excalidraw 图表。当用户要求“创建图表”“制作流程图”“可视化流程”“绘制系统架构”“创建思维导图”或“生成 Excalidraw 文件”时使用。支持流程图、关系图、思维导图和系统架构图。输出可直接在 Excalidraw 中打开的 .excalidraw JSON 文件。

B

brand

nextlevelbuilder / ui-ux-pro-max-skill

品牌语调、视觉识别、信息传达框架、资产管理和品牌一致性。用于品牌内容、语气、营销素材、品牌合规和风格指南。

B

banner-design

nextlevelbuilder / ui-ux-pro-max-skill

为社交媒体、广告、网站主视觉、创意素材和印刷品设计横幅。提供多种艺术指导方案，可选用生成或提供的视觉素材。操作：设计、创建、生成横幅。平台：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、网站主视觉、印刷品。风格：极简、渐变、醒目字体、摄影、插画、几何、复古、玻璃拟态、3D、霓虹、双色调、编辑风、拼贴。

S

slides

nextlevelbuilder / ui-ux-pro-max-skill

使用 Chart.js、设计令牌、响应式布局、文案公式和上下文相关的幻灯片策略，创建战略性 HTML 演示文稿。

B

better-layout

jakubkrehel / skills

设置分组、对齐、阅读顺序、响应式结构和译文空间，让布局在调整尺寸、翻译或镜像后依然稳固。

将 React 项目和组件从 Radix UI 迁移到 Base UI。适用于从 radix 迁移、切换到 base-ui、转换 radix 原语或更换 shadcn 项目基础库的需求。支持迁移单个组件（“迁移 accordion”）或整个项目。

F

firecrawl-demo-walkthrough

firecrawl / firecrawl-workflows

使用 Firecrawl 浏览器梳理产品的关键流程，并生成结构化的 UX／产品体验分析。适用于注册、引导流程、定价、文档、仪表板、产品演示准备、UX 拆解和首次使用体验分析。

B

better-interface

jakubkrehel / skills

从无障碍性、布局、文案、排版、色彩和 UI 润色等方面审核屏幕、流程或整个界面，并返回一份排序后的报告。

I

interface-design

dammyjay93 / interface-design

以精细设计为先的界面设计，适用于仪表板、管理面板、SaaS 应用、工具、设置页面、数据界面和交互式产品。在设计、构建、审查、审核或改进产品 UI 时，如果视觉表现、布局层级、设计令牌、状态、视觉方向或设计系统一致性很重要，请使用。不适用于营销页面、着陆页、营销活动或仅涉及品牌的工作。

B

better-accessibility

jakubkrehel / skills

依据 WCAG 2.2 审核并修复键盘和焦点行为、ARIA、无障碍名称、表单、屏幕阅读器播报、动态效果和缩放。

L

landing-page-design

skills-shell / superpowers

通过布局规则、首屏设计和 CTA 心理学优化落地页转化率。涵盖首屏公式、社会认同的布局、移动端设计和 F 型阅读模式。适用于：初创公司落地页、产品页、SaaS 营销、转化率优化。触发词：落地页、首屏区域、首屏可见内容、转化率优化、落地页设计、CTA 按钮、主视觉图片、落地页布局、SaaS 落地页、产品页设计、转化率、落地页最佳实践

Y

youtube-thumbnail-design

skills-shell / superpowers

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