Skills

F

frontend-design

vercel-labs / agent-eval

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

H

handoff-spec

owl-listener / designer-skills

编写实现交接文档，涵盖尺寸、行为、资源、状态和边界情况。用于工程团队接手工作时。之后验证结果时使用 `design-qa-checklist`；编写可复用的库组件规范时使用 `component-spec`（design-systems）。

A

antfu-design

antfu / skills

antfu 风格的设计规范，扩展版。以 UnoCSS 优先，采用基于 class 的语义化 token，为工具类和开发者工具界面提供明暗双主题；还包含面向落地页和产品界面的 design-read、anti-slop 以及微交互打磨。构建或重构任何使用 UnoCSS 的界面时使用。

G

gsap-utils

nexu-io / open-design

gsap.utils 的官方 GSAP 技能——clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe。用户询问 gsap.utils、clamp、mapRange、random、snap、toArray、wrap 或 GSAP 中的辅助工具时使用。

E

empathy-map

owl-listener / designer-skills

为单个用户或细分群体构建「说、想、做、感受」地图。用于快速分享对用户的理解。需要构建包含目标和行为的综合原型时，使用 `user-persona`；整理跨会话主题时，使用 `affinity-diagram`。

M

markdown-mermaid-writing

k-dense-ai / scientific-agent-skills

编写科学类 Markdown 文档，并使用 Mermaid 绘制工作流、关系、时间线和架构图。提供语法参考、文档模板、无障碍指南，以及考虑版本差异的渲染检查。用户请求 Markdown、Mermaid 或基于文本的结构图时使用；定量科学图表需要使用合适的绘图工具

N

naming-convention

owl-listener / designer-skills

为组件、令牌和图层制定命名规则，并提供模式和示例。用于命名不一致或需要建立命名规范时。要了解令牌实际包含的内容，请使用 `design-token`。

D

documentation-template

owl-listener / designer-skills

为组件、模式或指南生成可复用的文档框架。用于统一系统文档的编写方式。要编写单个组件规范的内容，请使用 `component-spec`。

S

senior-frontend

davila7 / claude-code-templates

使用 ReactJS、NextJS、TypeScript 和 Tailwind CSS 构建现代高性能 Web 应用的综合前端开发技能。涵盖组件脚手架、性能优化、包体积分析和 UI 最佳实践。适用于开发前端功能、优化性能、实现 UI／UX 设计、管理状态或审查前端代码时。

A

affinity-diagram

owl-listener / designer-skills

将大量定性数据点归纳为主题和洞察陈述。用于综合多个访谈场次或来源的内容。处理单份访谈记录时使用 `summarize-interview`；分析某一片段中的内在状态时使用 `empathy-map`。

M

mapbox-data-visualization-patterns

mapbox / mapbox-agent-skills

地图数据可视化模式，包括分级统计地图、热力图、3D 可视化、数据驱动样式和动画数据。涵盖图层类型、色阶和性能优化。

P

pattern-library

owl-listener / designer-skills

整理模式条目，包括问题背景、解决方案、使用示例和相关模式。用于记录反复出现的解决方案，而非组件。针对单个组件的 API，请使用 `component-spec`。

C

card-sort-analysis

owl-listener / designer-skills

将开放式或封闭式卡片分类的结果整理为建议的分组和标签集。在完成分类研究后使用。要将这些证据转化为完整结构，请使用 `information-architecture`（ux-strategy）。

D

design-rationale

owl-listener / designer-skills

撰写决策理由，将决策与用户需求、业务目标和原则联系起来。需要以书面形式论证决策时使用。实时沟通时使用 `design-negotiation`。

M

mapbox-cartography

mapbox / mapbox-agent-skills

提供地图设计原则、色彩理论、视觉层级、字体排印以及制图最佳实践方面的专业指导，帮助使用 Mapbox 创建有效且美观的地图。在设计地图样式、选择颜色或制定制图方案时使用。

A

architecture-diagram

cocoon-ai / architecture-diagram-generator

创建精致的深色主题架构图，并保存为独立的 HTML+SVG 文件。用户要求绘制系统、基础设施、云、安全或网络拓扑图时使用

B

brand-identity

arnabbagxd / brand-building-skills

为品牌创建视觉识别简报，涵盖标志方向、配色方案、字体、图像风格和设计系统基础。当用户提到“视觉识别”“品牌识别”“标志简报”“标志方向”“设计简报”“品牌设计”“品牌配色”“品牌字体”“视觉语言”“设计系统”“品牌外观与风格”“品牌应该是什么样子”，或正在向设计师或设计机构提供需求时使用。当用户已有品牌策略并希望将其转化为视觉设计方向时也使用。

A

accessibility-test-plan

owl-listener / designer-skills

规划无障碍测试——辅助技术、参与者标准、WCAG 覆盖范围和测试流程。用于安排与真实辅助技术用户进行的测试。不要用于自行评估设计；请使用 `accessibility-audit`（design-systems）。

I

interview-script

owl-listener / designer-skills

编写结构化的访谈指南，包含热身、核心探讨和收尾环节。访谈前使用。分析访谈结果时使用 `summarize-interview`。

A

a-b-test-design

owl-listener / designer-skills

设计 A/B 实验，包括假设、变体、主要指标和样本量。当变更可以大规模定量衡量时使用。定性观察行为时使用 `test-scenario`。

A

app-icon

code-with-beto / skills

为你的 React Native Expo 应用生成支持 iOS 26 的应用图标

M

metrics-definition

owl-listener / designer-skills

定义将设计决策与可衡量结果联系起来的 UX 指标和 KPI。用于选择衡量内容。之后展示结果时，请使用 `design-impact-reporting`（design-ops）。

2

21st-cli-use

21st-dev / skill

使用 `21st` CLI（`@21st-dev/cli`）搜索、安装并从 21st.dev 目录拉取代码：查找 React/shadcn 组件、主题和模板，输出组件代码或主题 CSS，将项目条目安装到项目中，或使用 21st AI 生成新组件。当用户说“search/find a component/theme on 21st”“install our team's Button”“add @user/slug”“pull that component's code”“найди компонент на 21st”“поставь наш компонент”，或希望通过 shell/CI 编写脚本访问目录时使用。项目中存在 `components.json` 时自动激活——手写 UI 前先搜索 21st。

D

diary-study-plan

owl-listener / designer-skills

设计日记研究，包括提示词、频率、时长、参与者标准和分析框架。适用于行为在数天或数周内逐步发生的情况。单次研究请使用 `usability-test-plan`。

S

stakeholder-alignment

owl-listener / designer-skills

构建对齐材料——职责矩阵、决策权和沟通计划。在责任归属不清导致决策停滞时使用。若要即时说服，请使用 `design-negotiation`（designer-toolkit）。

T

tailwindcss-mobile-first

josiahsiegel / claude-plugin-marketplace

使用 Tailwind CSS v4（2025-2026）的移动优先响应式设计模式。主动用于：(1) 使用 Tailwind 断点（sm:、md:、lg:、xl:、2xl:）进行移动优先设计；(2) 响应式工具类排序（默认适用于移动端，然后是断点）；(3) 响应式排版（text-base sm:text-lg lg:text-xl）；(4) 响应式网格和 flexbox；(5) 在断点间隐藏/显示（hidden md:block）；(6) 使用 max-* 断点覆盖桌面端以下的样式；(7) 使用 @container 容器查询实现组件级响应；(8) 安全区域内边距和刘海屏处理；(9) 横屏与竖屏方向；(10) 触摸与悬停（使用 @media 的 hover:）。提供：断点参考、移动优先模式、容器查询示例、安全区域方案，以及触摸/悬停处理。

I

image-create

starchild-ai-agent / official-skills

纯文本生成图像，适用所有创作场景（无参考照片）。涵盖 logo 设计、海报设计、插画、梗图、游戏素材、社交媒体内容、3D 渲染、教育、时尚、美食、宠物、婚礼、节日营销以及艺术风格。适用于根据文字描述生成图像而无需参考照片时（例如设计 logo、制作海报、生成游戏美术、创作梗图、3D 渲染）。

T

test-scenario

owl-listener / designer-skills

编写真实的可用性测试任务场景，并附上成功标准和主持备注。已有研究计划、需要设计任务时使用。整体研究设计请使用 `usability-test-plan`（design-research）。

N

north-star-vision

owl-listener / designer-skills

阐述长期产品愿景，使团队保持一致并为战略奠定基础。在方向存在争议或尚未确立时使用。若要确定近期项目范围，请使用 `design-brief`。

D

design-review-process

owl-listener / designer-skills

建立评审关卡——包括标准、检查点和审批流程。当工作在缺乏一致评审的情况下发布时使用。若要开展单次评审，请使用 `design-critique`。

2

21st-ai

21st-dev / skill

通过 `21st` CLI（`@21st-dev/cli`）在终端中使用 21st AI 生成并迭代 UI：根据提示词勾勒 UI，在浏览器中预览不同版本，用自然语言就地编辑任一版本，并将最终代码拉入项目。用户希望构建／勾勒新 UI（“勾勒一个定价页面”、“用 21st 生成一个 hero”、“给我做一个 <X> 区块”）、迭代生成的草稿（“编辑第三个版本”、“给那个版本加个切换开关”）或获取草稿代码（“拉取那个版本的代码”、“сгенери UI на 21st”、“поправь третий вариант”、“забери код того наброска”）时使用。查找／安装现有组件请使用 `21st-cli-use` 技能；发布自己的组件请使用 `21st-registry`。

暂无简介

O

opportunity-framework

owl-listener / designer-skills

根据影响和投入识别、评估并排列设计机会的优先级。当想法多于可用资源时使用。要梳理选定的机会，请使用 `design-brief`。

E

experience-lwc-design-generate

forcedotcom / sf-skills

当需要根据 Figma 设计、产品需求文档或其他设计材料创建全新的 Lightning Web Component 时使用——编排五阶段工作流（收集需求 → 生成代码 → 优化 → lint/格式化/编译 → 测试），并整合 SLDS、LDS、基础组件、优化和测试专用技能。用户提到根据 Figma 构建新的 LWC、根据 PRD 构建 LWC、根据设计或截图生成 LWC，或将 Aura 组件作为全新的 LWC 构建进行迁移时，使用此技能。现有 LWC 的重构（使用 experience-lwc-generate）、Aura → LWC 原位迁移（不在此技能范围内）、独立的 SLDS 令牌或样式工作（使用 design-systems-slds-apply），以及独立的数据层工作（使用 experience-lds-best-practices-apply 或 experience-lds-data-requirements-generate）时，不要触发。

F

figma-generate-diagram

figma / mcp-server-guide

强制前置步骤——每次调用 `generate_diagram` 工具前都必须加载此技能。未先加载此技能，绝不可直接调用 `generate_diagram`。当用户要求创建、生成、绘制、渲染、草拟或构建图表时触发，包括流程图、架构图、时序图、ERD（实体关系图）、状态图或状态机、甘特图和时间线。用户提及 Mermaid 语法，或希望在 FigJam 中可视化系统架构、决策树、依赖关系图、API 调用流程、身份验证握手、模式或管道时也会触发。提供针对不同图表类型的指南，设定通用 Mermaid 约束，并说明何时应改用其他图表类型或完全跳过该工具（如思维导图、饼图、类图等）。

A

animation-on-scroll

mengto / skills

使用 IntersectionObserver 创建滚动时动画触发器，并配合兼容 Tailwind 的动画类和关键帧。适用于用户要求滚动显现、滚动触发动画，或在元素进入视口时按顺序播放动画的情况

S

summarize-interview

owl-listener / designer-skills

将一份访谈记录整理为主题、佐证引文和行动项。访谈结束后立即使用。要一次综合多场访谈，请使用 `affinity-diagram`。

T

team-workflow

owl-listener / designer-skills

设计团队的工作节奏——任务管理、协作惯例和工具。当日常工作节奏需要建立结构时使用。对于限时冲刺，请使用 `design-sprint-plan`。

D

design-system-adoption

owl-listener / designer-skills

制定推广策略和赋能材料，推动设计系统的使用。当系统已存在但团队不予采用时使用。有关贡献和版本管理规则，请使用 `design-system-governance`（design-systems）。

C

critique-visual-hierarchy

owl-listener / designer-skills

评估渲染界面的层级——入口、视线流向、权重分布和重点。当注意力落在错误位置时使用。要为新作品建立层级，请使用 `visual-hierarchy`（ui-design）。

D

design-sprint-plan

owl-listener / designer-skills

规划并引导设计冲刺，涵盖挑战定义到原型测试的全过程。适用于将探索阶段压缩到数天内完成的情况。持续的团队节奏请使用 `team-workflow`。

L

landing-page-design

elayadesign / ai-design-skills

用于构建高转化率落地页的完整系统：需求问题、页面结构、布局选择、转化文案、SEO，以及关于字体排印、间距、圆角、背景、主视觉布局、图标和动效的严格视觉规则。无论用户是否提到设计、转化、设计令牌或设计系统，只要构建、编辑、设置样式、审查或撰写任何落地页、营销网站、Web UI、页面区块、组件或原型的文案，都使用此技能。在选择页面区块、标题、CTA、字体、字号、间距值、边框圆角、背景颜色、图标或过渡效果之前，务必先查阅

L

landing-page

mengto / skills

设计或改写高转化率着陆页（单一优惠页面）时使用，适用于 SaaS/应用/服务。涵盖结构、布局模式、转化策略、文案写作、SEO/AEO 和常见问题。

C

click-test-plan

owl-listener / designer-skills

设计用于评估可查找性和导航的首次点击测试与点击测试。测试用户能否找到某项内容时使用。完整的基于任务的观察请使用 `test-scenario`。

P

pptx-posters

k-dense-ai / scientific-agent-skills

使用作者批准的本地内容和素材，在无宏的 PowerPoint（.pptx）中创建并审查可编辑的科学海报。当交付物为 PowerPoint 研究或会议海报，且需要精确检查实体尺寸、打印机、无障碍、来源和包安全性时使用。

L

latex-posters

k-dense-ai / scientific-agent-skills

使用 beamerposter、tikzposter 或 baposter 在 LaTeX 中制作研究海报。适用于会议海报、学术展示、多栏科学版式、图表整合、字体排版、编译和 PDF 印前检查。

V

version-control-strategy

owl-listener / designer-skills

为设计文件、组件和库制定版本控制规范，包括分支、命名和发布。文件历史混乱时使用。设计系统贡献规则请使用 `design-system-governance`（design-systems）。

R

revenue-centric-design

heliocosta-dev / revenue-centric-design

设计能够提升转化、留存和变现的 SaaS 与初创产品手册——涵盖落地页与 CRO、结账与表单、引导流程／激活、降低流失、定价心理学、仪表板、行为科学策略、功能取舍、定位／ICP、上市策略，以及 AI 时代的差异化。当就初创企业或 SaaS 的产品设计、UX、转化、落地页、结账、引导流程、试用、定价、留存／流失、增长或定位提供建议时使用。内容提炼自产品设计师 Richard（@richardrx）。不得用于赌博、博彩或赌场产品。

T

technical-drawing

jakubkrehel / skills

为实体对象绘制精确的静态技术图，视图协调，线条精细

T

threejs

mengto / skills

使用 Three.js 在 Web 上构建或调试交互式 3D 场景时使用，涵盖场景／相机／渲染器、灯光／材质、GLTF 加载、控制和性能。适合需要交付 3D UI 体验的设计师。

F

figma-use-figjam

figma / mcp-server-guide

此技能帮助 Agent 在 FigJam 环境中使用 Figma 的 use_figma MCP 工具。可与 figma-use 配合使用，后者提供使用 use_figma 工具的基础背景。

G

generate-image

k-dense-ai / scientific-agent-skills

通过 OpenRouter Image API（Gemini、Seedream、Recraft、GPT-Image、Riverflow）使用 AI 模型生成或编辑图像。适用于照片、插画、艺术作品、概念艺术、视觉素材、徽标，以及基于参考图像的编辑或合成。流程图、电路、路径及其他技术图表请改用 scientific-schematics 技能。

S

stitch

bergside / awesome-design-skills

面向数据驱动工作流的简洁、高对比度企业设计，采用直观的拖放模式和结构化布局。

G

geometric

bergside / awesome-design-skills

几何感、结构化的设计，采用清晰的排版、中性色、精确的形状和直观、不喧宾夺主的布局。

M

migrate-nativewind-to-uniwind

uni-stack / uniwind

将 React Native 项目从 NativeWind 迁移到 Uniwind。当用户想用 Uniwind 替换 NativeWind、从 NativeWind 升级、切换到 Uniwind，或提到从 NativeWind 迁移到 Uniwind 时使用。处理软件包移除、配置迁移、Tailwind 4 升级、移除 cssInterop、主题转换及所有不兼容变更。

H

hairline-adopt

lucasmarkes / hairline

当用户希望将 SVG（图标、徽标或插画）转换为 Hairline 图形，或使用文件运行 /hairline-adopt 时使用。读取图稿，在 @lucasmarkes/hairline 引擎上将其中对象重建为等距线稿图形，并赋予其响应指针的动作。

I

infographics

k-dense-ai / scientific-agent-skills

通过 OpenRouter 使用 Nano Banana 2 创建和审阅信息图。适用于利用提供的数据或可选的 Sonar 研究，制作统计摘要、时间线、比较、流程和可视化说明。支持十种布局、八种风格预设、参考图像和无障碍配色起点。

P

power

bergside / awesome-design-skills

高端深色美学，搭配醒目的标题、单色调配色和高级质感，适用于高端品牌体验

A

ai-ui-patterns

patternsdev / skills

讲解构建 AI 驱动的 React 界面的设计模式。适用于在 React 中创建聊天机器人、智能助手、流式 UI 或任何由 AI 驱动的用户体验。

C

critique-typography

owl-listener / designer-skills

评审渲染界面的排版，包括字号层级的使用、可读性、一致性和设计令牌合规性。用于检查界面文字排版。若要定义字号层级本身，请使用 `typography-scale`（ui-design）。