Skills

F

fancy-yard-landscaper

curiositech / some_claude_skills

资深景观设计师，通过照片测绘、3D 可视化、季节规划和深厚的植物知识改造庭院。专长于快速生长的隐私屏障（熟悉北美侧柏

H

hugging-face-ui-skills

ihlamury / design-skills

Hugging Face 的 UI 设计系统。构建受 Hugging Face 风格启发的界面时使用，采用深色模式、Inter 字体和 4px 网格

H

hz-unity-meta-quest-ui

meta-quest / agentic-tools

为 Meta VR 和 Horizon OS VR 开发配置 Unity UI——包括世界空间画布、TextMesh Pro 设置、舒适的尺寸、观看距离和交互就绪状态。

M

mailchimp-ui-skills

ihlamury / design-skills

Mailchimp 的 UI 设计系统。用于构建受 Mailchimp 美学启发的界面：浅色模式、Inter 字体、4px 网格。

P

page-tree

adobe / skills

通过 web CLI 将网页的渲染布局捕获为元素空间树，其中包含位置、尺寸、网格布局、背景和覆盖遮挡信息。返回缩进文本、JSON 树，以及节点 ID 到 CSS 选择器的映射。在拆解页面、检测覆盖层或提取品牌信息之前，或用户询问页面的视觉层级或布局时使用。

P

planetscale-ui-skills

ihlamury / design-skills

Planetscale 的 UI 设计系统。用于构建受 Planetscale 美学启发的界面：深色模式、Inter 字体、4px 网格。

R

retool-ui-skills

ihlamury / design-skills

Retool 的 UI 设计系统。构建受 Retool 风格启发的界面时使用，采用浅色模式、Inter 字体和 4px 网格

S

sgds-forms

govtechsg / sgds-web-component

用户询问 SGDS 中的表单验证、hasFeedback 属性、约束验证、自定义验证、noValidate、setInvalid、表单提交，或从 SGDS 表单组件读取 FormData 时使用此技能。

S

sgds-getting-started

govtechsg / sgds-web-component

使用 SGDS Web 组件库构建新应用时的起点。用户开始搭建新的 SGDS 项目、设置新应用，或询问从何处开始使用 SGDS 时，首先应用此技能。按正确顺序涵盖字体设置、基础 CSS、实用工具、组件和应用布局。

S

substack-ui-skills

ihlamury / design-skills

Substack 的 UI 设计系统。构建受 Substack 风格启发的界面时使用，采用浅色模式、Inter 字体和 4px 网格

T

tech-logos

pedronauck / skills

复用或添加官方公司、服务提供商和社交平台徽标，包括占位图以及落地页/身份验证/集成界面。使用现有品牌资源库。不包括定制徽标、通用图标库和营销图片。

W

warp-ui-skills

ihlamury / design-skills

Warp 的 UI 设计系统。构建受 Warp 风格启发的界面时使用，采用浅色模式、Inter 字体和 4px 网格

W

widgets

n0an / widgets-agent-skill

编写和审查用于主屏幕、锁定屏幕、StandBy 和 Apple Watch 表盘小组件的 SwiftUI WidgetKit 代码，包括时间线提供程序和重新加载策略、StaticConfiguration / AppIntentConfiguration、用户可配置的小组件、小组件类型与尺寸、强调色/色调渲染模式、交互式小组件与控件（控制中心）、实时活动与灵动岛、智能叠放相关性、推送更新的小组件，以及 visionOS / CarPlay / macOS 界面。适用于构建小组件扩展、时间线提供程序、锁定屏幕或配件小组件、Apple Watch 复杂功能、交互式按钮/切换小组件、控制中心控件、实时活动，或修复无法更新或在色调模式下渲染异常的小组件。

A

angular-tailwind

oguzhan18 / angular-ecosystem-skills

使用 Angular 和 Tailwind CSS、配置 Tailwind、使用实用优先 CSS，或通过 Tailwind 为 Angular 应用设置样式时，始终使用。

A

auto-animate

secondsky / claude-skills

使用 AutoAnimate (@formkit/auto-animate) 为 React 提供零配置动画。适用于列表过渡、手风琴、Toast，或遇到 SSR 错误、动画库过于复杂的情况。

B

blog-post

nexu-io / open-design

长篇文章／博客文章——报头、主视觉图片占位符、包含插图和引述的正文、作者署名及相关文章。简要需求包含“博客”“文章”“帖子”“随笔”或“案例研究”时使用。

暂无简介

C

creative-direction

dylanfeltus / skills

用于生成视觉素材的图像提示词模板、模型选择指南和避免通用化的模式。用户需要为落地页、营销或产品生成 AI 图像时使用。涵盖主视觉图、功能插图、OG 卡片、图标和背景

D

designkit

mimukit / skills

从项目现有 UI 中提炼设计系统，并随着代码演进持续保持一致；在仓库根目录生成符合规范的 DESIGN.md，并通过官方 linter 验证。用户说“编写 DESIGN.md”“记录我们的设计系统”“提取设计令牌”“我们的设计系统已过时”“审查设计令牌”“这个项目实际用了哪些颜色”“将 DESIGN.md 与 Tailwind 主题同步”或“/designkit”时使用。

G

ghost-ui-skills

ihlamury / design-skills

Ghost 的 UI 设计系统。构建受 Ghost 美学启发的界面时使用：深色模式、Inter 字体、4px 网格。

P

pricing-page

nexu-io / open-design

独立定价页面——包含页眉、套餐层级、功能对比表和常见问题。需求要求“定价”“套餐”“订阅层级”或“套餐对比”页面时使用

S

sgds-theming

govtechsg / sgds-web-component

自定义 SGDS 应用的视觉主题，包括产品品牌颜色、日间/夜间模式、字体、边框半径和间距密度。用户询问更改主色、设置应用主题、启用深色模式或夜间模式、覆盖 CSS 令牌、自定义字体、紧凑/宽松密度或边框半径时使用。只要提及主题设置、品牌、密度或 CSS 令牌覆盖，就应用此技能

S

sgds-workflow

govtechsg / sgds-web-component

使用 @govtechsg/sgds-web-component 构建 UI，或用户提到 SGDS 或 Singapore Design System 时，始终使用此技能，即使用户没有明确寻求帮助。这是所有 SGDS 开发的必经入口，可引导你选择适用于配置、组件、实用工具、表单、主题、页面布局、区块模板和数据可视化的技能。编写任何 SGDS 应用代码前，请先阅读。

T

tailwind-design-system-v4

blockmatic / basilic-skills

使用 Tailwind CSS v4、设计令牌、组件库和响应式模式构建可扩展的设计系统。创建组件库、实施设计系统或规范化 UI 模式时使用

T

tailwind-design-system-v4

blockmatic-icebox / basilic-skills

Basilic Workflow Agent 技能

U

ui-design-patterns

dirnbauer / webconsulting-skills

提供实用的 UI 设计模式，涵盖层级、间距、字体、色彩、纵深、图像、UI 文案、表单、导航、表格、空状态、加载状态、无障碍设计和响应式行为。适用于设计、审查、润色或重构 Web 界面、布局、组件、仪表板、表单或视觉系统。

U

use-of-color

accesslint / skills

暂无简介

W

wear-widgets

android / skills

使用 Glance Wear 创建、迁移、更新和验证 Wear OS 小组件

W

wise-ui-skills

ihlamury / design-skills

Wise 的 UI 设计系统。构建受 Wise 美学启发的界面时使用：浅色模式、Inter 字体、4px 网格。

C

calculator-design

rampstackco / claude-skills

设计能提供真正决策支持价值，同时作为潜在客户引流工具和高质量流量来源的交互式计算器（ROI 计算器、定价估算器、储蓄预测、抵押贷款计算器、自定义评估工具）。坦诚区分虚荣型计算器（没有实际价值）、线索陷阱（用电子邮件隐藏答案）和透明决策工具（直接给出结果，并通过分层价值获取电子邮件）等模式。在计算器、ROI 计算器、定价估算器、储蓄计算器、自定义计算器、交互式工具、决策工具、金融计算器等请求中触发。还适用于受众需要由计算驱动的引流工具、虚荣型计算器带来线索但没有合格线索，或首次规划计算器的情况。

C

citycraft

oil-oil / citycraft

使用城市风格库与可选交互预览，为产品、活动、营销或品牌创建具有鲜明风格的完整落地页，输出 HTML、CSS、JS 和 SVG。用户要求有视觉表现力的单页网站或明确使用 citycraft 时使用。不用于普通后台、组件修复、静态海报或不允许改变品牌设计的局部维护；已有产品信息和用户选定风格时直接复用。

C

convex-ui-skills

ihlamury / design-skills

Convex 的 UI 设计系统。构建受 Convex 美学启发的界面时使用：深色模式、Inter 字体、4px 网格。

C

customer-journey-mapper

onewave-ai / claude-skills

绘制从首次接触到主动推荐的完整客户旅程。生成全面的 customer-journey.md，包含所有阶段、触点、情绪、痛点、机会、Mermaid 图表和指标。适用于梳理客户体验、设计引导流程、识别流失风险或优化转化漏斗。

D

drawio-diagram

xstongxue / best-skills

为深度学习模型、网络架构、算法流程等生成标准 Draw.io（.drawio）格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。

L

liquid-theme-standards

shopify / liquid-skills

Shopify Liquid 主题的 CSS、JavaScript 和 HTML 编码规范。涵盖样式表标签内的 BEM 命名、设计令牌、CSS 自定义属性、主题的 Web Components、防御式 CSS 和渐进增强。用于在 .liquid 文件或主题资源文件中编写 CSS/JS/HTML。

P

providing-feedback

ancoleman / ai-design-components

实现反馈和通知系统，包括 toast、提醒、模态框、进度指示器和错误状态。用于传达系统状态、显示消息、确认操作或展示错误。

S

sgds-utilities

govtechsg / sgds-web-component

完整参考指南，涵盖所有带 sgds: 前缀的 SGDS 工具类。用户询问设置、background-color、text-color、border-color、border-width、border-radius、排版、间距、网格、尺寸、不透明度、颜色语义或任何 sgds: Tailwind 工具类时使用。还涵盖 Tailwind v4 导入、主题切换和工具类的框架集成

S

surface-separation

dembrandt / dembrandt-skills

用一种方式 —— 边框、高度或填充 —— 将某个表面区分开来，并保留不透明度用于表达状态。适用于设计卡片、面板、列表行、工具栏或任何容器。

U

uikit

mimukit / skills

构建符合项目特定设计、而非默认 LLM 风格的生产级 UI；审查已发布 UI 中暴露其问题的特征，或在开发前将界面制作成图像模型图。当用户说“构建这个页面”“让这个 UI 看起来不像 AI 生成的”“审查我们的 UI”“把前端做得好看些”“制作这个界面的模型图”“展示这个界面的几个方案”或“/uikit”时使用。若项目中存在 DESIGN.md，则会读取。

X

xiaohu-wechat-cover

xiaohuailabs / xiaohu-wechat-format

公众号封面图生成器。一步出图，输入文章路径或主题即可。当用户要求“公众号封面”“微信封面”“文章封面”时使用。

A

accessibility

tech-leads-club / agent-skills

按照 WCAG 2.1 指南审查并改进网站无障碍性。用户要求“改进无障碍性”“进行 a11y 审查”“符合 WCAG”“支持屏幕阅读器”“键盘导航”或“实现无障碍”时使用。不要用于 SEO（使用 seo）、性能优化（使用 core-web-vitals），或涵盖多个方面的全面网站审查（使用 web-quality-audit）。

A

atomic-design

jwilger / agent-skills

Brad Frost 的 Atomic Design 方法论，用于 UI 组件层级：原子（不可再分的元素）、分子（由少量原子组成）、有机体（复杂的分子区块）和模板（页面布局）。强制自底向上组合（不得跳过层级）、使用展示型组件（通过 props 传递数据，通过回调处理事件，不获取数据）、所有视觉属性均使用设计令牌，并优先组合而非继承。适用于构建用户界面、创建组件库、组织前端代码、设计表单系统或构建任何 UI。触发词：“构建组件”“组件层级”“设计令牌”“展示型组件”“组合优于继承”“React/Vue/SwiftUI 组件”“原子设计”。适用于任何 UI 框架。

A

audit-design-system

edenspiekermann / skills

审查 Figma 屏幕或组件与设计系统集成的偏差，包括缺失的共享组件、本地覆盖和未绑定的设计令牌。

B

bear-ui-skills

ihlamury / design-skills

Bear 的 UI 设计系统。构建受 Bear 美学启发的界面时使用：浅色模式、Inter 字体、4px 网格。

C

clerk-ui-skills

ihlamury / design-skills

Clerk 的 UI 设计系统。构建受 Clerk 美学启发的界面时使用：浅色模式、Inter 字体、4px 网格。

D

dagre-react-flow

existential-birds / beagle

使用 dagre 和 React Flow（@xyflow/react）自动布局图形。实现自动布局、分层布局、树结构或以编程方式排列节点时使用。触发词：dagre、auto-layout、automatic layout、getLayoutedElements、rankdir、hierarchical graph。

D

drawio-architecture

partme-ai / full-stack-skills

提供 draw.io 架构图的全面指导，涵盖图表创建、形状、模板和协作。用户询问 draw.io 架构、需要创建架构图、设计系统图或协作绘图时使用。

F

frappe-desk-customization

lubusin / frappe-skills

使用表单脚本、列表视图脚本、报表脚本、对话框和客户端 JavaScript API 定制 Frappe Desk UI。适用于构建交互式 Desk 体验、添加自定义按钮或编写表单行为脚本。

用于生成新设计语言技能的元技能。可在 Claude Code 和 Codex 上运行。用户说“create a design skill”“generate design language”“new design system skill”“design skill inspired by X”“design skill from this screenshot”“/hue”或“use hue”时使用。“remix my design skill”或“make my skill more X”也会触发。

P

page-reduce

adobe / skills

将网页简化为结构骨架。web CLI 检测各个区块，并用语义标记（文本、标题、图片、CTA、链接、输入项）替换内容；随后 Agent 合并重复模式和装饰性包装元素，并写入 skeleton.html 和 manifest.json。迁移页面到 AEM Edge Delivery Services、提取页面蓝图，或分析页面结构以生成区块时使用。

Q

qiaomu-bento-ppt

joeseesun / qiaomu-bento-ppt

使用独立的 qiaomu-bento-ppt Skill，根据简报、笔记、报告、URL、数据或现有 bento 演示文稿，创建或编辑自包含的 qiaomu 风格 bento 演示文稿（.bento.html 文件）。用户明确要求制作 bento/幻灯片、.bento.html 演示文稿、可离线编辑的单文件 HTML 演示文稿，或调用 qiaomu-bento-ppt 时使用此 Skill。它采用先提案的演示文稿工作流，在 Skill 内附带固定版本的官方 bento 外壳和创作参考，通过纯文本 #bento-doc 契约构建，无需原始 bento 仓库，并验证结构、身份、外壳完整性、视觉启发式和回滚边界。不要用于常规 .pptx 交付、通用 bento 源码开发或 bento/spaces 与 bento/dash 工作。

R

ramp-ui-skills

ihlamury / design-skills

Ramp 的 UI 设计系统。构建受 Ramp 美学启发的界面时使用：浅色模式、Inter 字体、4px 网格。

S

slides-critique

mpuig / agent-slides

从叙事质量、视觉层级和内容效果方面审阅现有演示文稿。识别行动标题薄弱、MECE 原则违反、同构性不匹配和信息密度问题。用户要求审阅或批评演示文稿、评估叙事流程、改进幻灯片标题，或针对内容质量而非技术格式提供反馈时使用。

T

tui-design

gfargo / tui-design-skill

设计、构建、重构或审查终端界面——全屏 TUI、交互式提示和命令行工具。适用于终端应用布局与 UX、CLI 行为、ncurses 风格工具、仪表板、REPL、fzf 式选择器，以及 Bubble Tea、Ratatui、Textual、Ink 等库；也适用于用户提及 lazygit、k9s、btop、helix 或 yazi 等知名 TUI，而未直接说“TUI”的情况。不要用于浏览器或 Web UI、原生 GUI、编辑器或字体配置，或没有终端界面的后端和 shell 工作

T

tweaks

nexu-io / open-design

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

W

wix-cli-dashboard-plugin

wix / skills

构建用于扩展 Wix 仪表板页面的自有业务应用小组件时使用。触发词包括 dashboard plugin、dashboard slot、extend dashboard page、Wix Stores plugin、Wix Bookings plugin、Wix Blog plugin、observeState、dashboard widget。不要用于独立仪表板页面（请使用 wix-cli-dashboard-page）或面向网站访客的 UI（请使用 site widgets/site plugins）。

A

amplitude-ui-skills

ihlamury / design-skills

Amplitude 的 UI 设计系统。构建采用 Amplitude 风格的界面时使用：浅色模式、Inter 字体、4px 网格。

A

antiwebslop

cesaroeduardo / antiwebslop

避免 Web UI 看起来像 AI 生成。构建、重新设计或审查网站、落地页、主视觉区、营销或帮助/文档页面，或前端组件（HTML、CSS、Tailwind、React、Vue、Svelte、Astro）时使用；用户说设计看起来泛泛、像模板、“AI slop”“像所有其他 SaaS”、平淡，或要求设计得更有人味时也使用。涵盖反模式目录及 lint 脚本、字体、间距、颜色和文案的工艺规则、每个项目的 DESIGN.md、设计调节项、视口 QA，以及内部完成前检查门槛（绝不将其作为用户检查清单展示）。仍处于早期/未完成阶段：每次运行开头都用用户的语言显示全大写 WIP 警告（网站和 Twitter 已宣布稳定版本）。

C

comparison-tool-design

rampstackco / claude-skills

设计并排比较工具（plan-compare、product-compare、alternative-compare），帮助用户做出决策，而不只是罗列功能。涵盖比较维度选择、默认比较逻辑和推荐规范。坦诚分析 feature-list-dump（逐行罗列所有功能，不提供决策支持）、hidden-recommendation（假装中立的偏向性比较）和 honest-comparison-with-guidance（真实比较并给出明确倾向的建议）模式。遇到 comparison tool、plan compare、product compare、alternative compare、vs page、decision support tool 等情况时触发。当比较流程的转化率低、用户在比较环节流失，或首次规划比较工具时也会触发。

C

craft-ui-skills

ihlamury / design-skills

Craft 的 UI 设计系统。构建采用 Craft 风格的界面时使用：浅色模式、Inter 字体、4px 网格。