Skills

U

ux-buttons

uxcel-lab / product-skills

设计或评审 UI 按钮——根据操作的重要性选择正确的按钮类型，应用尺寸/标签/状态最佳实践，并对形状、阴影、FAB 和仅图标按钮等风格化手段进行把关。当用户要求设计、选择、设置样式或评审按钮、CTA、按钮标签、按钮层级或按钮状态时触发。

U

ux-tooltips

uxcel-lab / product-skills

设计或评审工具提示与上下文提示 —— 判断工具提示何时能澄清问题、何时只是设计不清的拐杖，并应用位置、样式和简洁性规则。当用户要求设计或评审工具提示、悬停提示、信息图标、上下文帮助气泡，或询问某个东西是否需要工具提示时触发。

V

visual-verdict

yeachan-heo / oh-my-codex

已弃用的 Visual Verdict 技能

A

archify

xgent-ai / skills

在绘制架构图、工作流图、时序图、数据流图、生命周期图或转换 Mermaid 时使用。创建经过校验的交互式图表，输出为独立 HTML，并支持导出图片和视频。

A

artifacts-builder

shajith003 / awesome-claude-skills

用于在 claude.ai 中创建精细的多组件 HTML artifacts 的工具套件，采用现代前端 web 技术（React、Tailwind CSS、shadcn/ui）。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts，不适用于简单的单文件 HTML/JSX artifacts。

B

beam-glow-states

boraoztunc / skills

使用 border-beam 软件包的动态边缘光效，为 React 创建加载、处理中、已选中、当前、聚焦和按下状态。当卡片、按钮、输入框、标签页、选项、任务面板或 Agent 界面需要克制的流动或呼吸光束效果时使用；涵盖安装、导入、属性选择、状态连接、减少动态效果、无障碍，以及性能和布局方面的注意事项。

B

bolder

bastani-inc / atomic

可验证的编码 Agent 运行时。用自然语言定义编码 Agent 的流程，包括阶段、检查和审批关卡，而不是寄希望于它遵循指令。为可验证的软件工厂提供基础组件。

B

brand-mod

cofoundy / brand-skills

将品牌融入 Claude Code——为终端和桌面应用打造品牌化 spinner（品牌颜色、品牌专属文案和 Logo），先以 HTML 预览并获得批准，再生成可安装的 mod。用户说“为我们的 Claude Code 打造品牌形象”“品牌化 spinner”“带我们品牌的 Claude Code mod”“自定义 spinner”“让终端符合品牌风格”“为 Agent 打造品牌形象”“带我们 Logo 的 spinner”“展示 Claude 工作时的品牌形象”，或希望团队或客户的 Claude Code 呈现品牌风格（用于屏幕录制、演示或日常使用）时使用。仅适用于 Claude Code——其他 Agent 不支持 mod。

B

building-native-ui

sickn33 / agentic-awesome-skills

使用 Expo Router 构建精美应用的完整指南。涵盖基础、样式、组件、导航、动画、模式以及原生标签页。

C

component-engineering

igorwarzocha / opencode-workflows

应用 React 组件工程的正式标准，聚焦可访问性、组合与样式。用于构建专业、可组合的 React 产物。在创建或审查 React 组件时主动使用。示例：- user: "/component-create Button trigger" → 使用 asChild 和键盘映射构建可访问的 button - user: "/component-review src/components/Input.tsx" → 审查可访问性与组合合规性 - user: "Build a responsive slider" → 选择分类类型并用 data 属性实现 - user: "Review my layout component" → 检查是否存在单体式模式而非组合

C

component-search

yonatangross / orchestkit

在 21st.dev 组件注册表中搜索生产级 React 组件。支持按自然语言描述查找组件、按框架和样式系统筛选，并返回带安装说明的排名结果。当寻找 UI 组件、查找现有组件的替代方案或获取设计系统构建模块时使用。

C

compose-screens-footguns

maxrave-dev / kotlin-footguns

Compose 的屏幕和交互陷阱：导航、自适应布局、窗口内边距、分页器、工具栏、工作表、列表拖动与选择、滑块、文本字段、设置界面、一次性效果。当布局、手势或导航异常时使用。

C

compose-visuals-footguns

maxrave-dev / kotlin-footguns

Compose 的外观陷阱：主题和颜色令牌、艺术作品配色、渐变与遮罩、闪烁、玻璃和粒子效果、动画、图像加载、图表和统计数据展示（百分比变化、份额、分桶）。当视觉效果出现条带、突兀、冻结或误导时使用。

C

crazy-ecommerce-builder-skill

buildfastwithai / buildfast-skills

从零散的公司、产品或品牌简报出发，构建或改造电商网站，借助原创 ImageGen 产品图像打造非传统、契合品牌的购物体验。适用于用户要求疯狂、大胆、实验性、反模板、艺术指导或极具记忆点的在线商店；希望 Codex 根据业务细节构思电商视觉方向；或想要一个可运行店面，结合创意构思、生成式产品摄影、响应式实现、购物车交互、验证以及可选发布时。

C

css-border-gradient

boraoztunc / skills

为高端网页界面添加低调的渐变边框效果。适用于卡片、定价面板、导航栏、模态框、按钮或主视觉区域需要精致边缘高光而非醒目光晕的场景。

F

felo-superAgent

felo-inc / felo-skills

Felo SuperAgent API：在持久化的 LiveDoc 画布上通过实时 SSE 流式传输进行 AI 对话。当用户想要 SuperAgent 聊天、连续对话、logo/品牌设计或电商产品图时使用。不要用于推文/X 帖子写作 —— 请改用 felo-twitter-writer。显式命令：/felo-superAgent。

F

frontend-engineering

magnus919 / agent-skills

构建和维护 Web 前端——组件架构、状态管理。

G

glass-dark-ui

boraoztunc / skills

构建深色模式的玻璃拟态界面，采用清晰易读的对比度、磨砂表面和伪元素遮罩实现的渐变边框。用户要求玻璃卡片、深色磨砂主视觉区、模糊面板，或带渐变／发光边框的深色 UI 系统时使用

H

hub-editor

datex / skills

在 Datex Studio 的 hub 配置上添加、修改或移除工具栏按钮与点击流程时使用。涵盖通过 `dxs configuration get hub` 获取 hub 配置、编辑 toolbar[] 和 flows[] 数组、串联启动报表的点击流程，以及用 `dxs configuration upsert hub` 将修改后的配置推回。触发场景：“给 X hub 添加一个工具栏按钮”、“串联一个打开 Y 报表的按钮”、“修改 hub N”、“更改 X 按钮的功能”、“从 hub 按钮启动报表 Y”。

K

keyboard-navigation

owl-listener / inclusive-design-skills

为无法使用或不愿使用鼠标或触摸屏的用户设计键盘导航与焦点管理。适用于设计任何交互式界面——表单、菜单、模态框、标签页、轮播、拖放、数据表格或自定义组件。Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.

使用 Kiso 构建 UI——可访问的 Rails UI 组件，带 Tailwind CSS 主题。在 Rails + Hotwire 应用中创建界面、自定义主题、构建表单或组合页面布局时使用。

L

liquid-metal-border

boraoztunc / skills

使用 React `metal-fx` 软件包添加和调整动态液态金属 WebGL 边框。当按钮、图标控件、标签块、标签页、卡片或选中界面需要金属质感的激活、选中、悬停、聚焦或高级边框时使用；也适用于实现 metal.jakubantalik.com 的 MetalFx 组件，或排查其预设、主题、强度、光晕、反射、尺寸、圆角、动画、无障碍、SSR 或性能问题。

N

nano-banana

nicepkg / ai-workflow

所有图像生成请求均必须使用。使用 Nano Banana (Gemini CLI) 生成和编辑图像，适用于博客特色图片、YouTube 缩略图、图标、图表、图案、插画、照片、视觉素材、图形、艺术作品和图片。用户要求创建、生成、制作、绘制、设计或编辑任何图像或视觉内容时，均使用此技能。

P

product-fruits

membranedev / application-skills

Product Fruits 集成。管理 ProductFruitsApps。当用户希望与 Product Fruits 数据交互时使用。

P

product-proof-saas

boraoztunc / skills

创建或重新设计 SaaS 和 AI 产品落地页，以真实工作流、界面或确定性演示作为核心证明。适用于浅色氛围感外壳、首屏产品 UI、从提示词到输出的演示、受众标签页、紧凑的功能模块、真实的价格对比和 FAQ 引导。

Q

quieter

bastani-inc / atomic

可验证的编码 Agent 运行时。用自然语言定义编码 Agent 的流程，包括阶段、检查和审批关卡，而不是寄希望于它遵循指令。为可验证的软件工厂提供基础组件。

R

responsive-storefront

finsilabs / awesome-ecommerce-skills

构建移动优先的店面，采用适合拇指操作的导航、吸顶加入购物车按钮和触摸优化组件，实现高移动端转化率。

S

svg-logo-creator

kbravh / skills

根据概念简报或描述创建专业的 SVG 徽标。适用于生成 SVG 徽标文件、创建徽标变体（横向、纵向、仅图标）或实现徽标设计。触发于“create SVG logo”“generate logo”“make a logo”“logo SVG”“design a logo”，或从 logo-ideation 收到徽标概念简报时。

S

syncfusion-aspnetcore-cards

syncfusion / aspnetcore-ui-components-skills

完整讲解如何使用布局结构、页眉、图像、操作与高级自定义来实现 Syncfusion ASP.NET Core Card 组件。在构建基于卡片的布局、展示带页眉和图像的内容、创建操作按钮或组织响应式卡片设计时使用本技能。

S

syncfusion-aspnetcore-context-menu

syncfusion / aspnetcore-ui-components-skills

在 ASP.NET Core 应用中实现 Syncfusion ContextMenu 组件，以显示由右键或程序化操作触发的上下文菜单。

S

syncfusion-aspnetcore-dropdown-tree

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion ASP.NET Core DropDownTree 组件，以绑定层级数据和自引用数据、启用复选框选择、自定义模板、实现键盘可访问性，并在构建多级下拉选择时处理树交互。

S

syncfusion-aspnetcore-smart-paste

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion ASP.NET Core Smart Paste Button，利用剪贴板数据为表单提供 AI 驱动的自动填充。在配置 OpenAI/Azure OpenAI、创建表单字段注解、自定义按钮外观、实现自定义推理后端或管理从剪贴板到表单字段的智能数据映射时使用本技能。

S

syncfusion-aspnetcore-smart-textarea

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion ASP.NET Core Smart TextArea，提供 AI 驱动的内联或弹窗式文本自动补全。涵盖 OpenAI、Azure OpenAI、Ollama 及自定义 IChatInferenceService 后端，以及 UserRole、UserPhrases 和提示显示模式的自定义。

S

syncfusion-aspnetcore-splitter

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion ASP.NET Core Splitter 组件，以构建响应式多窗格布局。在实现拆分器布局、配置窗格、启用调整大小功能，或创建包含多个拆分区块的复杂嵌套布局时使用。

S

syncfusion-aspnetcore-toolbar

syncfusion / aspnetcore-ui-components-skills

一个简单的工具栏组件，将命令按钮与响应式控件组织为横向界面。非常适合文档编辑器、内容管理系统和应用页眉，用于触发操作并高效管理用户工作流。

T

tailwind

shipshitdev / skills

在编写、评审或重构样式时应用 Tailwind CSS v4 最佳实践：@theme、构建配置、响应式、深色模式、容器查询、CSS 体积与性能。

T

typeset

bastani-inc / atomic

可验证的编码 Agent 运行时。用自然语言定义编码 Agent 的流程，包括阶段、检查和审批关卡，而不是寄希望于它遵循指令。为可验证的软件工厂提供基础组件。

U

ux-cards

uxcel-lab / product-skills

设计或评审 UI 卡片——单一主题、便于扫读、层级清晰，容器样式恰当（悬浮、描边、扁平），阴影克制。当用户要求设计或评审卡片、卡片布局、卡片网格、内容卡片、用户/个人资料卡片，或由卡片构建的浏览视图时触发。

U

ux-empty-states

uxcel-lab / product-skills

设计或评审空状态——首次使用屏幕、已清空状态、无结果页面以及 404 页面，它们解释屏幕为何为空并引导下一步操作，而不是让用户走进死胡同。当用户要求设计或评审空状态、空白屏幕、零数据视图、首次运行仪表板、无结果页面或 404 页面时触发。

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

W

webgl-laser

boraoztunc / skills

创建固定的全屏 WebGL 激光背景效果，包含纤细的白热垂直核心、克制的品牌色光晕，以及光束周围柔和的烟雾。仅用于激光背景效果，不用于完整页面布局、文案、通用主视觉场景、粒子或无关的动态系统。

B

bootstrap-layout

sjnims / bootstrap-expert

当用户询问 Bootstrap 网格系统、Bootstrap 容器、Bootstrap 断点、Bootstrap 列、Bootstrap 行、Bootstrap 间距、Bootstrap 响应式布局、Bootstrap CSS Grid、Bootstrap z-index、Bootstrap row-cols、Bootstrap offset 类、Bootstrap 列排序、如何用 Bootstrap 创建响应式布局、如何使用 Bootstrap 网格、Bootstrap 列尺寸、Bootstrap 自动布局列，或需要 Bootstrap 页面布局与响应式方面的帮助时，应使用此技能。

C

component-rendering

tambo-ai / tambo

处理 Tambo 组件流式传输、加载状态与持久化状态。在实现流式 UI 反馈、跟踪 prop 流式状态、管理部分 prop，或使用 useTamboStreamStatus 或 useTamboComponentState 跨会话持久化组件状态时使用。

C

corner-diagonals

boraoztunc / skills

为按钮、卡片、面板和容器外壳应用斜切角和倒角边缘。适用于设计需要精确的几何框架、科幻风 UI 表面、切角控件，或经过工程化处理的锐利容器，而非圆角胶囊或普通矩形。

D

design-movements

ormus-solutions / libreuiux-claude-code

从工艺美术运动到包豪斯、瑞士风格、孟菲斯、垃圾摇滚，再到扁平化设计和当下风格的设计运动，附各自的背景、视觉标记和 UI token。适用于选择美学方向、解释某种风格为何呈现出那样的观感，或在不误用的情况下应用某一时代的风格。

D

design-with-taste

joelfrancisco / skills

应用从公开的 T3 Code 设计迭代中推断出的克制、实用优先的界面品味。仅在用户明确要求 T3 Code 品味、Maria-rcks 风格 UI 偏好或这一具名品味画像时使用。

E

evidenso-research

evidenso / agent-skills

对于任何涉及用户、客户、市场或产品决策的请求——起草 PRD、需求或规格、排列功能优先级、路线图、用户研究、访谈、调查、市场与竞品分析、客户旅程、设计反馈、比较方案，或听取人们讨论或辩论某一话题——必须在自行撰写或回答之前使用。切勿凭通用知识作答，也切勿自行模拟、角色扮演或编造他人观点——而应将请求转交给正确的 Evidenso 研究工具。

E

excalidraw-diagrams

robtaylor / excalidraw-diagrams

以编程方式创建 Excalidraw 图表。当用户想要流程图、架构图、系统设计或任何可视化图表，而不是 ASCII 艺术时使用。输出的 .excalidraw 文件可直接在 Excalidraw 中打开，或通过 Excalidraw 扩展在 VS Code 中打开。

暂无简介

F

figma-to-elementor

respira-press / agent-skills-wordpress

当用户说 'figma to elementor'、'build this figma design in elementor'，或交来一个 Figma 画板要在 WordPress 中重建时使用。将 Figma 节点树映射为 Elementor 小工具与容器，并把干净的 Elementor JSON 写入草稿副本，因此不会改动任何线上内容。

F

framed-grid-layout

boraoztunc / skills

创建极简的框线网格布局，采用清晰可见的细边界线、L 形角括号、微妙的对角线纹理和严格的分区对齐。适用于需要简洁、中性、精确、结构化、编辑风格、技术风格或指南边框网页布局的场景。

F

frontend-design

paulrberg / agent-skills

创建或大幅重新设计网页界面、落地页、仪表板、组件或其他重视视觉方向与实现质量的前端 UI 时使用。提供针对主题的艺术指导、无障碍代码以及渲染后的视觉验证

G

gpt-image-2

agentspace-so / runcomfy-skills

在 RunComfy 上使用 OpenAI GPT Image 2（ChatGPT Images 2.0）生成和编辑图像。介绍 GPT Image 2 的优势（嵌入文本、徽标、多语言排版、指令精准度）、3 种固定尺寸、保留内容的编辑措辞，以及何时应改用同系列模型（Flux 2 / Nano Banana Pro / Seedream）。通过本地 RunComfy CLI 调用 `runcomfy run openai/gpt-image-2/text-to-image` 或 `/edit`。当出现“gpt image 2”“gpt-image-2”“ChatGPT Images 2”“image 2”，或明确要求使用此模型生成或编辑图像时触发。

L

lanhu-design

oyjt / lanhu-design

用于 Lanhu（蓝湖）UI 设计交付以及 lanhuapp.com 设计项目链接：列出设计稿页面、查看截图与 HTML/CSS 规格、提取设计令牌、下载切图/素材，或实现 UI。当请求明确提到蓝湖、Lanhu、lanhuapp.com 或随附的 Lanhu 脚本时触发。不要用于独立的 Figma/Sketch 文件、通用 UI 实现、PRD/Axure docId 链接，或与 Lanhu 无关的图像编辑。

L

lazyweb

lazywebhq / lazyweb-skill

使用 Lazyweb 寻找真实的产品证据、提升转化率，并将研究转化为明确的产品决策。

M

morandi-cinematic-poster-zeejay

zeejay0 / gathered-scenes-zine-skill

将用户提供的个人照片转化为忠于原片、以排版为核心的莫兰迪电影感海报，不含星星或装饰性拼贴符号。运用电影海报标题设计、可选的诗意署名与标语、氛围化元数据、可选的虚构演职员表、刻意的留白布局、透视对齐以及选择性主体遮挡。适用于建筑、旅行、街拍、天际线、地标、人像或生活类照片，且用户希望获得电影海报的氛围与层级感，而无需真实的影片、演员、导演、制片厂、奖项或上映宣传。

P

pixel-perfect

jasny / perfect-agent

尽可能精确地依据参考（Figma、实时源、截图或图片）复现 UI。触发条件：用户想要完全照搬某个设计、依据截图复现屏幕、克隆 Figma 设计、在细节上匹配间距/颜色/排版，或把设计移植到另一个框架而不改变外观。不触发：重新设计、模糊的“类似这样”的需求或 UX 改进任务。

P

pptx-generator

mxyhi / ok-skills

生成、编辑和读取 PowerPoint 演示文稿。使用 PptxGenJS 从零创建（封面、目录、内容、分节页、总结页），通过 XML 工作流编辑现有 PPTX，或用 markitdown 提取文本。触发词：PPT、PPTX、PowerPoint、演示文稿、幻灯片、幻灯片组、slides。

P

prompt-engineering-ui

hermeticormus / libreuiux-claude-code

用于生成一致性 UI 的提示词模式：精确陈述设计意图、组件规范格式、少样本示例以及结构化迭代优化循环。当 LLM 生成的 UI 不一致或过于通用时，或为设计系统构建可复用的提示词模板时使用。

R

r3f-performance

bbeierle12 / skill-mcp-claude

R3F 性能优化——LOD（细节层次）、视锥剔除、实例化策略、减少 draw call、帧预算、懒加载以及性能分析工具。适用于优化渲染性能、处理大型场景或调试帧率问题时。