Skills

P

problem-statement

deanpeters / product-manager-skills

撰写以用户为中心的问题陈述，说明谁被卡住、他们想做什么、为什么重要以及感受如何。适用于探索、优先级排序或 PRD 撰写。

S

social-reddit-card

nexu-io / open-design

逼真的 Reddit 帖子卡片，带投票栏和评论数，适合作为视频叠加层或故事分享。

B

blog-chart

agricidaniel / claude-blog

内部功能，用户不能直接调用：编排器运行 blog-write 或 blog-rewrite 时会调用此功能，将研究数据转换为适用于深色模式的 HTML 或 MDX 内嵌 SVG 图表（横向条形图、分组条形图、环形图、折线图、棒棒糖图、面积图、雷达图）。生成无障碍标记（role=img、aria-labelledby、唯一 id）、来源标注和透明背景。Agent 无法调用此功能。

G

gsap-web

iart-ai / web-animation-skills

当用户要求“构建滚动动画”“添加 ScrollTrigger”“滚动时固定某个区域”“让动画随滚动进度播放”“创建 hero 时间轴”“制作水平滚动区域”“拆分文本并为单词添加动画”“使用 GSAP Flip 为布局变化添加动画”“将 ScrollTrigger 与 Lenis 同步”“Lenis 平滑滚动抖动”“ScrollTrigger 标记漂移”“ScrollTrigger 固定效果与 Lenis/Locomotive 冲突”，或“设置带 GSAP 固定效果的平滑滚动”时使用。涵盖 GSAP 时间轴、ScrollTrigger、SplitText、Flip，以及面向代码驱动网页动画的 Lenis/Locomotive 平滑滚动同步。

S

social-spotify-card

nexu-io / open-design

Spotify 正在播放风格的卡片，含专辑封面、进度条和播放控制，适合作为视频叠加层或个人主页。

L

locomotive-scroll

freshtechbro / claudedesignskills

关于 Locomotive Scroll 平滑滚动库的全面技能，涵盖视差效果、视口检测与滚动驱动动画。在实现平滑滚动体验、创建视差效果、构建滚动触发动画或开发沉浸式滚动网站时使用此技能。当任务涉及 Locomotive Scroll、平滑滚动、视差、滚动检测、滚动事件、粘性元素、横向滚动或 GSAP ScrollTrigger 集成时触发。可与 GSAP 集成以实现高级的滚动驱动动画。

I

illustration-style

owl-listener / designer-skills

定义插画风格指南——视觉语言、色彩使用和应用规则。在委托绘制或规范化插画时使用。图标请使用 `icon-system`（design-systems）。

F

frontend-design

sickn33 / agentic-awesome-skills

在产品既有的品牌、无障碍、性能和框架约束内，设计并实现独具特色的前端。

I

impeccable-design-polish

nexu-io / open-design

受 Impeccable 启发的后续设计打磨 skill。当 Web 或 HTML 产物已存在时使用，用于审查、点评、打磨、添加动效、加固，并为上线/分享做准备。

V

visual-hierarchy

owl-listener / designer-skills

通过尺寸、字重、颜色、间距和位置建立层次，让视线按预期顺序停留。用于创作新作品时。评估现有界面时，请使用 `critique-visual-hierarchy`（visual-critique）。

E

enterprise

bergside / awesome-design-skills

深色云平台美学风格，采用模块化网格、玻璃质感面板和清晰的数据层级，适用于效率仪表板

B

bento

bergside / awesome-design-skills

模块化网格布局，采用卡片式区块、清晰的层级、宽松的间距和微妙的视觉对比，打造有序且易于浏览的界面。

P

presentation-design

jwynia / agent-skills

设计并评估能有效传达信息的演示文稿。适用于设计演示、制作幻灯片、获取演示反馈、组织演讲结构或审阅幻灯片。关键词：演示文稿、幻灯片、演讲、PowerPoint、Keynote、reveal.js。

S

storyboard

deanpeters / product-manager-skills

创建一个六格分镜，展示用户从遇到问题到解决问题的历程。适用于需要快速叙事以达成共识、评审概念或进行演示的场景。

M

microcopy

lobehub / lobehub

UI 文案与微文案指南。用于面向用户的文案、按钮、错误提示、空状态、新手引导、国际化措辞、翻译，以及中英文案改进。

A

adaptive

android / skills

使应用的 UI 适配不同的（屏幕尺寸与设置）的指令。

S

shadcn

bergside / awesome-design-skills

受 Shadcn/ui 启发的设计，采用简约整洁的组件、单色调色板和实用优先的模式。

F

figma-design-to-code

figma / mcp-server-guide

**强制前置步骤**——调用 `get_design_context` Figma MCP 工具之前，必须先调用此技能。用户想将 Figma 设计实现、构建、移植或编写为代码时，必须触发此技能。示例提示（不限于此）：“implement this Figma design”“build this screen from Figma”“turn this Figma into code”“design to code”。此技能为 Agent 提供正确将 Figma 设计实现为代码所需的重要说明和步骤，不得跳过。

N

neobrutalism

bergside / awesome-design-skills

对粗野主义的现代演绎，采用醒目的边框、鲜艳的点缀色，以及温暖底色上的粗犷高对比度布局

C

color-system

owl-listener / designer-skills

构建产品的色彩系统——包括明度梯度、语义角色和对比度合规。在从零开始定义或重建色彩时使用。暗色模式适配使用 `dark-mode-design`；图表配色使用 `data-visualization`；多品牌 token 架构使用 `theming-system`（design-systems）。

M

muapi-youtube-thumbnail

samuraigpt / generative-media-skills

设计高点击率的 YouTube 缩略图——醒目的图像、大胆的文字排版，以及必要的情绪化人脸或主体。

C

cinematic-gsap-lenis-motion-system

mengto / skills

使用 GSAP、ScrollTrigger 和 Lenis 创建高端电影感网页动效系统。适用于奢华风格的编辑类网站、创意工作室作品集、Awwwards 风格交互、平滑滚动显现、交错文本、视差效果、固定区块、磁性悬停状态、自定义光标，以及响应鼠标的分层动效

G

glassmorphism

iart-ai / web-animation-skills

当用户要求“添加玻璃拟态效果”“磨砂玻璃 UI”“Apple 液态玻璃风格”“磨砂模糊卡片”“半透明玻璃面板动画”“制作磨砂导航栏”“构建玻璃质感模态框/对话框”“为玻璃卡片添加悬停动画”或“添加折射液态玻璃主视觉区”时使用此技能。涵盖带有 backdrop-filter 模糊效果的磨砂半透明面板、边缘/镜面高光、SVG 液态玻璃折射、悬停/滚动/进入时的动效，以及符合无障碍要求的降低透明度替代方案。

R

refined

bergside / awesome-design-skills

精心打造的现代极简风格，搭配优雅的衬线字体和低调雅致的配色

N

neumorphism

bergside / awesome-design-skills

在单色表面上使用柔和的凸起 UI 元素及内外阴影，营造触感和嵌入式外观

P

professional

bergside / awesome-design-skills

精致、适用于商务场景的设计，采用现代字体、结构化布局和可信赖的视觉形象

S

shadcn

vercel-labs / json-render

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

B

brand-guidelines

getsentry / skills

按照 Sentry 品牌指南撰写文案。适用于撰写界面文案、错误信息、空状态、引导流程、404 页面、文档、营销文案等任何面向用户的内容。涵盖 Plain Speech（默认）和 Sentry Voice 两种语气。

M

modern

bergside / awesome-design-skills

采用衬线字体、简约配色和整洁布局的现代编辑风格，适用于精致的数字产品

D

dark-mode-design

owl-listener / designer-skills

将现有调色板适配到深色模式——表面层级、对比度重新平衡和去饱和规则。适用于你已经有一套浅色调色板需要转换时。若要先构建基础调色板，请使用 `color-system`。

S

storytelling

bergside / awesome-design-skills

以叙事为导向的设计，运用视觉元素、文案和交互，引导用户体验引人入胜且能引发情感共鸣的旅程

R

react-spring-physics

freshtechbro / claudedesignskills

基于物理的动画库，将 React Spring（弹簧动力学、手势集成、60fps 动画）与 Popmotion（底层可组合的动画工具、响应式流）结合在一起。适用于构建流畅自然的 UI 动画、手势驱动的界面、物理模拟或弹簧回弹式交互。在涉及 React Spring hooks、弹簧物理、惯性滚动、基于物理的运动、动画组合或自然 UI 动效的任务时触发。相较 motion-framer 的另一种物理方案，动画更符合真实物理规律。

P

page-transition-animation

iart-ai / web-animation-skills

当用户请求“为页面或路由切换添加动画”“在视图之间添加页面切换或淡入淡出效果”“为 Next.js App Router 中的路由切换添加动画”“使用 View Transitions API”“导航时 AnimatePresence 的 exit 不触发”或“Framer Motion 的 exit 动画不起作用／Next.js 中卸载前的 exit 动画”时使用。涵盖使用 View Transitions API 和 Framer Motion 为 Next.js App Router 及通用 SPA 路由实现页面进入／退出动画。

C

claymorphism

bergside / awesome-design-skills

柔和、圆润、类似 3D 的形状，模仿可塑黏土，搭配俏皮、蓬松的元素和多彩表面。

S

sleek

bergside / awesome-design-skills

现代极简美学，线条简洁，配色经过精心设计，交互细腻，间距统一。

S

scroll-reveal-libraries

freshtechbro / claudedesignskills

使用 AOS（Animate On Scroll）实现简单的滚动触发显现动画。在构建营销页面、落地页或内容密集型站点，需要基础的淡入/滑动效果而无需复杂动画编排时使用此技能。在涉及滚动动画、滚动触发显现、AOS、简单动画或基础滚动效果的任务时触发。对于较简单的用例，可替代 GSAP ScrollTrigger 和 Locomotive Scroll。与面向 React 的特定动画的 motion-framer 进行比较。

E

engineering-drawing

earthtojake / text-to-cad

为零件制作 PDF 工程图，包含正投影视图、隐藏线、中心标记、实际尺寸、孔标注、注释，并使用 ISO 图纸标题栏。所有视图均根据零件几何形状投影，确保图纸遵循模型。用户要求绘图、带尺寸的图纸、车间或制造图、打印图，或“此零件的 2D 视图”时使用。

C

contemporary

bergside / awesome-design-skills

当代极简设计，采用 Bento 网格，支持深色模式，并提供高性能、易访问的布局。

C

corporate

bergside / awesome-design-skills

专业且符合品牌调性的设计，采用结构化网格、极简布局和一致的企业级设计模式

M

material

bergside / awesome-design-skills

Google 的 Material Design，采用分层表面、动态主题、内置动效和响应式跨平台模式。

B

brutalism

bergside / awesome-design-skills

受混凝土建筑启发的粗犷反设计美学，采用未经修饰的元素、突兀的布局和功能主义极简风格

K

kinetic-typography

iart-ai / kinetic-typography-skills

当用户要求“为标题添加动画”“制作动态排版视频”“制作分段文字揭示效果”“按字符／单词／行错开显示文字”“制作歌词或字幕视频”“为可变字体字重添加动画”“让文字沿路径排列”或“创建动画标题卡片”时使用此技能。涵盖 CSS、GSAP SplitText、Framer Motion 和 Remotion 中的揭示效果技术。

U

user-flow-diagram

owl-listener / designer-skills

以图示呈现屏幕级路径、决策点和分支逻辑。用于说明功能的遍历方式。若需关注情感层面的端到端旅程，请使用 `journey-map`（design-research）。

F

futuristic

bergside / awesome-design-skills

采用科技感字体和现代布局，呈现简洁、以创新为驱动的前瞻性设计

I

icon-system

owl-listener / designer-skills

定义图标系统——网格、尺寸、描边粗细、命名、分类与实现。用于统一图标规范。需要更广泛的插画风格时，请使用 `illustration-style`（ui-design）。

W

weread-year-in-review-video-template

nexu-io / open-design

受微信读书启发的 HyperFrames 视频模板，面向竖屏年度报告、个人阅读数据看板、读书笔记回顾以及可分享的年度总结故事。适用于用户希望制作 9:16 的 HTML 转 MP4 阅读报告、搭配温暖纸张质感、编辑风格的中文排版、书页隐喻、数据亮点和确定性动效的场景。

I

image-processing

jezweb / claude-skills

为 Web 开发处理图像——调整尺寸、裁剪、去除空白、转换格式（PNG/WebP/JPG）、优化文件大小、生成缩略图、制作 OG 卡片图。使用 Pillow（Python），无需 ImageMagick。触发词：'resize image'、'convert to webp'、'trim logo'、'optimise images'、'make thumbnail'、'create OG image'、'crop whitespace'、'process image'、'image too large'。

S

scientific-visualization

k-dense-ai / scientific-agent-skills

使用 Matplotlib、Seaborn 或 Plotly 创建并审查真实、无障碍、可直接用于发表的科研图表。适用于图表设计、多面板布局、不确定性与缺失数据展示、颜色/对比度检查、图像元数据验证以及期刊导出规划。

M

migrate-xml-views-to-jetpack-compose

android / skills

提供将 Android XML View 迁移到 Jetpack 的结构化工作流

O

oil-ui

oil-oil / oil-ui

设计、改进和评审网站、App、后台与组件的界面：探索设计方向、生成多风格同屏对比页，并基于真实截图打磨视觉层级；按请求交付对比页、设计说明、设计稿或可运行界面。只负责设计判断，不用于纯业务逻辑、接口构建、无界面变化的代码整理，或改法已完全明确的日常修改（如改文案、调数量、删指定元素、复用现有样式，哪怕带有“优化”字样）。已安装 oil-ui-pro 时交给 oil-ui-pro。

V

video-motion-graphics

dylantarre / animation-principles

在制作 After Effects 合成、Premiere Pro 动态图形、视频标题、解释类视频或广播级动态图形时使用。

F

frontend-design-ui-ux

ulpi-io / skills

产出有辨识度且已锁定（LOCKED）的设计语言，以及可直接实现的 UX/UI 规范，写入 `.ulpi/design/`：针对每个需求的视觉识别（配色、字体、标志性元素）、要构建的设计系统、用户流程与状态、组件说明，以及无障碍约束。明确选择大胆的美学方向，点名禁止“AI 味”设计，并锁定视觉识别，使每个界面和后续会话都保持一致。可使用 browse 技能访问灵感链接，提取真实的设计 DNA。最后产出构建交接内容，交由委派的工程 Agent 实现——这是一个产出规范的 DESIGN-SPEC 技能，绝不生成生产用的界面代码。适用于新功能、重设计或设计系统工作，构建应遵循已锁定的规范。

P

paper

bergside / awesome-design-skills

具有纸张纹理和印刷风格的设计，采用简约配色、清晰的衬线/无衬线字体和触感表面质感

L

layout-grid

owl-listener / designer-skills

定义响应式网格——列、间距、外边距和断点行为。在建立页面结构时使用。组件内部的间距标度使用 `spacing-system`；跨设备行为使用 `responsive-design`。

H

heuristic-evaluation

owl-listener / designer-skills

依据 Nielsen 启发式方法和领域标准进行专家评审，并给出严重程度评级。当需要在不招募参与者的情况下获得评审结论时使用。如需主持式的团队反馈环节，请使用 `design-critique`（design-ops）。

S

spacious

bergside / awesome-design-skills

留白充足、内边距统一，并采用网格布局，打造简洁、易读且舒展的界面

D

doodle

bergside / awesome-design-skills

采用手绘、素描风格，搭配涂鸦、手写字体和不规则线条，营造轻松随性的感觉。

D

data-visualization

owl-listener / designer-skills

选择图表类型并设计数据编码——标记、坐标轴、标签以及无障碍的图表样式。用于以图形方式呈现数据。只负责图表选择与编码；分类配色方案本身属于 `color-system`。

C

creative

bergside / awesome-design-skills

为落地页和创意项目打造俏皮、有角色感的设计，采用富有表现力的字体和大胆的图形

G

gradient

bergside / awesome-design-skills

平滑的色彩过渡和丰富的渐变表面，为现代、活泼的界面增添视觉层次