Skills

C

css-animation-skill

podo / design-agent-skills

为功能演示、产品演示和新手引导生成独立的 HTML/CSS 应用功能动画。四阶段工作流：在 Chrome 中研究线上应用的设计语言，询问要制作动画的内容，生成简报和 HTML/CSS 动画文件，然后持续迭代直至获批。需要 Claude-in-Chrome MCP。

D

design-engineering-catalogue

podo / design-agent-skills

涵盖 UI 工艺、视觉设计、品牌、色彩、字体、移动端设计和交互设计工程技能的领域导航。可引导至审美驱动的 UI、平台设计（iOS/Android）、组件、色彩科学及完整视觉设计技术栈相关技能。

I

impeccable

bastani-inc / atomic

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

I

ios-ui-craft

prisma-labs-dev / apple-skills

具备 Apple Design Award 级美感的生产级 SwiftUI。构建视觉效果出众的 iOS 界面（屏幕、组件、重新设计）时使用。支持基于截图的视觉迭代、Liquid Glass（iOS 26+）和鲜明的设计方向。不涉及代码的设计建议请改用 ios-design-consultant。

L

lynx-check-css-support

lynx-community / skills

查询 @lynx-js/css-defines compat_data，按渲染后端和 Lynx 版本检查 Lynx CSS 属性及嵌套特性／值的支持情况，或检查是否有更新的数据集版本。询问 Lynx 或 ReactLynx 是否支持某项 CSS、哪些后端支持、何时加入支持、样式更改是否兼容、捆绑数据是否为最新，或检查原始定义 JSON 时使用。

R

rails-components

thinkoodle / rails-skills

在 Rails 中使用局部模板、CSS 类和助手构建可复用 UI 组件的专家指导。适用于创建组件、局部模板、可复用 UI 模式、空状态、模态框、卡片、按钮、徽章、警告、数据表格或任何组件模式。涵盖仅 CSS 与局部模板与助手与 ViewComponent 的决策框架、local_assigns 的正确使用、块 yield、用于插槽的 capture、变体模式以及组件库。

S

sn-infographic

opensensenova / sensenova-skills

生成采用多种布局和视觉风格的专业信息图。分析内容、推荐布局和风格，并生成可直接发布的信息图。用户要求创建“infographic”“信息图”“visual summary”或“可视化”时使用。

V

vercel-skills

podo / design-agent-skills

Vercel 官方 Agent 技能，用于 UI 审查和 React 开发：Web Interface Guidelines 合规审查、文案指南审查、React/Next.js 性能、组件组合模式以及 React View Transitions。收录于 vercel-labs/agent-skills 集合。

W

web-cloud-designer

curiositech / some_claude_skills

使用 SVG 滤镜（feTurbulence、feDisplacementMap）、CSS 动画和分层技术，为网页创建逼真的云层效果。适用于氛围背景、天气效果、天空盒，

W

windows-3-1-web-designer

curiositech / some_claude_skills

采用原汁原味 Windows 3.1 美学的现代 Web 应用。纯藏青色标题栏、Program Manager 导航、浮雕边框、单窗口控件。将 Win31 风格延伸至 AI 聊天机器人（Cue

W

work-with-design-systems

podo / design-agent-skills

双模式 Figma 设计系统技能——Inspect 模式（只读 WCAG 审核、组件评分、分离实例检测、交接文档）和 Build 模式（分阶段创建，支持变量绑定、插槽和描述），可选同步至 tokens.css 和 AI 规则。需要 figma-use 技能和 Figma MCP 服务。

A

accessibility-as-code

zakariaf / flutter-skills

将无障碍性作为每个组件的正确性属性来落实：每个节点都使用 Semantics(button/label) 或 ExcludeSemantics；无障碍状态从 MediaQuery 而非应用状态读取；绝不使用 MediaQuery.withClampedTextScaling、textScaleFactor、FittedBox 或 TextOverflow.ellipsis 来适配标签；每种状态都使用非颜色的冗余识别方式（图标+标签+形状+文本）；对合成背景进行对比度检查（正文 4.5:1／大号文本 3:1）；单击目标至少为 44px；使用 OrdinalSortKey 控制遍历顺序；并遵循 boldText／reduce-motion 设置。添加 GestureDetector/InkWell 或任何点击目标、添加 Icon 或 Image、试图用 withClampedTextScaling/FittedBox/ellipsis/textScaleFactor 适配文本、通过颜色表示状态、调整字号、设置焦点遍历顺序，或审查 View 的屏幕阅读器／开关控制／低视力支持时使用。

A

axiom-privacy-ux

charleswiltgen / axiom

在实现隐私清单、请求权限、设计 App Tracking Transparency 用户体验或准备 Privacy Nutrition Labels 时使用。涵盖即时权限请求、跟踪域管理，以及 WWDC 2023 中介绍的 Required Reason API。

B

baoyu-infographic

xy121718 / baoyu-skills

使用 21 种布局类型和 20 种视觉风格生成专业信息图。分析内容、推荐布局×风格组合，并生成可供发布的信息图。用户要求创建“infographic”“信息图”“visual summary”“可视化”或“高密度信息大图”时使用。

C

content-strategy

podo / design-agent-skills

定义产品所需的内容、内容结构及负责人。涵盖内容审计、内容模型、品牌声音与语调、治理和内容层级

D

design-context

arnavpuri / designskills

基础设计上下文技能。确立品牌识别、色彩体系、字体排印、设计风格与受众偏好，并保存到 .agents/design-context.md 供其他所有设计技能复用。触发短语："set up design context"、"define brand style"、"style guide setup"、"initialize design"、"set brand colors"、"use our brand"。要构建完整 token 体系与组件请用 design-system；要生成调色板请用 color-palette；要创建 logo 与识别系统请用 brand-identity。

H

hallmark

rheinmir / setup

SÀN design mặc định của overstack (anti-AI-slop) — mọi UI đứng trên nó: build trang mới, audit, redesign, extract design từ URL/screenshot, và KHÓA HỆ THIẾT KẾ XUYÊN MÀN HÌNH qua design.md (chạy `hallmark redesign` cả app một lần → sinh design.md ở project root → mọi màn hình sau bám cùng hệ token/type/motion, không mỗi màn một kiểu). Gọi khi user nói: 'thiết kế', 'giao diện', 'làm UI/landing page/app mới', 'redesign', 'audit design', 'design system', 'đồng bộ giao diện giữa các màn hình', 'khóa hệ thiết kế', 'sao trang này trông AI-generated', hoặc gọi đích danh hallmark / dùng verb build·audit·redesign·study. Việc chạm UI mà không chắc dùng gì → dùng skill này (nó là sàn, các skill taste khác là flavour bên trên).

K

knot-theory-educator

curiositech / some_claude_skills

擅长以教育为目的，将辫子理论、结数学和拓扑概念可视化并加以讲解。用于创建交互式可视化、讲解卡片和分步……

L

liquid-glass-skill

podo / design-agent-skills

深入掌握 Apple 的 Liquid Glass 设计系统（iOS 26+/macOS 26+）：.glassEffect() 修饰符、.buttonStyle(.glass)、GlassEffectContainer、平台特定实现、现有应用迁移，以及常见问题和经过验证的解决方案。

M

mermaid

wh-2099 / mermaid-skill

根据用户需求生成 Mermaid 图表。支持流程图、时序图、类图、ER 图、甘特图及另外 18 种图表类型。

M

motion-design-skill

podo / design-agent-skills

LottieFiles 官方动效设计原则：时序曲线、缓动、编排，以及适用于 UI 的迪士尼 12 条动画原则。与具体实现无关，可用于 CSS、GSAP、Framer Motion、Lottie 和基于弹簧的动画。

P

product-inspection

bradfrost / skills

对产品进行多点检查——按实际构建情况在 10 个检查站评估一个即将发布的产品（应用、网站或功能），并生成红/黄/绿检查报告及按优先级排序的工单。当用户要求检查、评估、审计或对某产品或体验做健康检查、运行该检查或某个特定检查站，或询问"why is my product's check engine light on?"时使用。与 ds-inspection 配套——后者检查设计系统，本技能检查用其构建的产品。

S

social-media-graphic

arnavpuri / designskills

自然流量社交媒体图形（帖子、快拍、轮播、个人资料页头图/封面），尺寸适配 Instagram、X/Twitter、LinkedIn、Facebook、Pinterest 和 TikTok，并考虑各平台安全区。默认使用 Gemini 3.1 Flash 生成图像；模板化轮播使用 HTML/CSS。用于非付费信息流内容；付费广告请用 ad-creative-design，网站/邮件横幅请用 banner-design，YouTube 缩略图和 OG 图像请用 thumbnail-design。触发短语："create a social media post"、"design an Instagram graphic"、"make a Twitter image"、"LinkedIn post graphic"、"social media design"、"Instagram story"、"carousel design"、"social graphic"。

T

tailwind-ui-patterns

autohandai / community-skills

Tailwind CSS v4 模式、组件样式和响应式设计

T

tailwindcss

blencorp / claude-code-kit

Tailwind CSS v4 的实用优先样式模式，涵盖响应式设计、暗色模式和自定义配置。使用 Tailwind 设置样式、添加实用类、配置 Tailwind、设置暗色模式或自定义主题时使用。

V

viz

pedronauck / skills

将内容（URL、上传的文档、粘贴的文本、会议转录）转换为专业可视化内容，支持四种输出模式。可通过模式参数或用户消息中的关键词触发。模式 "diagram" 通过 Excalidraw:create_view 生成 Excalidraw 图表。模式 "infographic" 通过 Gemini 图像生成 API 生成 Swiss Pulse PNG。模式 "visualize" 通过 visualize:show_widget 渲染内嵌的 Visualizer 小组件（SVG 或 HTML）。模式 "publish" 通过 HeyGenverse:create_app 将交互式 Swiss Pulse HTML 可视化发布到 HeyGenverse，并返回可分享链接。触发技能的关键词包括："diagram it"、"excalidraw this"、"draw a diagram of this"、"nano this"、"vis it"、"ver it"、"hey it"、"heygenverse this"。不要用于纯文本摘要、代码解释、散文回复，或未指定输出格式的一般聊天可视化。

A

accessibility-catalogue

podo / design-agent-skills

面向无障碍、WCAG 合规性、性能审计和代码质量技能的领域导航器。为无障碍问题修复、WCAG 2.2 审计、Core Web Vitals、React 质量和动画性能选择合适的技能

C

claud3

podo / design-agent-skills

基于 Edward Tufte 原则的 D3.js 数据可视化技能。通过分析数据问题，从丰富的图表库中选出合适的图表类型，然后生成单文件 HTML，采用 D3 v7、深色主题、自适应布局、直接标签和注释。

D

d3js-skill

podo / design-agent-skills

使用 D3.js 创建自定义数据可视化：柱状图、折线图和散点图、弦图、热力图、力导向网络和地理地图，并支持规范的数据绑定、比例尺、坐标轴、过渡效果和交互。适用于 React、Vue、Svelte 或原生 JavaScript。

D

design-justice

curiositech / some_claude_skills

面向边缘化群体的数字公平与创伤知情设计。遇到“无障碍”“离线优先”“创伤知情”“重新融入社会”“康复人群”“共享设备”“不稳定”等主题时激活

D

design-system-generator

curiositech / some_claude_skills

将自然语言描述与设计趋势相匹配的设计系统生成器。精通 Swiss Modern、Neobrutalism、Glassmorphism 及其他 20 多种设计趋势。包含趋势匹配功能

F

frontend-prime

esramulkpinar / prime-frontend-skills

构建具有鲜明特色、可用于生产环境的前端界面。创建任何 Web UI（网站、应用、仪表板、组件）时使用。注重设计质量，避免千篇一律的 AI 风格。可与其他技能（docx、pdf、xlsx）组合使用。

I

interface-design-dammyjay

podo / design-agent-skills

以精工设计为先，为仪表板、管理面板、SaaS 应用、工具及其他信息密集型产品 UI 设计界面。运用层级、令牌、状态和一致性原则，打造兼具功能性与视觉协调性的界面。不适用于营销页面或落地页。

K

knock-notification-best-practices

knocklabs / skills

关于通过电子邮件、推送、SMS、应用内和聊天渠道设计、编写和实施有效通知系统的全面指南。

O

open-design

podo / design-agent-skills

Claude Design 的开源、本地优先替代方案。由守护进程和 Web UI 或桌面应用组成，可在你自己的编码 Agent 命令行或 API 密钥上运行设计技能（Web 原型、SaaS 落地页、仪表板、移动端新手引导、演示文稿、电子邮件、社交媒体轮播、海报、动效帧、精灵动画）以及品牌级设计系统。

R

revealjs-skill

podo / design-agent-skills

生成专业的 Reveal.js 演示文稿，以独立的 HTML 和 CSS 呈现，支持主题设计、多栏布局、Chart.js 图表、代码高亮、演讲者备注、动画，以及通过 decktape 导出 PDF。无需构建步骤。

S

shadcn-vue-skilld

skilld-dev / vue-ecosystem-skills

在 Vue 或 Nuxt 项目中添加、配置或调试 shadcn-vue 时使用。涵盖 shadcn-vue CLI 命令（init、add、apply、view、search、docs、info、diff、migrate、build、mcp）、components.json、样式、预设、字体、图标库、注册表、MCP 服务和编程 API。提供 shadcn-vue 2.8.2 的准确标志和配置键。

S

syncfusion-react-calendar

syncfusion / react-ui-components-skills

全面指南，介绍如何实现 Syncfusion React Calendar 组件，包括快速导航、使用场景指导以及常见任务的参考链接。用于在 React 应用中进行日期选择 UI 的复制即用示例和决策指导。

T

theme-factory

aiskillstore / marketplace

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

T

time-to-first-value

aidevgtm / gtm-cofounder

将好奇的开发者转化为活跃用户：通过文档、快速入门和首次运行体验，帮助他们迅速取得第一个实际成果并再次回来。用户注册或给仓库点星却始终无法运行、访问一次后再也不回来，或准备为转化效果不佳的首次运行体验引流时使用。

T

tremor-design-system

fefogarcia / approved-skills

使用 Tremor 设计系统（React + Tailwind CSS + Recharts）构建仪表板、分析界面和数据密集型 UI。适用于用户要求创建仪表板组件、KPI 卡片、图表、数据表、分析页面、监控界面或任何应使用 Tremor 的数据可视化 UI。触发条件包括提及“Tremor”“tremor.so”“@tremor/react”、请求包含图表和表格的仪表板 UI，或用户项目已使用 Tremor 组件。支持 Tremor Raw（复制粘贴，tremor.so）和 Tremor NPM（@tremor/react）版本。不要用于与仪表板或数据可视化无关的一般前端工作，也不要在用户明确要求使用其他组件库时使用。

U

userflow-1

membranedev / application-skills

Userflow 集成。管理数据和记录，并自动化工作流。用户希望与 Userflow 数据交互时使用

W

wiggle-claude-skill

podo / design-agent-skills

将静态 Logo 图像（PNG、SVG、JPG）制作成动画并转换为 Lottie JSON，再渲染为动画 GIF 和 MP4，并验证完美循环效果。专为 Logo 动画工作流打造。

A

art-direction

growthx-club / build-sprint-skills

为项目确立统一的视觉视角，并据此生成图像。在生成、编辑或替换任何图像素材之前使用，包括主视觉图、og:image、插画、空状态图、头像、背景、卡片图片和 favicon 源图。生成的图像显得普通、带有“AI 感”、不符合品牌风格，或一组图像看起来不像同一产品时，也使用此 skill。UI 布局、CSS 和组件工作除外，这些属于 frontend-design 和 impeccable。

B

baoyu-article-illustrator

xy121718 / baoyu-skills

分析文章结构，识别需要视觉辅助的位置，并以"主题 × 风格"二维方式生成插图。当用户要求"为文章配图""add images""生成文章配图"时使用。

B

baoyu-cover-image

xy121718 / baoyu-skills

生成文章封面图，提供 5 个维度（类型、配色、渲染、文字、氛围），组合 9 套色彩方案与 6 种渲染风格。支持电影宽幅（2.35:1）、宽屏（16:9）和方形（1:1）比例。当用户要求"生成封面图"、"制作文章封面"或"做封面"时使用。

使用 HTML 通过大型视觉元素和精简文字解释当前主题，同时保留关键信息。

C

command-line-chic

freecodecamp-universe / marketplace

freeCodeCamp 的“命令行 Chic”UI 设计系统和美学指南。在构建、设计或评审任何应呈现 freeCodeCamp 产品风格的 UI 时，应用这些规则——包括 Web 应用、仪表板、着陆页、管理工具、组件库或主题。当用户提到 freeCodeCamp 样式、fCC 设计、“Command-line Chic”、为 fCC 开发深色主题，或要求 UI 遵循 freeCodeCamp 的视觉识别时，使用此技能。处理任何 freeCodeCamp 仓库、为 freeCodeCamp 项目贡献代码，或为 freeCodeCamp 员工构建工具和仪表板时，即使用户没有明确提及设计系统，也使用此技能

D

design-brief

podo / design-agent-skills

将结构化视觉设计简报（I-Lang 格式或自然语言）转换为具体的 DESIGN.md 规格和 HTML 预览。把需求中模糊的部分（如“做得专业些”）转化为明确维度：配色、强调色、字体、布局、氛围、密度和限制条件。为 OpenDesign 打造，也可独立使用。

D

design-debt-audit

podo / design-agent-skills

识别、分类并确定累积的设计不一致和结构性问题的优先级。包括债务分类体系、审计流程、严重性×频率/工作量评分和债务登记表

D

design

neurofoo / agent-skills

设计思维流程——共情、定义、构思、原型、测试。用于产品设计、解决模糊问题，或不清楚用户真正需求的情况。

D

design-trend-analyzer

curiositech / some_claude_skills

根据当前设计趋势分析设计潮流，并为你的项目推荐合适的风格、配色方案和字体系统。不可用于无障碍审计或完整设计系统的创建。

D

designer-tools

webflow / webflow-skills

在 Webflow Designer 中构建和管理页面、元素、组件及样式。用于添加区块、创建布局、构建元素、检查或更新组件、查看组件内容、重组页面、创建新页面、预览页面结构、设置元素样式或管理组件属性。需要连接 Webflow Designer。

E

extract-design-system

podo / design-agent-skills

从任意公开网站逆向提取设计令牌（颜色、字体、间距、圆角、阴影），并为本地项目生成 tokens.json 和 tokens.css。包含技能和由 Agent 运行的捆绑 CLI。输出令牌文件，而非 DESIGN.md 文档。

F

figma-to-content

adobe / skills

用它将 Figma 设计转换为 Document Authoring（DA，da.live）中的 AEM Edge Delivery Services（EDS / AEM / Franklin / Helix）内容页面。触发条件："build this Figma frame in EDS"、"turn this Figma design into a DA page"、"publish this design to da.live"，或提供页面对应的 figma.com URL。通过 Figma MCP 读取画框（及任何注释），将每个区块解析为现有块、新的独立块或默认内容（对照项目现有块推断并与你确认，或在画框恰好带有注释时从注释读取），生成符合 DA 规范的 body-fragment HTML，并通过 DA Source API + 预览进行部署。

H

huggingface-gradio

huggingface / skills

用 Python 构建 Gradio 网页界面和演示。在创建或编辑 Gradio 应用、组件、事件监听器、布局或聊天机器人时使用。

H

humanize-text

podo / design-agent-skills

对文本评分并改写，以去除 AI 写作痕迹。从七个维度评估内容（AI 词汇、内容膨胀、语法模式、UX 文案质量、结构特征、标点和元内容），每项按 1–10 分评分。支持原始文本、Figma URL 和 UI 截图。基于 Wikipedia 的《Signs of AI Writing》实地指南。

I

icon-design

oakoss / agent-skills

使用 Lucide、Heroicons 或 Phosphor 为网站选择语义恰当的图标。涵盖概念到图标的映射、React/HTML 模板和 tree-shaking 模式。适用于构建功能区块、服务网格、联系信息、导航或任何需要图标的 UI。避免使用表情符号，确保一致性。

I

impeccable

growthx-club / build-sprint-skills

当用户希望设计、重新设计、塑造、评审、审计、润色、澄清、提炼、强化、优化、调整、制作动画、上色、提取或以其他方式改进前端界面时使用。涵盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程和空状态。处理 UX 评审、视觉层级、信息架构、认知负荷、无障碍、性能、响应式行为、主题、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n，以及可复用的设计系统或令牌。也适用于需要变得更大胆或更有趣的平淡设计、应该收敛的张扬设计、在实时浏览器中迭代 UI 元素，或希望在技术上令人惊叹的视觉效果。不适用于纯后端或非 UI 任务。

L

logo-design-guide

101-skills / superpowers

创建 logo 的 logo 设计原则与 AI 图像生成最佳实践。涵盖 logo 类型、提示词技巧、可缩放性规则和迭代工作流。用途：品牌标识、初创公司 logo、应用图标、favicon、logo 概念。触发词：logo design、create logo、brand logo、logo generation、ai logo、logo maker、icon design、brand mark、logo concept、startup logo、app icon logo