Skills

H

html-to-bricks

respira-press / agent-skills-wordpress

当用户说“把这个 html 转换成 bricks”或“把 html 粘贴进 bricks”，或有 Webflow、Framer、CodePen 或旧的静态导出内容要导入 Bricks 站点时使用。将原始 HTML 和 CSS 转换为原生 Bricks 元素，把颜色、字体和间距映射到设计令牌，并在已安装时加上 ACSS 类。

I

imgui-ui-ux-engineering

muhosekerci / imgui-ui-ux-engineering

主动设计、改进或审查高质量的 Dear ImGui 工具、C++ 编辑面板、游戏开发界面、调试仪表盘、可视化界面和桌面工作流。当提及 Dear ImGui，或提供的代码中包含 `ImGui::`、`imgui.h`、`ImGuiContext` 或 ImGui 后端符号等直接证据时使用。对于未标注框架的 C++ 编辑器/工具需求，仅在用户明确询问 Dear ImGui 是否合适时使用；否则保持框架选择开放。对于明确指定其他 UI 框架（如 Qt、GTK、WPF、wxWidgets、JUCE 或 Slate）的任务不要触发。涵盖 UI 架构、信息层级、dockspace 布局、设计系统、自定义组件、UX 状态、键盘/手柄交互、DPI/字体、性能和代码质量。

M

moai-tool-svg

modu-ai / moai-adk

SVG 创建、优化和转换专家。在创建矢量图形、用 SVGO 优化 SVG 文件、实现图标系统、构建数据可视化或添加 SVG 动画时使用。

P

page-template-library

respira-press / agent-skills-wordpress

当用户说“把这个保存为模板”“用这个页面创建一个操作手册”“记录这个布局”，或已经手工搭建同一类页面三次时使用。将规范的页面模式记录为可复用的操作手册，之后生成页面时可在数秒内据此生成。

P

phase-3-mockup

ww-w-ai / bkit-claude-code

无需设计师即可创建 UI/UX 线框图与 HTML/CSS/JS 原型。触发词：mockup、prototype、wireframe、UI design default: bkit:pipeline-guide frontend: bkit:frontend-architect

P

plain-language-design

owl-listener / inclusive-design-skills

编写和审阅内容以实现平实语言的可及性。适用于撰写界面文案、错误消息、说明、入门引导文本、帮助内容、法律或医疗信息、表单，或任何面向用户的文本。触发词：平实语言、阅读水平、简化文本、术语、难以理解、没人看这个、文案不清、重写、太复杂、ESL、读写能力、可读性。

P

polish

bastani-inc / atomic

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

P

prd-grade-fe

rheinmir / setup

一条龙式生产级前端流水线，带机器哨兵闸门：一条消息完成主题来源访谈（A 预设 macOS 玻璃拟态为默认 · B 设计文档文件夹/文件 · C 粘贴目标页面 URL），把参数锁定到唯一的 design.md 文件（hallmark 与 impeccable 共同读取），再用 design-sync.py 生成 tokens.css 与 frontmatter，按 hallmark 搭建仅用 token 的页面，运行 fe-gate.sh（impeccable detect 61 条确定性规则 rc 0/1/2 + Playwright 4 种视口）以及 rubric audit/harden/polish，闸门未变绿不交付。当用户说「frontend production」「production-grade frontend」「dựng FE chuẩn production」「giao diện kỷ luật」「prd-grade-fe」「/prd-grade-fe」时调用。与 hallmark 不同（设计底座，没有 impeccable 闸门），也与 /br 不同（BR→frame 流水线，不单独负责前端层）。

R

react:components

leonxlnx / stitch-skills

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

R

remove-ai-slop

tushaarmehtaa / tushar-skills

利用渲染证据和置信度评分，审计并移除类似 AI 的设计与文案默认套路。适用于审查界面是否存在通用或重复模式时。

S

shadcn-ui

leonxlnx / stitch-skills

提供使用 shadcn/ui 组件集成和构建应用的专业指导，包括组件查找、安装、自定义和最佳实践。

S

stitch-design

leonxlnx / stitch-skills

Stitch 设计工作的统一入口。支持提示词增强（UI/UX 关键词、氛围）、设计系统综合（.stitch/DESIGN.md），以及通过 Stitch MCP 生成和编辑高保真屏幕。

S

svelte-frontend

windmill-labs / windmill

Windmill 前端的 Svelte 编码指南。在 frontend 目录中编写或修改代码时必须使用。

S

syncfusion-aspnetcore-dropdowns

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion ASP.NET Core 下拉组件的全面指南，包括 DropDownList、MultiSelect、AutoComplete、Mention、ComboBox、ListBox 和 MultiColumn ComboBox。涵盖单选与多选控件、数据绑定、筛选、分组、模板和辅助功能。是使用服务端数据绑定构建专业下拉界面的必备参考。

S

syncfusion-aspnetcore-tabs

syncfusion / aspnetcore-ui-components-skills

使用 Syncfusion Tab 组件在 ASP.NET Core 中实现标签页导航界面，用于组织和切换内容区域。在实现基于标签页的导航、多面板内容组织、向导，或任何需要通过基于标题的选择来组织内容区域的场景时使用此技能。

T

theme-factory

moizibnyousaf / ai-agent-skills

用于为各类成品应用主题样式的工具包，包括幻灯片、文档、报告、HTML 落地页等。提供 10 种预设配色和字体主题，可应用于已创建的成品，也可即时生成新主题。

T

thumbnail-design

thecraighewitt / skills

当用户想要创建 YouTube 缩略图概念、设计简报、提升缩略图点击率，或开发缩略图风格时使用。也适用于用户说“设计一个缩略图”“缩略图创意”“缩略图概念”“优化我的缩略图”“缩略图简报”“我的缩略图没人点”“为这个视频做缩略图”时。标题搭配请见 title-craft。包含点击率的视频分析请见 video-analysis。

U

ux-audit

sickn33 / agentic-awesome-skills

使用 Nielsen 启发式原则和现代移动端 UX 最佳实践审查界面中的 UX 问题

暗黑模式检测与规避、说服性与操纵性设计、隐私 UX、监管格局、可持续/绿色 UX，以及配有动作动词、错误信息与空状态文案微文案库的 UX 文案。在撰写界面文案或审查某一流程是否存在操纵时使用。

U

ux-notifications-and-toasts

uxcel-lab / product-skills

设计或评审通知——根据消息的紧急程度选择合适类型（徽标、横幅、snackbar、toast、alert、推送），并通过时机、频率和退订控制尊重用户注意力。当用户要求设计或评审通知、toast、snackbar、徽标、横幅、alert、推送通知或通知策略时触发。

U

ux-search

uxcel-lab / product-skills

设计或评审搜索体验——搜索输入框、自动建议、结果页、筛选/排序，以及无结果时的补救。将搜索功能与用户实际的查找方式（已知条目查找 vs. 探索式查找）相匹配，并对丰富建议、筛选布局和标签块等手段进行把关。当用户要求设计或评审搜索、搜索栏、自动补全/自动建议、搜索结果、筛选、排序或 "no results" 页面时触发。

V

vant-vue3

full-stack-skills / vue-ui-skills

为 Vue 3.0 的 Vant 提供结构化指导。当用户需要 Vant 搭配 Vue 3、询问 Button、Cell、Form、Dialog、Toast、Popup、ConfigProvider 等移动端 UI 组件、主题定制、项目搭建，或希望使用 `vant` 或 `van-` 组件实现移动优先界面时使用。本技能与 Vant 官方网站和使用指南保持一致，应作为 Vant Vue 3 技能的入口。

V

visualize-data

openai / role-specific-plugins

设计、构建、修改或质检定量图表与图形。当分析性回答需要视觉判断时使用，无论是内联回答、报告、仪表盘、笔记本还是制品。

W

web-animation-css-animations

agents-inc / skills

CSS 动画模式 - 过渡、关键帧、滚动驱动时间线、@property、对合成器友好的属性、prefers-reduced-motion

面向 Agentic AI 的设计模式：多 Agent 编排 UX、生成式 UI、RAG 界面、LLM 幻觉防护、置信度指示和信任校准。当设计 AI 助手或自主 Agent、添加验证提示，或审计 AI 功能的安全性、控制权和同意时使用。

A

animate

bastani-inc / atomic

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

A

audit

bastani-inc / atomic

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

B

behavioral-a11y

mgifford / accessibility-skills

在编写、审查或解读行为无障碍自动化时加载此技能——这类测试会操作渲染后的页面（调整视口大小、按下真实按键、截取并比较截图），而不仅仅检查静态标记或单一计算出的无障碍树。涵盖重排风险（SC 1.4.10）和焦点可见风险（SC 2.4.7）检查。绝对要始终将指示器结果与已确认的失败分开报告。在任何情况下都不得将无问题的行为扫描视为符合 WCAG，也不得将 `cantTell`/测试错误/指示器结果合并为单一的通过/失败信号。

B

branding

steveclarke / dotfiles

为项目创建完整的品牌标识——包括标识图形（使用 logo-design 技能设计）、颜色、字体、在 Inkscape 中进行 SVG 精修，以及完整素材包（PNG、favicon、OG 图片），并以品牌指南 HTML 页面交付。触发词：branding、brand pack、brand color、project identity、social preview、visual identity。

B

busirocket-tailwindcss-v4

busirocket / agents-skills

应用 Tailwind CSS v4 的配置与样式策略。在配置 Tailwind v4、编写组件样式、在工具类与自定义 CSS 之间做取舍，以及避免样式漂移时使用。

C

clarify

bastani-inc / atomic

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

C

components

tambo-ai / tambo

创建并注册 Tambo 组件——生成式（AI 按需创建）和可交互式（预先放置、由 AI 更新）。在定义组件、使用 TamboComponent、withTamboInteractable、propsSchema，或注册供 AI 渲染或更新的组件时使用。

C

container-lines

boraoztunc / skills

添加带有迷你角落方块的垂直容器尺寸参考线，打造精确、结构清晰的网页布局。适用于添加容器线、尺寸布局参考线、垂直边界线、编辑网格标记或小型角方框装饰细节。

C

conversion-audit

respira-press / agent-skills-wordpress

当用户说“审计我的转化率”“CRO 检查”“找出转化流失”，或在付费推广前、改版后询问什么在损害转化时使用。对六个摩擦维度打分：首屏清晰度、CTA 层级、表单长度、社会认同、速度、信任信号。

C

create-issue-interaction-ui

paperclipai / paperclip

端到端添加一种新的 Paperclip 议题线程交互类型。当仓库工作引入或扩展 request_confirmation、复选框确认、ask_user_questions 或 suggest_tasks 等交互卡片时使用。

D

distill

bastani-inc / atomic

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

E

email-template-builder

borghei / claude-skills

使用 React Email 或 MJML 构建邮件模板系统：响应式布局、深色模式、多服务商发送和垃圾邮件评分优化。在搭建事务性邮件、构建邮件设计系统或调试送达率时使用。

F

flux-ui

basmilius / skills

适用于使用 Flux（作者 Bas Milius）构建、编辑或审查 Vue 3 UI：@flux-ui/components（文档见 flux-ui.dev）及其同系列包 @flux-ui/application（应用外壳/仪表盘）和 @flux-ui/statistics（KPI/图表）。触发条件包括 Flux 前缀组件（FluxPrimaryButton、FluxFormField、FluxPane）、FluxRoot / showConfirm / showSnackbar / showPrompt / showAlert、其 composables（useBreakpoints、useFluxStore、use*Injection），或任何来自 @flux-ui/* 的导入。这是 Vue 3 版 Flux（basmilius），不是 fluxui.dev 的 Livewire/Blade Flux，也不是 Flux web-components 库；切勿混用它们的语法。

F

freemius-checkout

freemius / freemius-ai

在 React 应用中构建面向客户的 Freemius Checkout UI——包括 Checkout Provider（浮层上下文）、Subscribe（订阅价格表）、Topup（一次性/积分价格表）、Paywall 以及自定义结账按钮。在向 React 前端添加定价页面、"upgrade"/"buy credits" 按钮、浮层结账或付费墙时使用。涵盖 React Starter Kit 的 Checkout 组件和前端 Checkout SDK（`@freemius/checkout`），以及前端依赖的少量结账专用后端端点（购买同步 `POST /api/purchase`、`GET /api/checkout/pricing` 以及托管重定向处理器）；底层的结账创建和权益同步引擎仍属于 `freemius-core`。

F

freemius-customer-portal

freemius / freemius-ai

在 React 应用中构建 Freemius Customer Portal——一个自助界面，让已登录用户管理其订阅（升级/更换套餐）、取消订阅（通过可降低流失的挽留优惠券）、编辑账单信息，以及查看付款和下载发票。在添加 "Account"、"Billing"、"Manage subscription" 或 "Invoices" 页面时使用。涵盖 React Starter Kit 的 Customer Portal 组件和 SDK 的无头门户处理器（`freemius.customerPortal`）；服务端的结账/权益同步属于 `freemius-core`。

F

frontend-design

s-hiraoku / synapse-a2a

创建独特、生产级前端界面的指南。涵盖视觉设计系统、字体排印、色彩、动效、空间构图和 Web 界面标准。在设计 UI、建立设计系统或审查前端代码视觉质量时使用。

L

landing-page-generator-skill

buildfastwithai / buildfast-skills

生成高转化率的落地页，输出为生产就绪的 HTML，内置设计主题、文案框架（PAS、AIDA、BAB）、CTA 策略、SEO meta，以及自动化的转化率/速度审计。当用户想要落地页、活动页、线索捕获页、推广页、发布页或单页站点时使用——或者想要审查、审计或改进现有落地页时——即使用户没有说 "landing page"（例如 "a page for my product"、"somewhere to send ad traffic"、"a signup page for the webinar"）。

M

mapcn

ferminrp / agent-skills

在 React + shadcn 项目中集成 mapcn 的技术指南。当用户要求集成 mapcn、将 mapcn 添加到 shadcn 应用、使用 mapcn 的 MapControls/Markers/Routes/Clusters、实现受控视口状态、使用 useMap hook，或通过 mapcn 访问 MapLibre 时使用。

M

mcp-visual-output

yonatangross / orchestkit

通过 @json-render/mcp 实现交互式 MCP 可视化输出：把纯 JSON 工具响应升级为在 Claude、Cursor、ChatGPT 等 MCP 客户端内以沙箱 iframe 渲染的仪表盘。当工具结果用统计网格、数据表格或状态徽章呈现比纯文本更易读时使用。至于服务本身（传输、鉴权、工具处理器、安全），请使用 ork:mcp-patterns。

M

miniapp-develop

lotosbin / claude-skills

暂无简介

N

nano-banana-imagegen

the-focus-ai / nano-banana-cli

使用 Google Gemini 图像模型生成和编辑图像。当用户要求用 AI 创建、生成、制作或编辑图像时使用本技能。支持文生图、图像编辑、风格迁移和多图合成。触发请求如“create an image”、“generate a picture”、“make me a logo”、“edit this photo”、“add X to this image”。

P

pm-discovery

uxcel-lab / product-skills

规划或评审产品发现流程 —— 在开始构建之前弄清楚要构建什么。确定你正在降低哪种风险以及决策需要多大确定性，应用始终成立的核心原则（持续而非分阶段、成果重于产出、问题先于解决方案、询问过去的行为、让证据与风险匹配、从已验证的问题中生成解决方案、合乎伦理地研究），并对依赖上下文的决策设卡（问题研究还是解决方案研究、定性还是定量、轻量还是深入、投入前需要多大确定性）。当被要求规划发现流程、“弄清楚要构建什么”、建立持续发现、设计研究计划、做客户/用户研究、找到值得解决的问题，或在投入前降低产品方向的风险时触发。

P

premium-ui-revamp-skill

buildfastwithai / buildfast-skills

审计并将现有网页界面改造为精致、专业、贴合产品的体验，同时保留其行为，并在当前前端技术栈内工作。适用于以下请求：改进由 vibe coding 生成、通用、模板化、不一致、过时、业余或明显由 AI 生成的 UI；重新设计现有页面、应用、仪表盘、落地页或组件；建立更强的艺术指导、层级、字体排版、间距、色彩、响应式、可访问性、交互状态或视觉一致性；或对 HTML、CSS、JavaScript、React、Vue、Svelte、Next.js 及类似前端代码库进行高端 UI 打磨。

P

prompt-engineering-ui

ormus-solutions / libreuiux-claude-code

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

S

saas-sidebar

blink-new / claude

按照 ChatGPT/Notion 设计模式，为 SaaS 仪表盘构建现代化的可折叠侧边栏

S

service-booking-flow

boraoztunc / skills

为沙龙、理发店、水疗中心、健康工作室、诊所和酒店服务品牌创建或重新设计预约服务网站。适用于温暖的编辑式布局、衬线字体主导的品牌形象、纪实风格的人像裁切、简洁舒缓的服务项目选择器、支持位置感知的预约，以及优雅可信的运营状态设计。

S

setup-design-system

andrewvaughan / agent-council

初始化设计系统，或创建具备无障碍支持、Tailwind/shadcn 集成和文档的新 UI 组件。适用于搭建初始设计系统、添加组件类别，或创建需要设计评审的复杂 UI 组件时。

S

slides

jetbrains / skills

使用 PptxGenJS 及渲染/校验工具创建和编辑演示幻灯片文件（`.pptx`）。当任务涉及构建新的 PowerPoint 幻灯片、从截图/PDF/参考幻灯片重建幻灯片、在保持可编辑输出的同时修改幻灯片内容、添加图表/图示/视觉元素，或诊断溢出、重叠、字体替换等布局问题时使用。

S

syncfusion-aspnetcore-accordion

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion Accordion 组件，用于组织可展开的导航与内容区块，支持单窗格或多窗格展开。

S

syncfusion-aspnetcore-breadcrumb

syncfusion / aspnetcore-ui-components-skills

使用 ASP.NET Core Breadcrumb 控件显示层级导航路径。在实现面包屑导航、处理项绑定、配置溢出行为或自定义模板与图标时使用此 skill。

S

syncfusion-aspnetcore-dashboard-layout

syncfusion / aspnetcore-ui-components-skills

使用 Syncfusion ASP.NET Core Dashboard Layout 组件实现响应式、可调整大小且可拖拽的面板布局。

S

syncfusion-aspnetcore-listview

syncfusion / aspnetcore-ui-components-skills

掌握用于 ASP.NET Core 的 Syncfusion ListView 组件，创建可交互的数据绑定列表，具备分组、虚拟化、模板和嵌套导航等高级功能。

S

syncfusion-aspnetcore-menu

syncfusion / aspnetcore-ui-components-skills

实现 Syncfusion Core Menu 组件以显示层级导航菜单，支持数据绑定、图标、动画和丰富的事件处理以响应用户交互。

T

theatre-js

jbmanllr / agent-skills

在实现动效设计、时间轴动画、可视化动画编辑器、为 Three.js/R3F 场景制作动画、创建关键帧动画，或使用 Theatre.js、@theatre/core、@theatre/studio、@theatre/r3f、theatric，或为 Web 构建动画工具时使用。

T

typography-scale-builder

onewave-ai / claude-skills

构建完整的排版系统——模块化或流式字号比例、每种字号的字行高与字距、字重角色，以及垂直韵律——导出为令牌、Tailwind 配置和 CSS。可与 font-pairing-suggester 搭配使用（由其挑选字体；此技能构建它们所依托的系统）。