Skills

Q

qe-a11y-ally

proffesor-for-testing / agentic-qe

全面的 WCAG 无障碍审计，包含多工具测试（axe-core + pa11y + Lighthouse）、使用 Promise.allSettled 的真正并行执行、优雅降级、带退避的重试、上下文感知修复、学习集成和视频无障碍。使用三级浏览器级联：Vibium → agent-browser → Playwright+Stealth。

Q

quieter

shipshitdev / skills

削弱视觉上过于激进或过度刺激的设计，同时保持质量。当设计过于大胆、喧闹、令人不适或花哨，需要更沉静的外观时使用。

R

replit-deck

mphinance / alpha-skills

采用 Replit Slides 着陆页模板库风格的单文件横向滑动 HTML 演示文稿。提供八种不同主题（helix、holm、vance、bevel、world-dark、world-mint、atlas、bluehouse），每种都是从 replit.com/slides 提取的完整视觉系统（配色 + 字体 + 强调元素）。选择一种主题，不要混用。适用于路演演示文稿、董事会报告、品牌备忘录和营销活动展示；仅在用户明确要求“Replit Slides style”时使用。

R

researcher

pablostanley / designteam-app

在设计工作开始前，当项目需要竞品分析、受众画像或定位差距分析时启用。

R

reviewing-hi-fi

bm629 / agent-skills

在以代码形式产出的已完成（或修订后）高保真 UI 设计进行评审/评判时使用——这是一道验收关卡：渲染出的高保真稿是否是可靠的构建种子？评审者会亲自重新渲染该代码（无头浏览器），并对最新截图进行视觉评审——绝不信任交付的图片。依据单一来源的标准进行评判：相对于线框图的完整覆盖；高保真且种子不过度构建；视觉执行 + 客观打磨 + 具名美学启发法（主观品味绝不算作差距）；有 token 支撑/无设计系统漂移；真实内容（无 lorem）；渲染出的状态；响应式回流；对渲染结果进行数值化的 WCAG 2.2 AA 检查（axe-core + 视觉，不关闭任何规则）；暴露差距；将修订作为有范围的带版本增量。输出 `VERDICT: approve|revise` + 可执行的发现项；批准满足标准的种子（不对单薄页面做误判为修订），仅在有具名的、渲染出的差距时修订。需要具备视觉能力的运行时。不适用于编写高保真稿、结构（线框图）、token 系统（design-system）或最终代码。

S

scientific-slides

jaechang-hits / sciagent-skills

面向会议、研讨会、学位答辩和基金申请的科研演示。幻灯片设计、演讲结构、时间把控、面向幻灯片的可视化、答疑。PowerPoint 和 LaTeX Beamer。海报请使用 latex-research-posters。

S

screenshots

morphet81 / cheat-sheets

对受近期改动影响的组件截图，来源可以是正在运行的应用或 Storybook。支持为要访问的页面和要执行的操作提供自定义指令。应用截图通过临时的 e2e 测试捕获。

S

search-autocomplete

finsilabs / awesome-ecommerce-skills

通过即时搜索建议、模糊错别字匹配和按分类感知的结果加速产品发现，由 Algolia 或 Elasticsearch 驱动

S

start-from-scratch

tambo-ai / tambo

指导从零创建新的 Tambo 项目并给出技术选型建议。适用于用户想要启动新项目、用 Tambo 构建新应用、从无到有创建东西，或需要为新生成式 UI 应用选择技术时。若要把 Tambo 添加到已有项目，请改用 add-to-existing-project 技能。

S

style-guide-builder

picsart / gen-ai-skills

根据参考图片构建可复用的视觉风格指南。

S

syncfusion-winforms-docking-manager

syncfusion / winforms-ui-components-skills

指导实现 Syncfusion WinForms DockingManager 控件，用于 Visual Studio 风格的可停靠窗口和布局。适用于创建停靠、浮动或选项卡式窗口并进行高级布局管理。涵盖 WinForms 应用中的停靠状态、自动隐藏功能、标题自定义和序列化。

S

syncfusion-winforms-listview

syncfusion / winforms-ui-components-skills

在 Windows Forms 中实现 Syncfusion SfListView 控件以创建基于列表的 UI 的指南，支持数据绑定、分组、排序、筛选和选择。适用于构建包含项集合、资源管理器视图、联系人列表或可排序/筛选列表的产品目录的应用。涵盖数据绑定、复选框列表、分组列表、筛选列表以及列表界面的丰富数据展示。

T

team-okrs

mphinance / alpha-skills

OKR 跟踪页面——季度横幅、三个目标及其作为进度条展示的关键结果、负责人头像、状态标签，以及“本季度概览”侧边栏。当需求中提到“OKR”“关键结果”“目标”时使用。

T

theme-factory

snyk / agent-scan

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

T

thesis-defense-pptx

zouchenzhen / thesis-defense-pptx-skill

从本地论文 PDF / LaTeX 项目以及现有 PPTX 模板，创建、润色并质量检查可编辑的本科或研究生论文答辩 PowerPoint 演示文稿。当用户需要正式答辩 PPT、论文演示、学术答辩 PPT、与模板匹配的 PPTX，或需要带视觉检查的本地 PowerPoint 演示文稿生成时使用。

T

tweaks

mphinance / alpha-skills

为任意 HTML 成品添加实时参数化控件侧边栏，包括强调色、字号比例、密度、动效和主题；这些控件可实时改写 CSS 自定义属性，并将设置保存到 localStorage。用户无需再次提示 Agent，即可探索设计变体。适用于简要需求包含“变体”“并排选项”“调整这个”“让我调整”“实时控件”或“实时调参”时。

U

user-preference-respect

owl-listener / inclusive-design-skills

设计能检测并响应系统级用户偏好的界面。适用于实现暗色模式、减少动态效果、高对比度、文字缩放，或任何影响界面渲染方式的用户偏好。触发词：user preference、system preference、prefers-reduced-motion、prefers-contrast、prefers-color-scheme、forced-colors、media query、user settings、system settings、accessibility settings、OS settings。

V

vibefigma

vibeflowing-inc / vibe_figma

将 Figma 设计转换为可用于生产的 React 组件，搭配 Tailwind CSS。当用户提供 Figma URL、要求将 Figma 设计转换为 React/代码、想要从 Figma 提取组件，或提到 “vibefigma”时使用。需要 Figma 访问令牌（通过 --token 标志、FIGMA_TOKEN 环境变量或 .env 文件提供）。

W

weekly-update

mphinance / alpha-skills

单文件、横向滑动的每周团队更新幻灯片：已交付、进行中、受阻事项、指标和需求。共 6–8 页。需求提到“weekly update”“team update slides”“weekly status”或“周报演示”时使用。

A

ascii-diagram-boxflow

full-stack-skills / ascii-skills

为没有渲染器的环境生成纯 ASCII 框流图（框 + 箭头），并针对复杂图形提供对齐规则和拆分策略。

在创建按钮、输入框、标签和图标等原子级 UI 组件时使用。它们是设计系统中最小的构建单元。

B

better-accessibility

boraoztunc / skills

面向产品界面的无障碍工程，从焦点状态与键盘支持到 ARIA、表单与屏幕阅读器。适用于构建或评审 UI 组件、模态框、菜单、表单、自定义控件时，或当用户说"让它可无障碍访问"或反馈键盘、屏幕阅读器问题时。触发词包括 accessibility、a11y、WCAG、aria、focus ring、focus-visible、focus trap、keyboard navigation、tab order、tabindex、screen reader、sr-only、aria-live、alt text、hit area、touch target、pointer-events、hover on touch、prefers-reduced-motion、autoplay、toast duration、skip link、semantic HTML、aria-label、form errors、disabled buttons、"not keyboard accessible"。

B

better-colors

boraoztunc / skills

面向数字产品的色彩系统，从构建和命名调色板，到有含义地应用它并验证对比度。适用于创建或扩展调色板、命名颜色 token、为浅色和深色外观设置主题、审计代码库中的颜色或审查前端代码中的颜色时。触发词包括 color palette、palette generation、color scale、color ramp、brand color、accent color、neutral palette、gray palette、status colors、design tokens、semantic color tokens、token naming、theming、dark mode colors、contrast ratio、APCA、gamut、display p3、oklch、color conversion、gradients、color meaning、increased contrast。

B

building-components

hainrixz / claude-webkit

构建现代、无障碍且可组合的 UI 组件指南。适用于构建新组件、实现无障碍功能、创建可组合 API、设置设计令牌、发布到 npm/registry，或编写组件文档。

C

canvas-design

snyk / agent-scan

.png 和 .pdf 文档中使用设计理念创建精美的视觉艺术作品。当用户要求创建海报、艺术作品、设计或其他静态作品时，应使用此技能。创建原创视觉设计，不要复制现有艺术家的作品以避免侵犯版权。

C

cartography-geoviz

muend / geoai-skills

在回答任何创建、比较、设计或审查面向用户的地图的请求之前，始终先调用本技能，即使请求很简短或不够明确。涵盖出版地图、分级统计图、地图系列与小倍数图、可比较的多日期面板、比例/双变量/流向地图、栅格渲染以及交互式 Web 地图。包括分类、配色、图例、投影、无障碍与大数据的聚合。不要在另一项分析内部的临时诊断图时触发。

C

css-animations

editframe / skills

Editframe 时间线系统中 CSS 动画 fill-mode 的要求。在创建 CSS 动画、调试闪烁问题，或用户提到动画问题、淡入淡出效果、滑动效果、顺序动画时使用。

D

design-system-inventory-figma

southleft / skills-for-figma

一次调用即可盘点整个 Figma 设计系统：变量/令牌（按集合 + 模式分组）、组件和组件集（含属性定义及各变体的视觉规格），以及样式（含解析后的颜色/文本/效果值）。在生成代码或审查覆盖范围前需要了解完整设计系统时使用。触发语包括：“盘点我的设计系统”“提取所有令牌和组件”“这个设计系统里有什么”“导出设计系统套件”“列出每个变量、组件和样式”“构建设计系统清单”“审查我的 Figma 库”。包含详细度/范围保护机制，避免大型文件超出响应预算。功能远超原生 MCP 的 get_design_context（单选）和 get_metadata。

D

design-thinking

ysskrishna / ai-agent-skills

用于设计思维，或当产品或服务问题需要先理解用户再给出方案时："用户真正需要什么？"、"我们如何……"、"规划一次发现冲刺"、"验证这个概念"。当规格已冻结或任务是代码维护时跳过。

D

design-tokens

laurigates / claude-plugins

设计令牌与 CSS 自定义属性：主题系统、深色模式、组件库。在实现设计系统或用户提到 tokens、CSS 变量或主题化时使用。

E

explain-with-code-walkthrough

kjetilhartveit / kjetils-skills

用户要求通过代码讲解进行可视化说明时使用

E

explain-with-preview

kjetilhartveit / kjetils-skills

当用户要求通过预览进行可视化说明时使用。

E

explain-with-section-clips

kjetilhartveit / kjetils-skills

用户要求通过分段片段进行可视化讲解时使用

E

explain-with-slides

kjetilhartveit / kjetils-skills

用户要求通过幻灯片进行可视化讲解时使用

E

explain-with-video

kjetilhartveit / kjetils-skills

用户要求通过视频进行可视化讲解时使用

E

explainer-kit

kjetilhartveit / kjetils-skills

使用 `explain-visually` 或任何 `explain-with-*` 技能构建或组装解说页面时，用于获取共享主题、组件和组装脚本，确保所有解说页面风格一致

F

faststore-theming

vtex / skills

在决定、设计或实现 src/themes/ 中的 FastStore 主题定制，或处理设计 token 与 SCSS 变量时应用。涵盖全局 token、局部组件 token、Sass 变量、CSS 自定义属性以及 Brandless 架构。适用于无需组件覆盖的 FastStore 店面视觉定制。

F

figma-mcp

tdimino / claude-code-minoan

使用 MCP 服务工具将 Figma 设计转换为可直接用于生产的代码。当用户提供 Figma URL、要求设计到代码转换、要求实现 Figma 原型，或需要从 Figma 文件中提取设计 token 和系统值时，使用此 Skill。可处理 frame、组件以及整个设计文件，生成 HTML、CSS、React 或其他前端代码。

F

fixing-motion-performance

sickn33 / agentic-awesome-skills

审查并修复动画性能问题，包括布局抖动、合成器属性、滚动联动动画和模糊效果。动画卡顿、过渡不流畅，或需要审查 CSS/JS 动画性能时使用。

F

flutter-ui-patterns

thienqo / flutter-skills

构建和重构 Flutter widget、具备防过期异步校验与重复提交处理能力的表单、widget 预览、组件 API 及 UI 状态边界。仅在既有服务之上处理表单行为时可单独使用；仅当其基础设施发生变化时才加入网络或并发相关内容，并将视觉打磨、响应式布局、导航、动画和性能交由各自的专项技能处理。

F

frontend-atlas

flash-hero / goated-ui-skill

经过验证的 2026 年 Awwwards 级前端实现指南（474 个配方，已进行类型检查和浏览器审计）。涵盖动效与缓动令牌、GSAP ScrollTrigger + Lenis 编排（固定、滚动联动、横向、堆叠卡片、SplitText）、CSS 滚动驱动动画、现代 CSS（@starting-style、锚点定位、@property、容器查询）、文字效果与字体搭配、悬停/光标/微交互、视图与路由过渡、预加载器和菜单、CSS/SVG/canvas 背景、WebGL 着色器和 Three.js/R3F、21st.dev / Aceternity / Magic UI / React Bits 组件、OKLCH 颜色、布局与首屏构图、30 种美学方向、性能和无障碍。构建、设计、制作动画或重新设计任何网站、落地页、作品集或 UI 组件时使用；用户要求某种效果（“更有高级感”“滚动动画”“平滑滚动”“视差”“文字显现”“着色器背景”“页面过渡”“自定义光标”“bento”“跑马灯”）时也使用，即使没有指定库。

F

frontend-design

majiayu000 / spellbook

创建独特、达到生产级设计水准的 Web 前端界面。当用户明确要求构建或大幅重新设计 Web 组件、页面或应用时使用。仅当仓库检查确认视觉表面是浏览器渲染的 Web UI 时适用。不适用于原生或 GPU 渲染的图形、着色器、游戏、终端 UI 或其他非 Web 视觉系统。忽略偶然的提及和痕迹。

F

frontend-design

openhands / extensions

创建具有鲜明特色、达到生产级水准且设计质量出色的前端界面。用户要求构建 Web 组件、页面、制品、海报或应用时使用此技能，例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 添加样式或美化。生成富有创意且精致的代码和 UI 设计，避免千篇一律的 AI 风格。

F

frontend-js

ahmed-lakosha / odoo-plugins

面向网站主题的 Odoo 前端 JavaScript 模式。涵盖 publicWidget 框架（含 editableMode 处理的完整模式）、Owl v1/v2 组件模式、_t() 翻译最佳实践、Bootstrap 4 到 5 的迁移、版本检测以及关键开发规则。支持 Odoo 14-19。 <example> Context: User wants to create a publicWidget user: "Create a publicWidget for my Odoo website" assistant: "I will create a publicWidget with editableMode handling and proper cleanup." <commentary>publicWidget creation.</commentary> </example> <example> Context: User asks about Owl components user: "How do I create an Owl component in Odoo 18?" assistant: "I will show the Owl v2 pattern with static template and props." <commentary>Owl component pattern.</commentary> </example> <example> Context: User needs help with translations user: "How do I translate JavaScript strings in Odoo?" assistant: "Use _t() at DEFINITION TIME for static labels, not runtime wrappers." <commentary>Translation best practices.</commentary> </example> <example> Context: User migrating Bootstrap classes user: "Convert Bootstrap 4 classes to Bootstrap 5 for Odoo 17" assistant: "Replace ml-* with ms-*, mr-* with me-*, text-left with text-start." <commentary>Bootstrap migration.</commentary> </example>

L

lenis-smooth-scroll

rheinmir / setup

为整个页面设置 Lenis（基于物理的平滑滚动），并与 GSAP ScrollTrigger 正确同步（raf 循环共用 driver，不产生相位偏差，切回标签页时不抖动）。当用户说“lenis”“smooth scroll”“苹果式平滑滚动”“physics-based scroll”或 /lenis-smooth-scroll 时调用。不同于 `skills/gsap-scrolltrigger-pin`（那是对某个特定区块做 pin + 横向滚动——可与之共用，pin 不能替代平滑滚动基础）且不同于 `skills/scroll-effects`（原生实现，无依赖；本技能有 Lenis + GSAP 依赖，是整个页面的平滑滚动基础，而非零散的效果）。

N

nano-banana-pro

feedtailor / ccskill-nanobanana

图像生成技能。使用 Google Nano Banana Pro（Gemini 3 Pro Image）API 生成高质量图像。支持 Logo、信息图、插画、写实图像等。

P

pptx-processing-anthropic

lawve-ai / awesome-legal-skills

只要涉及 .pptx 文件的任何操作（输入、输出或两者皆有），都使用此技能。这包括：创建幻灯片、提案演示文稿或演示文稿；读取、解析或提取任何 .pptx 文件中的文本（即使提取的内容会用于邮件或摘要等其他用途）；编辑、修改或更新现有演示文稿；合并或拆分幻灯片文件；处理模板、版式、演讲者备注或评论。只要用户提到“deck”“slides”“presentation”或引用 .pptx 文件名，就触发此技能，无论之后打算如何处理内容。若需要打开、创建或操作 .pptx 文件，请使用此技能。

R

readable-content

owl-listener / inclusive-design-skills

面向不同阅读能力和认知风格撰写并组织内容。在撰写长文、帮助文档、产品描述、政策、条款，或任何需要被广泛受众理解的内容时使用。触发词：可读性、阅读难度、太长、太密、大段文字、难以阅读、简化内容、内容可访问性、可扫读、可略读。

S

sb-stories

strongeron / storybook-workbench

为一个 React 组件编写 CSF3 story，只覆盖其有实质性差异的状态（不做笛卡尔积），当 3 个以上 story 共享同一形态时使用工厂函数。适用于“为 X 写一个 story”“为这个组件写文档”“添加一个 Storybook story”。

S

scientific-visualization

jaechang-hits / sciagent-skills

为出版物和演讲选择并创建科学可视化的指南。涵盖按数据结构选择图表类型、面向可访问性/印刷的色彩理论、图形构图、期刊格式（Nature、Cell、ACS）以及常见陷阱。在可视化数据或准备投稿图形时查阅。

S

slop-eval

fabricioctelles / skills

依据 pols.dev 反 slop 设计法则客观评估 UI/网页设计：检出已收录的 slop 特征并附引用证据，对 8 个加权维度（色彩、字体、组件、布局、动效、执行、识别度、整体一致性）打分，输出包含 0–100 Slop Index 与评级的 Slop Report。适用于用户要求「evaluate design slop」「slop report」「is this design AI slop」「audit this landing page design」「de-slop review」，或希望客观获得某设计看起来有多通用/机器生成的分数的场景。若需修改文本（而非设计），请改用 human-ai 或 humanizar 技能。

S

syncfusion-winforms-ai-assistview

syncfusion / winforms-ui-components-skills

在桌面应用中构建对话式 AI 界面时，使用 Syncfusion Windows Forms AI AssistView（SfAIAssistView）的实现指南。在 Windows Forms 中创建聊天界面、AI 助手或聊天机器人时使用。支持 OpenAI 和 Azure OpenAI 集成、输入指示器、聊天建议、消息气泡，以及用于交互式消息体验的自定义视图。

S

syncfusion-winforms-banner-text-provider

syncfusion / winforms-ui-components-skills

实现 Syncfusion WinForms BannerTextProvider（水印文本提供程序）控件的指南。在处理编辑器控件中的水印文本、占位符文本或提示文本时使用。涵盖设置、文本模式（FocusMode/EditMode）、颜色/字体自定义，以及 Windows Forms 应用程序中支持的控件类型。

S

syncfusion-winforms-checkbox

syncfusion / winforms-ui-components-skills

实现和自定义 Syncfusion WinForms CheckBoxAdv 控件的指南。适用于在 Windows Forms 应用程序中处理具有三种状态、渐变背景、自定义边框、阴影文本或灵活对齐的高级复选框控件时。

S

syncfusion-winforms-color-picker

syncfusion / winforms-ui-components-skills

实现和自定义 Syncfusion WinForms ColorPickerUIAdv 控件的指南。在 Windows Forms 应用中实现带组织化调色板（Recent、Standard、Theme）、自定义颜色组、Office 风格布局、“More Colors”对话框或运行时颜色添加的颜色选择界面时使用。

S

syncfusion-winforms-color-picker-dropdown

syncfusion / winforms-ui-components-skills

实现和自定义用于颜色选择的 Syncfusion Windows Forms ColorPickerButton 控件。当用户需要颜色选择下拉框、颜色选择界面、颜色输入控件，或需要让用户从颜色组（standard、system、custom、user colors）中选择时触发。涵盖入门、颜色选择、自定义和 UI 外观属性。

S

syncfusion-winforms-tabcontrol

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用程序中实现 Syncfusion TabControlAdv 的指南。适用于创建选项卡界面、在选项卡中组织内容或构建专业的选项卡导航系统时。涵盖选项卡页、选项卡样式、关闭按钮、拖放选项卡、选项卡自定义以及基于 TabControlAdv 的应用程序的外观选项。

S

syncfusion-winforms-textbox

syncfusion / winforms-ui-components-skills

在 Windows Forms 中实现和配置 Syncfusion TextBoxExt 控件——一种具有自定义边框、主题和高级文本功能的增强文本框。当需要具有 Office 主题、自定义边框颜色、带溢出指示器的多行文本、字符大小写、文本对齐或 RTL 支持的样式化文本框时使用。涵盖主题集成、边框自定义、多行配置，以及用样式化替代控件替换标准 TextBox 控件。

T

tailwind-v4-best-practices

jenishshrestha / ai-skills

以设计系统思维编写生产级 Tailwind CSS v4 代码的专业指导。当用户提到 Tailwind CSS、CSS 样式、设计系统、主题配置、设计令牌、OKLCH 颜色、组件样式，或从 Tailwind v3 迁移到 v4 时使用本 skill。也应在 Tailwind 项目中编写或审查任何 CSS 时触发，即使未明确提及“Tailwind”。涵盖 @theme 配置、语义化工具类和现代 CSS 模式。

T

theming-components

ancoleman / ai-design-components

为所有组件提供一致、可定制的 UI 样式设计令牌系统与主题框架。涵盖完整的令牌分类（颜色、排版、间距、阴影、边框、动效、z-index）、主题切换（CSS 自定义属性、主题提供器）、RTL/i18n 支持（CSS 逻辑属性）与无障碍（WCAG 对比度、高对比度主题、减少动效）。这是所有组件类技能都会引用的基础样式层。适用于为组件设置主题、实现浅色/深色模式、创建品牌样式、定制视觉设计、确保设计一致性或支持 RTL 语言时。