Skills

L

landing-page

shawnpang / startup-founder-skills

当用户需要创建、评审或优化着陆页以提升转化时使用，包括改写标题、安排 CTA、重构布局或撰写完整页面文案。

M

modern-web-design

kuse-ai / kuse-skills

使用专业设计系统创建现代化响应式网站。生成完整的 HTML/CSS/JS 网站，包含 Tailwind CSS、现代动画和移动优先的响应式设计。适用于落地页、作品集、商业网站和 SaaS 应用。

S

sticker-design-generation

eachlabs / skills

使用 each::sense AI 生成定制贴纸设计。制作模切贴纸、乙烯基贴花、可爱风设计、品牌标志、表情包、笔记本电脑贴纸、保险杠贴纸、手账贴纸、全息效果和完整贴纸套装。

S

syncfusion-angular-stepper

syncfusion / angular-ui-components-skills

创建并配置 Syncfusion Angular Stepper 组件，用于多步骤工作流、向导、表单和引导流程。实现逐步导航、配置步骤验证、处理步骤事件，或使用图标、标签和模板自定义步骤外观时使用此技能。涵盖基于 Stepper 的向导界面、进度跟踪工作流和多表单配置。

A

autocad-dwg-redraw

pengxiaoan / autocad-dwg-redraw-skill

根据源 DWG、由 PDF 派生的中间 DWG，或搭配权威尺寸和绘图要求的栅格参考图，重建并验证 AutoCAD 图纸。当 Codex 需要分析并精确复现 .dwg、将 PDF 转换为经过验证的中间 DWG 后再精确重绘，或将图像和尺寸数据转换为参数驱动的 AutoLISP/AutoCAD 几何图形及可选 3D 实体时使用。

B

brand-agency

glebis / claude-skills

将 Agency 的品牌颜色和字体应用于演示文稿、SVG 图形、文档和 Web 界面等产物。当涉及品牌颜色、视觉格式、粗野主义新风格或 Agency 设计规范时使用此技能。关键词：品牌塑造、企业形象、视觉形象、样式、品牌颜色、字体、视觉格式、视觉设计、粗野主义新风格。

S

scenario-unity-ui

scenario-labs / skills

在 Unity 6.3 中构建或修复游戏 UI 时使用：主菜单、设置界面（分辨率、画质、音量、按键重映射）、HUD、生命值条、小地图框；选择 uGUI 或 UI Toolkit，或混合使用；“手机上的 UI 缩放不正确”、纵向屏幕到 4K、Canvas Scaler、锚点、布局组崩溃、排序顺序、UXML/USS、数据绑定、TextMeshPro 或 UI Toolkit 字体缺少字形、本地化菜单、手柄导航、UI 绘制调用、画布重建峰值、UI 测试，或捕获 UI 进行检查。

S

syncfusion-angular-toolbar

syncfusion / angular-ui-components-skills

使用 Syncfusion 创建动态、响应式的 Angular 工具栏。配置按钮项、分隔符、输入组件、模板、样式、工具提示、链接和响应式滚动。支持自定义、无障碍功能、键盘导航、RTL 模式，以及在 Angular 应用中嵌入组件，以构建专业的工具栏界面。

T

to-spring-or-not-to-spring

raphaelsalaja / skills

审查动画代码，检查计时函数选择是否正确。适用于审查动效实现、调试感觉不对的动画，或在弹簧与缓动之间进行选择。输出文件:行号形式的发现。

D

design-spec-extraction

pedronauck / skills

使用 7 遍串行架构和交叉验证，从视觉输入中提取全面、可直接用于生产的 JSON 设计规范。适用于将截图、模型图或设计导出内容转换为结构化设计令牌、组件规范、无障碍分析和开发交接材料。

P

pw-redbook-image

plugins-world / pw-skills

将文章内容拆解为小红书风格的系列配图。支持从 URL、文件或文本生成封面图、内容图和结尾图，自动创建提示词并调用图片生成工具。

R

replit-ui-skills

ihlamury / design-skills

Replit 的 UI 设计系统。用于构建具有 Replit 风格的界面——浅色模式、Inter 字体、4px 网格。

S

snapcn

shadcn-labs / snapcn

使用 snapcn 构建 Remotion 视频——snapcn 是一个可复制粘贴的动画组件与时间线驱动 UI 原语的 shadcn registry。适用于在 Remotion 项目中编排视频场景、添加文字动画、转场、背景、UI 区块、品牌/社交卡片或完整合成。触发词包括 "snapcn"、"视频组件"、"添加动画"、"文字揭示"、"产品演示视频"、"remotion 组件"、"终端模拟器"、"设备外框"、"手机样机"、"硬字幕"、"卡拉 OK 字幕"、"logo 动画"、"发布视频"、"更新日志视频"，以及 UI 原语层："视频输入"、"输入光标"。即使用户没有提到 snapcn，当他们需要用于 Remotion 的精致视频原语时也要启用。

S

spotify-ui-skills

ihlamury / design-skills

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

T

to-spring-or-not-to-spring

raphaelsalaja / skill

审查动画代码，检查计时函数选择是否正确。适用于审查动效实现、调试感觉不对的动画，或在弹簧与缓动之间进行选择。输出文件:行号形式的发现。

A

avalonia

markpitt / claude-skills

为使用 Avalonia UI 框架开发跨平台桌面应用提供专家指导。适用于构建、调试或优化 Avalonia 应用，包括 MVVM 架构、XAML 设计、数据绑定、样式、主题、自定义控件，以及面向 Windows、macOS、Linux、iOS、Android 和 WebAssembly 的跨平台部署。

H

html-to-image

html2png / skills

使用 HTML/CSS 生成清晰、高质量的图像，呈现精准排版和几何布局。适用于社交卡片、图表、证书、UI 模型图、代码截图，以及任何需要清晰文字、精确对齐或类矢量精度的图像。与直接生成光栅图像相比，AI 更擅长将对称、像素级精准的布局设计为 HTML。支持 Tailwind CSS、Google Fonts、图标库及任何基于 Web 的设计资源。

O

onboarding-wizard-design

rampstackco / claude-skills

设计首次使用的产品引导向导，帮助用户顺利找到 aha 时刻，又不让他们感到不堪重负。涵盖步骤架构、渐进式披露、退出方式、完成激励和流失衡量。探讨教程过载（一次性展示所有内容）、便于跳过但内容空泛（跳过引导后导致用户流失）和循序渐进地展示内容（在恰当时机展示恰当内容）等模式。适用于引导向导、产品引导、首次使用体验、注册流程、激活流程、FRX、价值实现时间和 aha 时刻设计。当激活率低、用户跳过引导后不再回来、首次规划引导流程，或受众研究显示用户找不到关键功能时，也适用。

R

Real Estate Photo Generation

eachlabs / skills

使用 each::sense API 生成专业房地产摄影、虚拟布景、室内设计视觉图和建筑效果图

S

syncfusion-angular-breadcrumb

syncfusion / angular-ui-components-skills

实现 Syncfusion Angular Breadcrumb 导航轨迹组件的指南。涵盖安装、数据绑定、导航设置、图标、溢出模式和模板自定义。适用于构建显示用户在层级结构中位置的面包屑导航、支持点击父级项进行导航、添加图标以提供视觉提示，或使用模板自定义外观。

S

syncfusion-angular-card

syncfusion / angular-ui-components-skills

实现 Syncfusion Angular Card 组件，包括标题、图像、操作按钮和可配置布局。构建灵活、可复用的卡片界面时使用，涵盖自定义样式、CSS 类和组件集成模式，以结构化卡片格式展示内容。

U

ux-design-systems

hoodini / ai-agents-skills

使用令牌、组件和主题构建一致的设计系统。适用于创建组件库、实施设计令牌、构建主题系统或确保设计一致性。触发词包括 design system、design tokens、component library、theming、dark mode

U

ux-research

rampstackco / claude-skills

规划并执行用户研究，包括研究规划、招募、访谈设计、定性综合分析，以及将研究发现转化为产品决策。当用户希望规划用户研究、设计访谈、招募参与者、开展探索研究或形成性研究，或综合定性研究发现时，使用此技能。适用于用户研究、UX 研究、用户访谈、探索研究、生成性研究、形成性研究、定性研究、用户洞察、研究综合、招募、访谈指南、待完成的工作等主题。当产品决策缺乏用户意见且用户希望解决这一问题时，也适用。

A

angular-best-practices-spartan

alfredoperez / angular-best-practices

Spartan UI（面向 Angular 的 shadcn）最佳实践。涵盖 Brain/Helm 架构、Tailwind 集成和无障碍无头组件。使用 @spartan-ng/brain 和 @spartan-ng/ui 时激活。不要用于 Angular Material、PrimeNG 或其他组件库。与 angular-best-practices 一起安装以获得完整覆盖。

C

casper-design-system

casper-studios / casper-marketplace

Casper Studios 的内部设计系统，用于生成一致且可用于生产环境的 SaaS UI。生成内部工具、客户端应用、仪表板、POC、原型或任何视觉界面的 UI 代码时，都使用此技能，即使只是快速样稿或构件。输出为 React 组件、页面或布局时均应使用。如果用户提到“我们的设计系统”“Casper 风格”“匹配我们的外观”，或要求构建任何类型的应用或界面，请使用此技能。将现有 UI 重新设计或设置主题以匹配 Casper 的视觉风格时也应启用。此技能优先于通用前端设计指南。

D

docs-site-macos

rheinmir / setup

构建美观的 macOS 风格文档网站（单个 HTML 文件），采用液态玻璃表面系统（分层玻璃拟态：不透明度阶梯、模糊等级、边缘高光）、动态 SVG 图表、红黄绿交通灯窗口装饰，以及浅蓝与白色的液态玻璃配色（柔和蓝色渐变背景上的白色玻璃表面，各章节采用不同蓝色调主题）。用户提出为文档/展示页面制作“液态玻璃”“磨砂玻璃”或“半透明 UI”时也触发。用户想创建文档网站、落地页、展示页、作品集、指南、教程网站、功能概览或产品文档时触发，尤其是提及“简洁”“现代”“像 Apple”“macOS 风格”“玻璃”“磨砂”“动态图表”或“单个 HTML 文件”。用户有多个 Markdown 文件，并希望将其呈现为包含多个章节的统一视觉 HTML 页面时也使用。如果用户说“6 个文件”或希望每个主题单独成页，则为每个 wiki 文件生成一个 HTML 文件（index.html 作为概览，加 N 个主题文件），而不是合并为单页。

E

element-plus-vue3

full-stack-skills / vue-ui-skills

提供 Element Plus Vue 3 组件库的全面指南，涵盖安装、组件、主题、国际化和 API 参考。用户咨询 Vue 3 的 Element Plus、需要使用 Element Plus 构建 Vue 3 应用或自定义组件样式时使用。

F

form-strategy

rampstackco / claude-skills

设计转化效果好、验证完善、能抵御垃圾信息并可与下游系统顺畅集成的表单。设计或审核任何表单（联系、注册、结账、多步骤、嵌入式）、规划验证逻辑、应对垃圾信息、选择表单工具或提升表单转化率时，使用此技能。适用于表单设计、表单验证、表单转化、多步骤表单、表单垃圾信息、验证码、蜜罐、表单放弃、注册表单和联系表单等情况。表单完成率低或垃圾信息泛滥时也适用。

G

godot-platform-vr

thedivergentai / game-dev-agentic-skills

面向 VR 平台（Meta Quest、PSVR、SteamVR、Pico）的专业蓝图，涵盖 XR 工具包（OpenXR）、舒适度设置（渐晕、瞬间转向、传送）、动作控制、手部追踪和 90+ FPS 要求。适用于 VR 头显或沉浸式 3D 体验开发。关键词：VR、XR、OpenXR、Meta Quest、晕动症、舒适度、移动方式、XRController3D、注视点渲染。

L

landing-page-vercel

shipshitdev / skills

搭建可投入生产的静态落地页，包含可用的电子邮件收集表单、分析功能和响应式设计。用户提出“创建落地页”“构建落地页”“为产品发布页面”或类似请求时触发。仅在用户明确要求时部署到 Vercel。

U

usability-testing

rampstackco / claude-skills

为现有设计或原型设计规划并开展可用性测试，包括测试设计、任务脚本、主持、观察和结果综合。用户希望测试可用性、开展有主持或无主持测试、验证设计、发现可用性问题或提升任务完成率时，均可使用此技能。触发词包括：可用性测试、有主持测试、无主持测试、任务脚本、出声思考、原型测试、用户测试、设计验证、任务完成。用户已完成某项产品，并希望在发布前了解真实用户能否使用时也会触发。

A

article-icons

smallnest / goal-workflow

使用 itshover.com/icons 的动画风格图标为文章（Markdown、HTML 等）配图。获取简洁的内联 SVG，并将其放置在章节标题、关键概念、列表和提示框处。触发词：/article-icons、配图、给文章配图标、add icons to article、illustrate with icons。

I

ios-taste

pproenca / dot-skills

以用户目标而非像素为出发点，打造有品位的 iOS 18+ SwiftUI 体验。用户要求构建 SwiftUI 视图、屏幕或体验时使用此技能。用户说“构建设置屏幕”“创建详情视图”“好好设计一下”“我希望它有原生应用的感觉”或提出任何 SwiftUI UI 任务时触发。审查 SwiftUI 代码的设计质量，或用户认为输出“像演示稿”“感觉很普通”时也触发。构建任何面向用户的 SwiftUI 视图时，优先考虑触发此技能。

L

lemonsqueezy-ui-skills

ihlamury / design-skills

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

N

neobrutalist-web-designer

curiositech / some_claude_skills

采用纯正新粗野主义美学的现代 Web 应用。醒目的字体、硬朗阴影（无模糊）、粗黑边框、高对比度原色和原始的视觉张力。拓展新粗野主义风格。

S

styling

ui5 / webcomponents

介绍如何自定义和设置 UI5 Web Components 的样式。涵盖 CSS shadow parts、CSS custom states、CSS variables 和标签级样式。用户询问如何更改组件外观、颜色、间距、主题或覆盖样式时使用。

S

swiftui-liquid-glass

steipete / agent-scripts

SwiftUI Liquid Glass：实现、采用、重构并审查正确性、性能和设计。

S

syncfusion-angular-accordion

syncfusion / angular-ui-components-skills

Angular Accordion 组件实现指南，适用于可折叠内容面板、可展开分区、常见问题、分步向导、分步表单、导航菜单或标签式导航。用户提到展开/折叠内容、手风琴布局、分步工作流或层级内容组织时使用此技能。此技能涵盖初始化、展开模式、数据绑定、动态加载、动画、嵌套 Accordion 和实际应用模式。

F

figma-use

thedesignproject / agent-skills

**强制前置条件**——每次调用 `use_figma` 工具之前，你都必须先调用此技能。绝不在未加载此技能的情况下直接调用 `use_figma`，否则会导致常见且难以调试的失败。当用户希望在 Figma 文件上下文中执行写操作或需要 JavaScript 执行的特殊读操作时触发，例如创建／编辑／删除节点、设置变量或 token、构建组件及其变体、修改自动布局或填充、将变量绑定到属性，或以编程方式检查文件结构。

I

ios-design-review

garrytan / gstack

针对真实硬件上的 iOS 应用进行视觉设计审查。（gstack）

I

ios-hig

johnrogers / claude-swift-engineering

在设计 iOS 界面、实现辅助功能（VoiceOver、Dynamic Type）、处理深色模式、确保触控目标足够大、提供动画／触觉反馈或请求用户权限时使用。确保符合 Apple 的 iOS 人机界面指南。

I

ios-storyboard

pproenca / dot-skills

适用于 iOS 26 / Swift 6.2 诊所代码库中 Storyboard 和 Interface Builder 维护的旧版互操作技能。仅用于迁移或维护现有 storyboard 界面，不适用于新的 SwiftUI 诊所功能开发。涉及 Auto Layout、segues、size classes、IB accessibility、Storyboard 合并冲突以及从 Storyboard 迁移到 SwiftUI 的任务时触发。

M

mobile-app

nexu-io / open-design

在页面上的像素级精准 iPhone 15 Pro 边框内渲染移动应用屏幕。通过复制种子文件 `assets/template.html` 并粘贴 `references/layouts.md` 中的一种屏幕原型构建。需求提到“移动应用”“iOS 应用”“Android 应用”“手机屏幕”或“应用 UI”时使用。

P

product-frontend-design

mosif16 / codex-skills

端到端审查并设计 SaaS／产品营销网站和前端界面：阐明价值、理顺层级，并实现有特色、达到生产级标准且避免通用 AI 美学的 UI。

S

shop-theme-development

bagisto / agent-skills

在 Bagisto 中开发商店主题。创建自定义店面主题、修改商店布局、构建主题包，或处理应用面向客户一侧的 Vite 资源时启用。

S

syncfusion-angular-listview

syncfusion / angular-ui-components-skills

Syncfusion Angular ListView 组件实现指南。构建具有数据绑定、分组、模板、选择、事件、拖放或虚拟化功能的交互式列表时使用此技能。此技能涵盖入门、数据绑定、自定义、选择、高级功能、专用用例、样式设置和无障碍支持，帮助构建可用于生产环境的列表界面。

S

syncfusion-angular-timeline

syncfusion / angular-ui-components-skills

用于展示连续事件和里程碑的 Syncfusion Angular Timeline 组件。可创建垂直或水平时间线，并配置对齐方式（Before、After、Alternate、AlternateReverse）、自定义内容、对侧内容、事件处理程序，以及点样式、连接线外观和条目模板等高级自定义选项。适用于实现产品路线图、项目时间线、活动动态、职业发展时间线及任何连续事件可视化。

A

adhd-design-expert

curiositech / some_claude_skills

运用神经科学研究和 UX 原则，为 ADHD 大脑设计数字体验。擅长降低认知负荷、解决时间盲视问题、通过多巴胺驱动参与度，并提供富有同理心的

C

canva-implement-feedback

canva-sdks / canva-skills

在 Canva 设计中落实审阅者反馈。读取所有评论串，归纳审阅者的诉求，直接进行明确的修改，并标记需要人工决定的事项。适用于用户要求“落实我演示文稿中的反馈”“处理设计评论”“应用审阅反馈”“修复演示文稿中的评论”或“落实反馈”时

G

genpage

microsoft / power-platform-skills

使用 React v17、TypeScript 和 Fluent UI V9 为模型驱动应用创建、更新和部署 Power Apps 生成式页面。协调专用 Agent 进行规划、实体创建和代码生成。当用户要求在现有 Microsoft Power Apps 模型驱动应用中构建、检索或更新页面时使用。用户提到“generative page”“page in a model-driven”或“genux”时使用。不要用于通用或独立的 React 或 Web 应用、网站或仪表板（包括 Power Apps 代码应用）、Power Pages、画布应用或 Power Automate；如果用户排除 Power Platform、Dataverse 或模型驱动应用（例如“no Power Platform”），也不要使用。生成式页面只能在模型驱动应用内运行，此技能无法搭建独立项目。此技能可独立使用，无需 /app-builder；但如果用户想构建完整应用（表、表单、视图、站点地图），而非为现有应用创建页面，请改用 /app-builder

G

github-ui-skills

ihlamury / design-skills

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

H

html-doc

owainlewis / blueprint

根据现有的 Markdown PRD 或技术设计文档，生成精致的静态 HTML 阅读视图。用户要求渲染、展示、可视化 PRD 或设计文档，或让其更便于在浏览器中阅读时使用。

M

md-to-html

rheinmir / setup

Render Markdown thành standalone HTML — Mermaid, Chart.js, styled tables, TOC

S

svg-design

tryopendata / skills

生成和编辑 SVG 徽标、图标及图形。用于创建 SVG 文件、设计徽标或图标、编写路径数据、优化 SVG、构建图标系统、制作 SVG 元素动画，或修改现有矢量图形。涵盖路径命令、基本形状、样式、无障碍设计、渐变、蒙版、精灵图、优化和动画（CSS 关键帧、GPU 加速、错峰、缓动及 SVG 专用技术）。

S

syncfusion-angular-3d-chart

syncfusion / angular-ui-components-skills

使用 Syncfusion 在 Angular 应用中实现交互式 3D 图表。本指南涵盖设置、图表类型（条形图、柱形图及堆叠变体）、自定义、数据绑定、坐标轴配置、图例、工具提示、选择、数据标签、外观样式、尺寸、打印/导出和无障碍功能。用户需要创建、配置或自定义 3D 图表可视化时使用此技能。

U

ui-ux-pro-max

darkmatter / skills

面向 Web 和移动端的 UI/UX 设计智能工具。包含 50 多种风格、161 种调色板、57 种字体搭配、161 种产品类型、99 条 UX 指南，以及适用于 10 种技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS）的 25 种图表类型。操作：规划、构建、创建、设计、实现、审查、修复、改进、优化、增强、重构和检查 UI/UX 代码。项目：网站、落地页、仪表盘、管理面板、电子商务、SaaS、作品集、博客和移动应用。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单和图表。风格：玻璃拟态、黏土拟态、极简主义、粗野主义、新拟态、便当网格、深色模式、响应式、拟物化和扁平设计。主题：色彩系统、无障碍、动画、布局、排版、字体搭配、间距、交互状态、阴影和渐变。集成：shadcn/ui MCP，用于组件搜索和示例。

E

extract-site

rheinmir / setup

提取网站或文档站点内容，并转换为整洁的 Markdown

F

frontend-component-build

rampstackco / claude-skills

构建可用于生产环境的前端组件，提供无障碍标记、合理的 props、明确的状态和经过测试的行为。用户想从头构建组件、重构现有组件、设计组件 API，或实现具备适当状态和无障碍性的 UI 元素时，使用此技能。适用于构建组件、创建按钮、创建模态框、创建表单输入、组件 API、props 设计、组件状态、重构组件、无障碍组件等场景。也适用于将设计实现为可复用的 UI。

I

infographic-creator

antvis / infographic

基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。

使用 @nuxt/ui v4 构建 UI，包含 125 多个支持无障碍访问的 Vue 组件，并提供 Tailwind CSS 主题定制。适用于创建界面、定制符合品牌风格的主题、构建表单，或组合仪表盘、文档网站和聊天界面等布局。