Skills

P

prototype

windyd / skills

构建一个临时原型来回答设计问题。当用户想验证状态模型或逻辑是否合理，或探索 UI 应该是什么样时使用

S

sgds-layouts

govtechsg / sgds-web-component

SGDS 应用页面布局模式的完整目录。用户询问页面布局、内容排列、侧边面板、分栏视图、侧边栏布局、面包屑布局或视口高度布局时均使用此技能——即使用户只说“我的页面该如何布局”或“我需要双栏布局”。涵盖 Full Width 布局（使用 sgds-container 的面向公众页面）和 With Sidebar 布局（使用 sgds-container-sidebar 的仪表板／内部工具）。触发词：layout、aside、split view、sidebar layout、two-column、three-column、content arrangement、page structure with aside

S

svg-precision

dkyazzentwatwa / chatgpt-skills

确定性 SVG 生成、验证和渲染。适用于需要结构正确且兼容不同查看器的图标、图表、图形、UI 模型或技术图纸。

A

awesome-design-html

yzfly / awesome-design-html

115 款品牌主题 HTML 设计，作为 Claude Code 技能提供（93 款网页 + 22 款 iOS，含 20 款中国展示案例）。一行安装，然后直接描述需求：“做一个 Linear 风格的页面”、“飞书风的页面”、“Spotify Now Playing iPhone 样机”。

A

axiom-swiftui-layout-ref

charleswiltgen / axiom

参考：完整的 SwiftUI 自适应布局 API 指南，涵盖 ViewThatFits、AnyLayout、Layout 协议、onGeometryChange、GeometryReader、尺寸类别和 iOS 26 窗口 API。

B

bang-motion

bangtutorial / bang-motion

在浏览器中构建电影级动态图形（宣传视频、片头、开场、转场、动态排版、16:9 或 9:16 的图文解说视频），使用 HTML + CSS + GSAP（必要时加 Three.js），成品动起来像真正的视频，而不是演示幻灯片。每当用户要求“宣传视频”“片头”“动画开场”“动态图形”“转场”“动态排版”“电影级文字动画”“解说”“解说视频”（视觉新闻、教育卡通、拼贴），或展示宣传/解说视频参考并希望制作网页版时使用本技能，即使他们没有明确提到“动态图形”一词。当用户抱怨网页动画效果“像 PPT/演示文稿”并希望更具电影感，或希望将网页动画渲染为 MP4 视频文件，或希望通过 bridge/MCP Higgsfield 直接在 After Effects 中构建卡通/动画解说时也使用。

D

data-visualization

vivy-yi / xiaohongshu-skills

用于呈现数据洞察、创建信息图，或将复杂信息可视化

D

domo-app-theme

stahura / domo-ai-vibe-rules

适用于 Domo 自定义应用的简洁专业仪表板主题。包含 CSS 自定义属性、布局模式、字体排印和设计润色，让界面呈现 Domo 平台的原生风格。包括 OKLCH 调色板、分层阴影、同心圆角、等宽数字和微交互模式。

F

framer-motion-best-practices

pproenca / dot-skills

Framer Motion 性能优化指南。编写、审查或重构使用 Framer Motion 的 React 动画时，使用此技能以确保采用最佳性能模式。适用于涉及 motion 组件、动画、手势、布局过渡、滚动联动效果和 SVG 动画的任务

F

frontend-design-principles

joshuadavidthomas / agent-skills

构建或审查前端 UI 时使用，涵盖仪表板、管理面板、落地页、营销网站和 Web 应用。推动符合领域特点的设计决策（字体排版、色彩体系、布局、CSS 令牌命名、层次与间距系统），而非采用通用 AI 默认方案；根据上下文分流至 app.md（产品/数据 UI）或 marketing.md（公共/创意页面）。

G

generic-react-design-system

travisjneuman / .claude

React 应用的完整设计系统参考。涵盖颜色、字体排版、间距、组件模式、玻璃拟态效果、GPU 加速动画和 WCAG AA 无障碍标准。适用于实现 UI、选择颜色、应用间距、创建组件或确保品牌一致性。

M

motion-catalogue

podo / design-agent-skills

动态效果、动画、3D 和生成媒体技能的领域导航器。可为 GSAP、Framer Motion、Three.js、Lottie、着色器、生成艺术、视频和 AI 媒体生成路由到合适的技能。

O

opencals-build-booking-site

letsopencals / skills

基于 Opencals 托管 API 和 @opencals/storefront-sdk，从官方开源 Next.js 模板（沙龙、理发店、诊所、板式网球/壁球俱乐部、豪华汽车租赁、语言学校、别墅租赁、reformer 普拉提工作室）构建、定制并部署生产级预约网站。适用于用户需要预约/排程网站、Opencals 店面，提供商业构想和灵感并要求构建预约网站，或说“为我构建一个预约网站”。涵盖选择模板、搭建项目、接入服务、可预约时段和结账、品牌重塑，以及部署到 Vercel。还支持通过 template-noir 按天预订的多日租赁（汽车、设备），通过 template-bali-villas 固定入住/退房时间的过夜住宿（别墅、木屋、客房），通过 template-fluently 提供团体课程、级别、教师和在线课程的学校，以及通过 template-reformer 提供多工作室课程时刻表、剩余床位和满班状态的健身工作室。确切的 API/SDK 调用格式请使用配套的 `opencals-storefront-api` 技能。

P

page-cro

borghei / claude-skills

针对落地页和营销页面的转化率优化，涵盖价值主张清晰度、标题效果、CTA 层级、视觉流程、社会认同内容布局、异议处理和结构化 A/B 测试。

P

pascal-3d

pascalorg / editor

连接 Pascal 并使用其 MCP 工具创建、检查、编辑、验证、保存或移交可编辑的 3D 建筑场景。每当用户要求 Agent 在 Pascal 中工作、制作房间或建筑模型、检查 Pascal 项目、执行空间编辑、连接 Pascal MCP 或提供经过验证的 Pascal 编辑器链接时，使用此技能。此技能也负责安全的本地设置、现有账户设置以及获得明确授权的自主设置。

T

title-kinetic-typography

calesthio / generative-media-skills

与供应商无关的标题设计和动态字体排印指导，适用于视频、动画、广告、解说视频、社交钩子、品牌影片、歌词/文字视频、标题卡、主标题、下三分之一字幕、作为设计的字幕以及其他以动态文字为主的场景。当 Agent 需要为动态文字规划、编写提示词、实施、交接、迭代或进行质量检查时使用，涵盖字体排印层级、可读性、时序、进入/停留/退出、动态语义、换行、安全区域、本地化、品牌约束、无障碍、闪烁/动态安全或制作规格。

W

web-design-guidelines

laguagu / claude-code-nextjs-skills

检查 UI 代码是否符合 Web 界面指南。当被要求「审查我的 UI」、「检查可访问性」、「审计设计」、「审查用户体验」或「根据最佳实践检查我的网站」时使用。

B

better-auth-components

andrelandgraf / fullstackrecipes

为身份验证流程添加 UI 组件和页面，包括登录、注册、忘记密码、重置密码和电子邮件验证。

在任何框架中从 Embla、Swiper、Splide、Slick 或 Flickity 迁移到 Blossom Carousel 时使用。涵盖选择合适的迁移指南、将旧概念对应到 Blossom，以及查找源文档或托管页面。

B

brand-guidelines

davepoon / buildwithclaude

将 Anthropic 的官方品牌颜色和字体应用于适合采用 Anthropic 视觉风格的各类作品。适用于需要品牌颜色或风格指南、视觉排版或公司设计规范的场景。

D

d3js-visualization

bbeierle12 / skill-mcp-claude

创建 D3.js 图表和交互式数据可视化。构建柱状图、折线图、散点图、饼图、力导向图、地理地图或任何自定义数据可视化时使用。

E

ember-best-practices

ember-tooling / agent-skills

Ember.js 性能优化和无障碍指南。编写、审查或重构 Ember.js 代码以确保采用最佳性能模式和无障碍设计时使用此技能。适用于涉及 Ember 组件、路由、数据获取、包优化或无障碍改进的任务。

E

engineering-mobile-app-builder

peterhdd / agent-skills

使用 SwiftUI 或 Jetpack Compose 开发、React Native 或 Flutter 跨平台应用、离线优先架构、生物识别认证、推送通知、深层链接、应用启动优化，或移动端专属 UX 模式与手势处理时，可用于构建针对 iOS 和 Android 优化性能并集成平台功能的原生及跨平台移动应用。

E

extension-assets

quangpl / browser-extension-skills

生成并管理所有 Chrome 扩展程序资源：图标（16–128px）、CWS 列表图片、宣传图块以及 public/ 文件夹设置。支持 ImageMagick、Gemini API 和手动提示词模板。

F

fun-isometric

kelvinkn17 / skills

绘制有趣、鲜明的等距贴纸（平涂、粗黑描边、挤出式侧面），并使用 After Effects 级关键帧预设库制作动画，完全按照 lottie-web 的播放方式重放，让动作成为流畅的角色动画，而非凭空添加的晃动。支持任意配色（六组命名色板，默认使用 Riso；也支持两种品牌色、单色、色相偏移、自定义色槽）和四种朝向。生成图标模块，可在任何 Web 应用的画布上实时播放（工具包附带 React 组件），并导出为循环透明视频（webm、HEVC mp4）及海报图。适用于“/fun-isometric”、“动画贴纸图标”、“有趣的等距图标”、“Lottie 风格图标”、“会动的引导插图”，以及任何关于趣味动画图标、空状态插画或功能贴纸的请求。

H

html-ppt-course-module

nexu-io / open-design

面向酒店及餐饮行业新员工的入职首 30 天培训模块——涵盖行为规范、实践、检查和经理跟进。为新员工和经理打造的专业培训演示文稿，可用于决策。

H

html-ppt-obsidian-claude-gradient

nexu-io / open-design

GitHub 暗紫渐变演示文稿——GitHub-dark #0d1117 + 紫蓝色 radial 环境光 + 60px 网格 mask、居中布局、紫色 pill 标签、三色渐变标题（#a855f7→#60a5fa→#34d399）、GitHub 风格代码 palette、紫色左边框高亮块。适合开发者工作流 / MCP / Agent / dev tool 教程，类似 GitHub Blog / Linear Changelog。

I

intentui

intentui / skills

强制遵循 Intent UI 组件库规范。编写 React 组件、审查 UI 代码或构建涉及 UI 元素的页面/功能时使用。确保使用语义化颜色令牌、正确的表单和叠加层模式、`intent` 变体属性，以及 src/components/ui/ 中的现有组件。

P

phaser4-game-asset-integration

weberwang / phaser-skills

为 Phaser 4 游戏规划、制作、登记、验证并集成 UI、角色、场景、动画、VFX、背景和参考还原资源。用于正式视觉资源、视觉系统、资源接入、视觉重构、运行时视觉验收和来源/许可登记；不用于纯玩法规则修改。

P

product-frameworks

yonatangross / orchestkit

用于商业案例、市场分析、战略、优先级排序、OKR/KPI、用户画像、需求和用户研究的产品管理框架。构建 ROI 预测、竞争分析、RICE 评分、OKR 树、用户画像、PRD 或可用性测试计划时使用。

S

scroll-storyteller

ingpoc / skills

创建带有鼠标跟随聚光效果、动画 SVG 图像和 Anthropic 设计语言的交互式滚动叙事体验时使用。适用于说明页面、产品展示、视觉叙事，或任何需要通过有机形状和流畅动画打造沉浸式滚动叙事的内容。支持基于 GSAP 的动画或轻量级纯 CSS 动画。

V

vibe-matcher

curiositech / some_claude_skills

将情绪氛围和品牌关键词转化为具体视觉 DNA（颜色、字体、布局、交互）的联觉设计师。当用户描述期望的“感觉”（前卫、值得信赖……）时使用。

A

axiom-extensions-widgets-ref

charleswiltgen / axiom

实现 widget、Live Activities、Control Center 控件或应用扩展时使用——提供 WidgetKit、ActivityKit、App Groups 以及 iOS 14+ 扩展生命周期的全面 API 参考。

B

brand-design-md

podo / design-agent-skills

运行时从 getdesign.md 查询 Stripe、Linear、Apple、Figma、Notion、Nike 等知名品牌的设计规范（包含颜色、字重、字间距、圆角、阴影的 DESIGN.md），然后将其应用于你的项目。安装的技能以中文编写，但接受英文品牌名称。

F

finding-sessions-to-watch

posthog / ai-plugin

帮助用户从“我想看录屏，但不知道看哪些”出发，筛选出值得观看的少量高价值会话。用户询问该看哪些会话或回放、希望找到有趣/有用的录屏、表示不知道从哪里开始查看会话回放，或想观看与某个目标相关的会话（注册、定价、引导、结账、某项功能、愤怒点击、错误、移动端、特定人员），但未指定精确筛选条件时使用。通过 `query-session-recordings-list` 将模糊意图转化为聚焦的 RecordingsQuery，随后为最佳候选添加深层链接，并交接给 `investigating-replay`。如果用户已有录屏/会话 ID（使用 investigating-replay），或想查看已知错误问题的回放（使用 finding-replay-for-issue），则不要使用。

F

frontend-design

podo / design-agent-skills

八种美学方向（瑞士风、工业风、粗野主义、极光极繁主义、混沌极繁主义、复古未来主义、有机风、Lo-Fi），每种都将配色、排版和纹理固定为特定的 CSS 令牌。每个需求选择一种，技能便会生成相匹配的代码，并遵守不得编造演示数据或填充标签的内容规则。

G

graphic-design

arnavpuri / designskills

核心平面设计技能，通过 Gemini 3.1 Flash 图像生成和/或 HTML/CSS/SVG 代码制作一次性视觉素材。涵盖构图、色彩理论、字体排印、提示词编写、精确尺寸裁切、输出验证、文字叠加回退方案以及高级 CSS 技巧。适用于不属于特定格式的通用或自定义尺寸图形；平台专用格式请优先使用同类技能（social-media-graphic、poster-design、thumbnail-design、ad-creative-design、banner-design、product-mockup、infographic）。触发短语："design a graphic"、"create a visual"、"make a graphic"、"design an image"、"create artwork"、"generate a graphic"、"visual design"。

H

html-ppt-hermes-cyber-terminal

nexu-io / open-design

暗色终端 honest-review 演示文稿——#0a0c10 黑色背景 + 56px 赛博网格 + CRT 暗角 + 扫描线、窗口红绿灯 chrome、`$ prompt` 命令行标题、薄荷绿 #7ed3a4 大字、JetBrains Mono、仅描边柱状图、闪烁光标、琥珀／绿／红三档标签、暗色代码块。适用于 CLI / agent / 开发工具评测（含 trace、diff、benchmark）。

H

html-ppt-weekly-report

nexu-io / open-design

团队周报／状态更新演示文稿——清晰的企业风格、8 格 KPI 网格、已交付事项列表、8 周柱状图、下周计划表。适用于周报、业务评审、团队状态更新和高管仪表盘。

J

json-render-shadcn

vercel-labs / json-render

为 json-render 预置的 shadcn/ui 组件。适用于使用 @json-render/shadcn、向目录添加标准 UI 组件，或使用 Radix UI + Tailwind CSS 组件构建 Web UI。

M

make-interfaces-feel-better

julianromli / ai-skills

让界面更精致的设计工程原则。适用于构建 UI 组件、审查前端代码，以及实现动画、悬停状态、阴影、边框、排版、微交互、进入/退出动画或任何视觉细节工作。适用于 UI 润色、设计细节、“让它感觉更好”“感觉不太对”、错列动画、边框圆角、视觉对齐、字体平滑、等宽数字、图像轮廓和盒阴影等需求。

M

mobile-app-ui-design

podo / design-agent-skills

专注于专业移动应用 UI 设计，打造有明确意图、流畅、个性鲜明且充满活力的界面，借鉴一流应用的设计模式。

使用 OpenTUI 构建终端 UI。涵盖 Core、框架、组件、应用 API、测试、扩展、集成、部署和公共 API 查询。

P

product-ux-expert

majiayu000 / spellbook

产品交互与 UX 专家。在审查 UI/UX、开展启发式评估、设计用户旅程、应用认知心理学原理或确保符合 WCAG 2.2 无障碍标准时使用。

U

usability-tester

daffy0208 / ai-dev-standards

通过系统观察开展可用性测试并发现 UX 问题。适用于测试用户流程、验证设计、发现阻碍点，或确保用户能够完成核心任务。涵盖测试规划、出声思考协议、任务场景和严重程度评级。

A

accessibility

shipshitdev / skills

将 WCAG 2.1 AA 应用于 Web UI 并修复不符合项。用于构建或审查涉及 a11y、ARIA、键盘导航、焦点陷阱或对比度的组件。

A

animate-skill

podo / design-agent-skills

受 Emil Kowalski 启发的 Next.js/React 动画模式：缓动和时序规则、CSS transitions 和 Framer Motion 示例，以及悬停效果、Toast 通知、文本显现和模态框的可运行示例。强调自然且有目的感的动效。

A

ant-design-react

partme-ai / full-stack-skills

使用 Ant Design（antd）构建企业级 React UI，包含 60 多个组件（Button、Form、Table、Select、Modal、Message）、设计令牌、TypeScript 支持和 ConfigProvider 主题配置。用户需要使用 Ant Design 创建 React 应用、构建带验证的表单、展示数据表或自定义 Ant Design 主题时使用。

B

bencium-ux-designer

podo / design-agent-skills

开发原创视觉语言，并将人工选定的方向转化为生产用素材。首先生成十种独立的、以字体为主导的 HTML 设计方向，请用户从视觉上评判并选定一种，然后据此构建品牌、网站或产品系统。旨在摆脱千篇一律的 AI 和大型科技公司审美。

C

css-animation-patterns

oakoss / agent-skills

CSS 动画、过渡、关键帧和现代动态效果 API。适用于添加动画、过渡、滚动驱动效果或视图过渡。用于 css-animation、transition、keyframes、view-transitions、scroll-animation、transform、motion-preference、animation-timeline。

D

dataviz

jimliu / baoyu-design

在准备创建任何图表、绘图、仪表板或数据可视化时，无论输出媒介为何（HTML/React 工件、内嵌 SVG、matplotlib/plotly/d3/Recharts、PNG），都使用此技能。在编写第一行图表代码、选择图表颜色、构建统计卡片/KPI 行或布局仪表板之前阅读。提供与设计系统无关的方法：图表形式启发法、带可运行验证器的颜色公式、标记规范和交互规则。默认调色板见 references/palette.md。

D

design-auditor

podo / design-agent-skills

从 19 个专业类别审查设计，包括字体、颜色/对比度、间距、视觉层级、一致性、WCAG、表单、动效、深色模式、响应式设计、加载/空/错误状态、微文案、i18n/RTL、层次、图标、导航、设计令牌、伦理设计/暗黑模式，以及 Nielsen 启发式评估。按严重程度对问题排序，并给出 0–100 分。

D

design-system-structure

zakariaf / flutter-skills

将 Flutter 设计系统构建为 tokens→theme→modifiers→shapes 结构，采用双层 token（按测量值命名的原语和按角色命名的语义槽位），通过 ThemeExtension 暴露，并通过断言式 of(context) 读取；手动编写浅色和深色 ColorScheme，而不使用 ColorScheme.fromSeed；将所有原始颜色/hex/Colors./Curves./Duration/BorderRadius/fontSize 限定在 lib/theme/ 内，并通过 no-raw-values gate 检查；在减少动态效果设置下将动画归零，在首次绘制前恢复已持久化的主题，打包字体（绝不使用 google_fonts/dynamic_color），并最后推导每种有状态语义的辅助颜色，确保颜色不是唯一信号。适用于创建或编辑 ThemeData/ThemeExtension/ColorScheme、添加或重命名设计 token、接入主题注入或主题模式持久化、使用 fromSeed/dynamic_color/google_fonts/FontVariation、组织 theme/ 或 DesignSystem/ 文件夹，或审查任何渲染颜色、圆角、时长或字体的 widget。

D

ds-inspection

bradfrost / skills

运行设计系统多点检查——在 10 个站点（覆盖度、最佳实践、无障碍、共享语言、测试、编排、治理、反馈、机器可读文档、Agent 访问）评估设计系统，并生成带优先级工作单的红/黄/绿检查报告。当用户要求检查、评估、审计或体检其设计系统、运行检查或某个特定站点，或询问「为什么我的设计系统检查引擎灯亮了？」时使用。

E

establish-visual-hierarchy

gnurio / refactoring-ui-plugin

使用大小、字重、颜色和弱化策略，判断哪个 UI 元素最先、其次、第三吸引注意力。

F

furniture-fit

pascalorg / editor

评估家具是否适合已测量的 Pascal 房间或布局。适用于沙发、桌子、床、柜子、电器、布置、摆放、碰撞、间隙或旋转占地相关问题。生成有工具依据的空间报告，区分占地是否适配与缺乏依据的高度、门扇开启、组装和配送路线判断；缺少尺寸或比例时，报告证据不足。

G

gr-user-interview

gingiris-1031 / gingiris-skills

用户访谈与需求验收框架，涵盖原始证据、方案、优先级和回访交接。完整介绍 HeyGen 通过 937 次访谈找到 PMF 的方法论。涵盖访谈招募、问题设计、访谈执行、数据综合和决策驱动。提炼自 gingiris-user-interview。

H

html-ppt-graphify-dark-graph

nexu-io / open-design

暗底知识图谱演示文稿——#06060c→#0e1020 的深夜渐变背景、漂浮的 blur orbs、封面 SVG 力导向图谱、彩虹渐变标题、JetBrains Mono 命令行高亮、glass-morphism 卡片。适合 dev-tool／CLI／知识图谱／数据可视化发布会，呈现“AI-native + 科幻 + 暖色”的调性。

H

html-ppt-knowledge-arch-blueprint

nexu-io / open-design

奶油蓝图架构演示文稿——奶油纸 #F0EAE0 背景、单一锈红色 #B5392A 高亮、48px 蓝图网格蒙版、2px 黑边硬卡片、流水线步骤框（其中一个抬高）、右侧锈红色洞察标注、Playfair 衬线大字、SVG 虚线反馈环。无渐变、无柔和阴影，风格严谨且适合印刷。

H

html-ppt-xhs-pastel-card

nexu-io / open-design

柔和马卡龙慢生活演示文稿——奶油色 #fef8f1 背景、三个柔光 blob、Playfair 斜体衬线展示标题搭配无衬线正文、28px 圆角马卡龙卡片（桃／薄荷／天蓝／紫／柠檬／玫瑰）、Playfair 斜体 01-04 序号、SVG 环形图、chip+page 顶栏。适合生活方式／个人成长／慢生活／情绪类内容，呈现“杂志、手作、不太科技”的感觉。