Skills

C

critique-affordance

owl-listener / designer-skills

评估已渲染屏幕上的可操作性：哪些元素看起来可点击、状态是否清晰、CTA 是否明确，以及操作是否容易发现。审查现有屏幕时使用。对于新设计中的目标尺寸和位置，请使用 `fitts-law`（interaction-design）。

R

running-design-reviews

refoundai / lenny-skills

帮助用户有效开展设计评审和设计批评。适用于提供设计反馈、建立设计评审流程、难以评估设计，或希望改进团队讨论设计工作的方式。

F

figma-create-design-system-rules

figma / mcp-server-guide

为用户的代码库生成自定义设计系统规则。用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或想为 Figma-to-code 工作流制定项目专属规范时使用。需要连接 Figma MCP 服务。

U

unsplash-asset-images

mengto / skills

当需要为产品或设计素材（头像、头像照、肖像、大型网站背景和抽象壁纸）挑选高质量 Unsplash 图片，并输出真实的 Unsplash URL 及有关分辨率和宽高比（1:1、4:5、3:4、16:9、9:16）的实用说明时使用。

S

scientific-visualization

davila7 / claude-code-templates

使用 matplotlib/seaborn/plotly 创建论文图表。支持多面板布局、误差线、显著性标记、色盲友好配色，并可导出 PDF/EPS/TIFF，适用于期刊发表级科学绘图。

S

slide-generation

lingzhi227 / agent-research-skills

将已完成的论文转换为演示文稿幻灯片（Beamer LaTeX）或海报。提取关键图表、表格和公式，并为口头报告组织叙事脉络。针对现有工具中的空缺，依据最佳实践进行设计。

S

scroll-scrubbed-visual-sequence

mengto / skills

构建可逆的滚动控制视觉变换，包含固定或粘性舞台、归一化进度，以及视频、图像序列、canvas、SVG 或 DOM 渲染器。适用于主视觉变换、产品组装、界面状态演示、物体旋转、图表或照片序列，这些内容必须随原生滚动向前和向后播放

I

ionic-design

cap-go / capgo-skills

在 Capacitor 应用中构建和审查 Ionic Framework UI（当前为 Ionic 9，Ionic 8 仍很常见），涵盖页面结构（`ion-header`/`ion-content`/`ion-footer`）、列表、现代表单语法（`ion-input`/`ion-select` 上的 `label`/`labelPlacement`）、底部弹出模态框、标签页 + `ion-router-outlet`、CSS 变量主题、深色调色板（`palettes/dark.system.css`、`.ion-palette-dark`）、iOS 与 MD 模式，以及 Ionic 8 -> 9 的重大变更（React Router 6、Vue Router 5、Angular 18-22 zoneless、移除 `ion-picker-legacy`、布尔型 `autocorrect`、`npx @ionic/migrate`）。编写 Ionic 组件、为 Ionic 应用设置主题、修复平台模式样式或升级 @ionic/react、@ionic/vue、@ionic/angular 时使用。不要用于 Konsta UI（konsta-ui）、Tailwind 配置（tailwind-capacitor）、原生 safe-area CSS（safe-area-handling）、键盘尺寸调整（capacitor-keyboard），或 Ionic Appflow/Enterprise 迁移（ionic-appflow-migration、ionic-enterprise-sdk-migration）。

G

good-css

vojtaholik / good-css

用现代 CSS 技术取代断点阶梯、包装元素和脚本。编写、编辑或审查任何形式的样式时都使用，包括纯 CSS、Tailwind 类、StyleX、CSS-in-JS 和内联样式；构建或重新设计页面或组件时也使用，即使用户从未提到 CSS。

I

identify-page-structure

adobe / skills

当页面导入流水线需要识别抓取网页中的区块边界和内容顺序，以导入 AEM Edge Delivery Services 时使用。通过两级分析（区块，然后是每个区块中的内容序列）输出有序的区块列表、各区块内的内容顺序以及候选区块类型注释。不要直接调用——由 page-import 作为流水线步骤调用。

V

vtex-io-react-apps

vtex / skills

在 VTEX IO 应用的 react/ 下构建 React 组件或在 store/ 中配置商店区块时使用。涵盖 interfaces.json、用于 Site Editor 的 contentSchemas.json、管理应用的 VTEX Styleguide，以及店面样式的 css-handles。适用于创建自定义店面组件、管理面板、pixel 应用，或在 VTEX IO react builder 生态系统中进行任何前端开发。

M

motion-designer

dylantarre / animation-principles

设计视觉动态系统、制作动画规格，或设计师需要关于打造优美且有意义的动态效果的指导时使用。

F

frontend-design

customware-ai / skills

为构建现代、视觉干扰少、轻盈且不落俗套的应用 UI 提供严格的前端设计规范。创建或修改前端 UI、React 组件、shadcn/ui 主题、Tailwind 样式、应用布局或首版产品界面时使用。此技能补充 CPQ、CRM 等垂直领域技能及类似应用构建技能：遵循所选领域技能的工作流和布局要求，再执行本技能通用的视觉规则，包括符合品牌的主题、宽裕留白、字体、对比度、圆角、阴影、表面层级、默认不使用卡片和侧边栏，以及避免反模式。

D

display-glasses-with-jetpack-compose-glimmer

android / skills

提供开发适用于显示设备的 Android XR 投影应用的指南

C

css-border-gradient

mengto / skills

为高端网页界面添加低调的渐变边框效果。适用于卡片、定价面板、导航栏、模态框、按钮或主视觉区域需要精致边缘高光而非醒目光晕的场景。

I

isometric-animation

iart-ai / explainer-video-skills

当用户要求“制作等距动画”“构建 2.5D 等距场景”“创建等距信息图”“为爆炸图制作动画”“制作等距城市／堆叠构建”“以等距视角展示堆叠层”“为方块添加挤出深度”或“为等距场景添加轻柔的镜头漂移”时使用此技能。涵盖 CSS 3D 变换、SVG 等距平面，以及用于真正 3D 等距效果的 Three.js OrthographicCamera；无需构建步骤。

B

build-threejs-scroll-worlds

mengto / skills

构建内容丰富、由滚动控制的实时 Three.js 体验，将其呈现为一个持续存在的 3D 世界，其中摄像机、光照、氛围、材质、对象、DOM 故事和交互随编排的章节不断演变。适用于 3D 滚动叙事、滚动驱动的 WebGL 世界、摄像机旅程、交互式作品集、产品故事、展览、讲解内容、游戏或电影微型网站、空间叙事，以及通过原生滚动穿行于同一连续空间的多场景网站。不局限于落地页。

T

tailwind-design-system

sickn33 / agentic-awesome-skills

使用 Tailwind CSS 构建可用于生产环境的设计系统，涵盖设计令牌、组件变体、响应式模式和无障碍设计。

M

matterjs

mengto / skills

在使用 Matter.js 实现 2D 物理交互时使用，包括设置 Engine/World、配置 Render/Runner、添加刚体和约束，以及构建适合滚动和交互的画布场景。

M

marquee-loop

mengto / skills

使用重复项目实现无缝无限跑马灯循环

M

macos-development

rshankras / claude-code-apple-skills

提供全面的 macOS 开发指导，包括 Swift 6+、SwiftUI、SwiftData、架构模式、AppKit 桥接和 macOS 26 Tahoe API。适用于 macOS 代码审查、最佳实践、UI 审查或平台专属功能。

A

axiom-swiftui

charleswiltgen / axiom

构建、修复或改进任何 SwiftUI UI 时使用——包括视图、导航、布局、动画、手势、调试、iOS 26 功能、iPhone Duo、视图级性能和功能架构。

W

wcag-accessibility-audit

mastepanoski / claude-skills

依据 WCAG 2.1/2.2 指南进行全面的网站无障碍审计。按照 4 项 POUR 原则（可感知、可操作、可理解、稳健）评估符合情况，涵盖 A、AA、AAA 一致性级别。

I

interfaces-that-feel

owl-listener / designer-skills

从情感共鸣的角度审视技术上正确但显得平淡的 UI，并针对文案、动效和交互层提出改进方案。适用于设计测试表现良好但给人的感受冷淡时。关于润色与感知的论证，请使用 `aesthetic-usability`（ui-design）。

L

legal-page-generator

kostja94 / marketing-skills

用于构建 Legal Page 的弃用兼容条目。此页面现由 Pagina 维护；请安装并使用 page-builder 构建新的 Legal Page

C

company-logos

mengto / skills

使用 Iconify Simple Icons 徽标（64x64）代替文字徽标

R

responsive-patterns

yonatangross / orchestkit

为 React 应用进行响应式设计，涵盖 Container Queries、流体排版、cqi/cqb 单位、subgrid、内在布局、折叠设备和移动优先模式。构建响应式布局或容器查询时使用。

G

glass-dark-ui

mengto / skills

构建深色模式的玻璃拟态界面，采用清晰易读的对比度、磨砂表面和伪元素遮罩实现的渐变边框。用户要求玻璃卡片、深色磨砂主视觉区、模糊面板，或带渐变／发光边框的深色 UI 系统时使用

T

terms-page-generator

kostja94 / marketing-skills

用于构建 Terms Page 的弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 来构建新的 Terms Page。

C

container-lines

mengto / skills

添加带有迷你角落方块的垂直容器尺寸参考线，打造精确、结构清晰的网页布局。适用于添加容器线、尺寸布局参考线、垂直边界线、编辑网格标记或小型角方框装饰细节。

I

image

vercel-labs / json-render

json-render 的图像渲染器，通过 Satori 将 JSON 规范转换为 SVG 和 PNG 图像。在使用 @json-render/image、根据 JSON 生成 OG 图像、创建社交卡片或渲染 AI 生成的图像规范时使用。

T

tailwindcss

mindrally / skills

精通 TailwindCSS 实用优先样式设计和响应式设计模式

S

stitched-full-page-capture

mengto / skills

为延迟加载、滚动动画、Framer、WebGL/canvas 或大量使用显现效果的网页，捕获或修复可靠的整页截图。当整页截图为空白、灰色、白色、内容稀少、只显示一小条内容、与正常滚动视频不符，或需要从可信的整页图像中提取文章证据或章节裁剪图时使用。

E

excalidraw-skill

lingzhi227 / agent-research-skills

通过 MCP 工具和实时画布同步，以编程方式创建、编辑和完善 Excalidraw 图表的画布工具包。适用于 Agent 需要：(1) 在实时画布上绘制或布局图表；(2) 使用 describe_scene 和 get_canvas_screenshot 查看自身作品并迭代完善图表；(3) 导出/导入 .excalidraw 文件或 PNG/SVG 图像；(4) 保存/恢复画布快照；(5) 将 Mermaid 转换为 Excalidraw；或 (6) 执行元素级 CRUD、对齐、分布、分组、复制和锁定。需要运行中的画布服务器（EXPRESS_SERVER_URL，默认值为 http://localhost:3000）。

C

css-alpha-masking

mengto / skills

使用 linear-gradient 应用 CSS Alpha 遮罩，实现水平或垂直边缘渐隐（mask-image 和 -webkit-mask-image）。用户要求 Alpha 遮罩、边缘渐隐或 CSS 遮罩渐变时使用

S

sf-lwc

jaganpro / sf-skills

使用 PICKLES 方法论和 165 分制评分的 Lightning Web Components。以下情况触发：用户创建/编辑 LWC 组件、处理 lwc/**/*.js、.html、.css、.js-meta.xml 文件，或询问 wire service、SLDS 或 Jest LWC 测试。以下情况不要触发：Apex 类（使用 sf-apex）、Aura 组件或 Visualforce。

Cloudflare 产品设计指南。在设计、实现或审查 Cloudflare 控制面板界面、Kumo UI、响应式样式、对话框或前端测试时使用。

A

aceternity-ui

secondsky / claude-skills

100 多个适用于 Next.js 和 Tailwind 的动画 React 组件（Aceternity UI）。用于 Hero 区块、视差、3D 效果，或遇到动画、shadcn CLI 集成错误时。

M

msw-ui-kit

msw-git / msw-ai-coding-plugins-official

打包的 UI 素材套件——来自官方 MSWPackages 素材、精致且视觉统一的 MSW UI。当用户希望 UI 好看／精致／漂亮／一致／具备游戏品质，要求主题化界面或主题化部件（边框、卡槽、仪表、箭头、图标），或需要原生组件所缺少的交互控件时使用。（1）7 套主题 RUID 调色板，取自公开世界的 UI 资源包：包含带 RUID 的部件、原生尺寸、九宫格类型和按钮状态，无需安装即可用作 UIBuilder 的 image_ruid，并附 130 多个示例与官方包界面（背包、商店、排行、HUD、对话框）的实体树摘要。（2）预制控件：复选框、单选按钮、开关、切换按钮组、下拉框、分页、进度条、滚轮选择器、时间选择器、数字键盘、加载指示器。

W

web-design-guidelines

ehmo / platform-design-skills

Web 平台设计与无障碍指南。适用于构建 Web 界面、审计无障碍功能、实现响应式布局或审查 Web UI 代码。涉及 HTML、CSS、Web 组件、WCAG 合规性、响应式设计或 Web 性能的任务均可触发。

S

shader-glsl

iart-ai / webgl-animation-skills

当用户要求“编写片段着色器”“制作 GLSL 渐变/噪声/等离子背景”“创建图像转场（溶解、位移、故障效果）”“添加失真或色差”“构建 SDF 形状着色器”“使用 uniforms 配置 Three.js ShaderMaterial”或“进行 GPU 后期处理”时使用此技能。涵盖 GLSL 片段着色器、噪声/fbm、SDF、域扭曲、转场和 Three.js 集成

A

atmosphere-background

mengto / skills

创建暗调氛围背景，包含漂浮的垂直光褶皱、屏幕混合发光效果，以及集中于角落或下边缘的光晕。

E

editorial-tech

mengto / skills

将编辑类杂志的版面构图与精确的产品技术细节相融合，采用不对称网格、电影感媒体横幅、等宽实用标签和克制的强调色。

G

globe-gl

mengto / skills

在使用 WebGL/ThreeJS 实现 globe.gl（Globe.GL）3D 地球数据可视化时使用，包括设置、数据图层（点、弧线、多边形、标签），以及在纯 HTML 或 React 中的集成模式。

V

vantajs

mengto / skills

在使用 Vanta.js 添加动画 WebGL 背景效果时使用，包括设置、参数、调整大小、性能优化，以及在 React/Next.js 中的集成。

U

ui-components

yonatangross / orchestkit

shadcn/ui 和 Radix Primitives 的 UI 组件库模式。适用于构建无障碍组件库、自定义 shadcn 组件、使用 Radix 无样式原语或创建设计系统基础。

B

business-design

owl-listener / designer-skills

阅读财务数据、梳理竞争格局，并以价值为核心阐述设计决策。向商业利益相关者说明设计理由时使用。实际谈判请使用 `design-negotiation`（designer-toolkit）。

当 PDF 的视觉质量和设计风格很重要时，使用此技能。创建（从头生成）：“制作 PDF”“生成报告”“撰写提案”“创建简历”“精美 PDF”“专业文档”“封面页”“润色 PDF”“可交付客户的文档”。填写（完成表单字段）：“填写表单”“填写此 PDF”“完成表单字段”“将值写入 PDF”“此 PDF 有哪些字段”。重新排版（为现有文档应用设计）：“重新排版此文档”“应用我们的风格”“将此 Markdown/文本转换为 PDF”“让此文档更美观”“重新设计此 PDF”。此技能使用基于令牌的设计系统：根据文档类型确定颜色、排版和间距，并贯穿每一页。输出可直接打印。外观重要时优先使用此技能，而不只是需要任意 PDF 输出时使用

B

background-grid-webgl

mengto / skills

创建具有渐隐线条、细微粒子雾、缓慢向前漂移和轻柔摄像机视差效果的透视 WebGL 背景网格。

T

tesseract-design

mirage-hq / tesseract

将海报、社交媒体图形、幻灯片布局、图表以及网页/UI 模型等静态视觉设计创建并修订为可编辑的 Tesseract 组合和渲染后的 PNG。交付内容为设计图像时使用。

S

skeuomorphic-ui

mengto / skills

创建拟物化 Web UI 界面，采用分层渐变、叠加的内外阴影、反光渐变边框、微纹理，以及浮雕文字或图标细节。用户要求打造按压感、雕刻感、触感、真实质感、软塑料、软金属或高端实体界面风格时使用。

U

unicorn-studio

mengto / skills

用于在网页中嵌入和自定义 Unicorn Studio 交互式动画（嵌入、响应式尺寸、性能、与 UI 的图层叠放及回退方案）。

A

agency-grid-layout-minimal

mengto / skills

创建极简的代理机构设计系统，采用严谨的编辑网格、超大字体、低调的大写功能标签、克制的图像区块和细腻的结构细节。

G

globe-particles

mengto / skills

创建类似地球的 3D 粒子可视化效果，包含密集发光的球形核心和较细的轨道环或扁平圆盘。当设计需要使用真实 WebGL/Three.js 粒子渲染的精致行星、轨道或合成数据地球效果时使用；不适用于通用星空效果或整页布局更改。

H

html-to-interaction-prompts

mengto / skills

将用户提供的 HTML 页面或生成的 HTML 参考转换为配有截图的文章，其中包含多个可复用的交互提示词。用户提供 HTML 文件、导出的页面、generated-page.html 或本地/线上参考，并要求提取动画/交互、创建提示词、为每个提示词截图、将其添加到文章或提交生成的文章/资源时使用。

P

privacy-page-generator

kostja94 / marketing-skills

用于构建 Privacy Policy Page 的已弃用兼容入口。此页面现由 Pagina 维护；安装并使用 page-builder 来构建新的 Privacy Policy Page。

D

dither-background

mengto / skills

创建深色单色程序化背景，包含放大的方形像素和清晰可见的 Bayer 风格有序抖动。适用于页面需要近黑色氛围抖动底纹、宽阔有机波浪或云团，以及衬托框架 UI、主视觉内容或数据叠加层的克制灰白色高光时。

I

image-first-grid-layout

mengto / skills

创建图像主导的网格设计系统，包含满版摄影、结构引导线、锚定内容块和克制的技术叠加元素。

T

tailwind-patterns

sickn33 / agentic-awesome-skills

Tailwind CSS v4 原则。CSS 优先配置、容器查询、现代模式和设计令牌架构。

A

awwwards

juliobsz / skills

根据“给我做一个作品集，我叫 Ana”这类一句话提示词，构建达到获奖水准的网站。以赢得 Awwwards Site of the Day 的网站为质量标准。涵盖概念、艺术指导、字体设计、动态编排、WebGL、页面转场、真实内容、SEO、无障碍和性能，随后在浏览器中进行视觉 QA。默认使用 Next.js；动画密集型静态展示网站使用 Astro；也可使用项目已有技术栈。适用于作品集、工作室或代理机构网站、个人网站、产品或品牌发布、需要令人印象深刻的落地页，以及任何要求打造获奖级、高端、沉浸式、有创意或“疯狂”网站的请求。若只需评分或审查网站而不做修改，请使用 /jury。