Skills

M

mobile-design-ios

ivan-magda / mobile-design-skills

当用户要求构建 iOS 界面、SwiftUI 视图、UIKit 布局、移动端组件或任何 iOS 应用 UI 时使用。也适用于对任何 iOS 界面进行样式设计、重新设计或美化时。涵盖 iOS 26 Liquid Glass 设计语言、层级、动效与平台原生模式。

N

nativewind

dralgorhythm / claude-agentic-framework

用于 React Native 的 NativeWind 4.x 样式。在将 Tailwind 类应用到 RN 组件、配置 NativeWind，或将 Web Tailwind 模式迁移到移动端时使用。

N

nerdzao-elite-gemini-high

sickn33 / agentic-awesome-skills

Modo Elite Coder + UX Pixel-Perfect otimizado especificamente para Gemini 3.1 Pro High. Workflow completo com foco em qualidade máxima e eficiência de tokens.

P

persona-gen

emotixco / claude-skills-founder

创建 3 个各具特色的用户画像，包含一天的生活、可引用的痛点、当前的替代方案、购买行为，以及显示优先服务对象的优先级矩阵。适用于创始人需要确定或描述客户群体的场景。

P

power-bi-themes

julianobarbosa / claude-code-skills

使用 pbi-cli 应用、检查和比较 Power BI 报表主题与条件格式规则。当用户提到 "theme"、"colours"、"colors"、"branding"、"dark mode"、"corporate theme"、"styling"、"conditional formatting"、"colour scale"、"gradient"、"data bars"、"background colour"、"formatting rules"、"visual formatting"，或想更改报表的整体外观，或对特定视觉对象应用数据驱动的格式时，调用此 skill。

P

prototype

paololeonardi / mattpocock-skills

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

R

react-component-generator

jeremylongshore / tons-of-skills-marketplace

'生成 React 组件生成器操作。自动激活技能

在使用 React 组件创建 HTML 邮件模板时使用——欢迎邮件、密码重置、通知、订单确认、简报或事务性邮件。

R

react

magnus919 / agent-skills

将 React 应用作为一个具名工具来操作：检查并诊断 React/Vite 项目，设计组件边界和状态流，实现可访问的响应式 UI，并用项目的测试验证行为。适用于任务明确涉及 React、JSX/TSX、React hooks、React Router、Vite React 配置或 React 构建失败时。不要用于与框架无关的前端战略（改用 frontend-engineering）、浏览器自动化（改用 playwright）、无障碍政策或审计（改用 web-accessibility），或非 React 的移动应用（改用 mobile-development）。

R

roblox-gui

flatbedj / roblox-skills

构建、制作动画或调试 Roblox GUI 元素时使用，包括 HUD、菜单、世界空间 UI 和玩家标签。触发场景：ScreenGui 设置、SurfaceGui 或 BillboardGui 定位、UDim2 尺寸问题、TweenService UI 动画、响应式缩放、LocalScript GUI 逻辑、ResetOnSpawn 问题，或任何 Frame/TextLabel/ImageButton 布局工作。

S

shortcut-audit

xiaolai / vmark

审计 VMark 代码与开发文档中的键盘快捷键。当被要求审查、核对或优化快捷键，或更新快捷键文档时使用。

S

slidej

h4pplness / slidej

当用户想用 JSON 创建带 动画、切换效果并精确控制元素的 PowerPoint 演示文稿，或将现有 .pptx 逆向解析为结构化 JSON 时使用本技能。SlideJ 是一个命令行工具，可从 JSON 生成 .pptx 并将 .pptx 解析回 JSON，实现完整的往返工作流。触发条件：用户想要带 动画的幻灯片、提到 'slidej'、需要将 .pptx 转为 JSON 以便读取或编辑、想要元素级 动画控制（fadeIn、flyIn、zoom、spin、wipe 等），或需要程序化的幻灯片生成流水线。当用户上传 .pptx 并想了解其结构、修改它或在其基础上重新创建时也会触发。

S

stitch-loop

sickn33 / agentic-awesome-skills

通过自主交接循环模式，指导 Agent 使用 Stitch 迭代构建网站

S

storyscale

membranedev / application-skills

StoryScale 集成。管理数据、记录并自动化工作流。当用户想要与 StoryScale 数据交互时使用。

S

svg-book-illustrator

cat-xierluo / legal-skills

书籍/文章 SVG 配图生成工具，专注于架构图、流程图、层次图等专业技术配图。当用户需要为书籍章节或正式文章生成配图、创建架构图/流程图/层次图，或提到"章节配图"、"书籍插图"、"架构图"、"流程图"时使用此技能。

S

syncfusion-javascript-accordion

syncfusion / javascript-ui-controls-skills

使用 Syncfusion TypeScript Accordion 组件构建可折叠导航面板。在实现垂直手风琴菜单、展开/折叠内容面板、多步骤向导、带动态内容的数据驱动面板、选项卡导航替代方案或嵌套分层内容结构时使用本 skill。涵盖初始化、展开模式、动画、图标、模板、样式、数据绑定以及表单向导等高级用例。

S

syncfusion-javascript-image-editor

syncfusion / javascript-ui-controls-skills

实现用于图像编辑、标注和处理的 Syncfusion TypeScript Image Editor 控件。当用户需要在 TypeScript 应用中添加图像编辑功能、处理滤镜、变换、裁剪或绘图功能时使用。涵盖设置、图像操作、标注、滤镜、无障碍和自定义模式。

S

syncfusion-javascript-listview

syncfusion / javascript-ui-controls-skills

使用 Syncfusion TypeScript 构建响应式 ListView 组件。在处理基于列表的界面、数据绑定、模板、选择处理、嵌套列表、分组、筛选、虚拟化，以及拖放和分页等高级功能时实现本 skill。涵盖单选/多选、复选框、动画、远程数据绑定、自定义模板，以及聊天窗口、联系人列表和数据表格等用例。

S

syncfusion-javascript-menu

syncfusion / javascript-ui-controls-skills

在构建导航层级时，使用 Syncfusion Menu 实现多级嵌套项、数据绑定、动画和事件处理。支持水平和垂直方向、可滚动菜单、无障碍以及实时项管理。

S

syncfusion-winforms-excel-like-tabbar-splitter

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用中实现 Syncfusion TabBarSplitterControl 以创建类似工作簿的选项卡界面的指南。适用于在 Windows Forms 中实现类似 Excel 的选项卡、带拆分器的选项卡页面或多个工作表界面。涵盖 NuGet 安装、TabBarPage 管理、编程方式创建和子控件集成。

S

syncfusion-winforms-splitter-control

syncfusion / winforms-ui-components-skills

在 Windows Forms 应用中实现 Syncfusion SplitterControl 以创建拆分视图和可调整大小的窗格的指南。适用于实现拆分视图、可调整大小的窗格、网格拆分或多个视图之间的同步滚动。涵盖 NuGet 安装、编程方式创建、拆分行为配置和子控件集成。

T

tailwindcss

marcioaltoe / skills

使用 Tailwind CSS v4 和项目令牌为组件设置样式。不包括纯 CSS、CSS-in-JS 和其他实用工具框架。

T

taste-color

madebymustafa / design-taste

为 Agent 构建的界面打造色彩：使用 OKLCH 构建调色板、遵循 60-30-10 原则和单一强调色规则、计算 WCAG 2.2 对比度、设置语义令牌、选择色盲友好配色，并映射深色模式。选择颜色、构建调色板或审查 UI 配色时使用。与 design-taste 核心技能搭配使用。

T

theme-shopify-css-guidelines

niccos-shopify-workspace / shopify-cursor-skills

Shopify 主题的 CSS 命名规范（BEM）、嵌套规则与封装指南。在编写 Shopify 主题区块的 CSS 时使用。

U

ui-actions-policies

serac-labs / serac

构建 ServiceNow UI Actions（表单/列表按钮、上下文菜单）和 UI Policies（条件性必填/可见/只读），使用服务端/客户端脚本和 GlideAjax。修改表单前先运行 snow_analyze_form。

U

ui-uitk

unity-technologies / unity-agent-plugin

理解、编辑和生成使用 flex 布局的 Unity UI Toolkit UXML 与 USS。适用于涉及 UI Toolkit、UIElements、UIDocument、PanelSettings、自定义元素或 UI 运行时绑定的请求。

U

unsplash-asset-images

akillness / jeo-skills

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

U

ux-copy

sickn33 / agentic-awesome-skills

按照随意但礼貌的语气和调性生成 UX 微文案（按钮标签、错误信息、空状态、toast）

V

video-to-superprompt

akillness / jeo-skills

将参考视频转换为极其详细的复刻或灵感提示词。当用户提供、提及、上传、链接或指向某个视频，并要求分析设计、UI、动画、过渡效果、滚动交互、排版、颜色、素材、WebGL/Three.js、叙事、各区块行为，或创建用于复刻页面、应用、交互或动态系统的提示词／文章时使用。

V

visual-inspection-improvement

jord-jd / jord-skills

使用捕获的用户可见状态检查并改进视觉呈现。当被要求视觉审查或改进界面、素材或渲染输出时使用。

V

visualization

aws-samples / sample-strands-agent-with-agentcore

创建应用内交互式图表（柱状图、折线图、饼图）。若要保存为 PNG 或 PDF，请改用 visual-design。

W

wearos-specialist

gitdolucas / wearos-specialist

面向 Wear OS 的实现、评审与调试指导（Kotlin、Jetpack Compose for Wear OS、coroutines/Flow、MVVM、Room/DataStore、导航、tiles/complications、传感器、触觉反馈）。适用于构建或评审智能手表应用、改进可穿戴体验，或解决手表性能/电量/生命周期问题。

W

web-design-guidelines

duc01226 / easyplatform

[Code Quality] 在审查 UI 代码的可访问性、响应式、性能和 UX 最佳实践时使用。

W

widgets-state-security-distribution

josiahsiegel / claude-plugin-marketplace

当用户询问 TUI 组件、表单、对话框、表格、树、图表、命令面板、分屏、滚动条、校验、状态管理、Elm/MVU 架构、异步消息传递、配置、打包、分发、终端安全、转义序列注入、粘贴清洗或生产加固时，应使用此 skill。对于以下情形主动激活：组件设计、校验、虚拟滚动、配置/键位绑定文件、XDG 路径、打包、安全的终端输出和发布就绪。提供：组件契约、状态模式、配置、安全和分发检查清单。

W

wp-theme-dev

wpacademy / wordpress-dev-skills

遵循 WordPress 官方编码标准、主题审核要求、无障碍标准（WCAG 2.1 AA）以及现代 Web 开发最佳实践来开发 WordPress 主题。当用户想要创建、搭建脚手架或开发 WordPress 主题时使用此 skill——包括区块（FSE）主题、经典主题、子主题或混合主题。用户提到 "WordPress theme"、"WP theme"、"block theme"、"FSE theme"、"theme.json"、"template parts"、"style variations"、"child theme"，或想为 WordPress 构建自定义设计/布局时也触发。即使用户只说 "build me a theme for X" 或 "I need a theme"，也使用此 skill。

X

xhs-cover

chenxiachan / xhs-claude-skills

生成小红书封面图（HTML+CSS → Playwright 截图）

A

accessibility

exceptionless / exceptionless

在构建或审查前端组件的无障碍合规性时使用本技能。涵盖 WCAG 2.2 AA 标准，包括语义化 HTML、键盘导航、ARIA 模式、焦点管理、屏幕阅读器支持和表单无障碍。适用于创建新 UI 组件、修复无障碍缺陷、添加跳转链接或焦点陷阱，或确保标记具有包容性——即使用户没有明确提到 "a11y" 或 "WCAG"。

A

agent-workspace

serac-labs / serac

构建 ServiceNow Agent Workspace 配置——工作区、列表、表单、上下文侧边面板、Agent Assist 相似记录查找器，以及 sys_aw_* 表上的工作区专属 UI 操作。

A

ai-design-workflow

flitzrrr / frontend-design-skills

将 AI 工具整合进设计流程、为设计师提供结构化提示、在明确边界内使用创意 AI，以及审查工作流。

A

ai-native-product-designer

slb2248 / ai-ux-skills

AI Native Product Designer 角色——LLM 优先的工作流、AI 代码原型、以 Figma 为终点、自助式调研、结果负责制。适用于定级、工作流设计和 AI 就绪度评审。包含快速参考、完整评分标准附录、检查清单、角色对比。

A

android-native-ui

kemiljk / skills

使用 Compose 或 Views 构建或审查 Android 界面，涵盖 Material 规范、无障碍设计、自适应布局和状态。

A

apple-design-interaction

s1gmamale1 / apple-design-skills

在决定 Apple 风格界面应如何“行为”时使用 —— 即功能性的 UX/交互逻辑，而非外观。导航模型决策（push 与 sheet 与 modal 与 tab 与 popover 与 split-view 与 full-screen、返回行为、深链接、状态恢复）、状态与反馈行为（加载/骨架屏时机、空/错误/禁用状态、乐观 UI、下拉刷新、分页）、感知性能规则（延迟阈值、即时反馈、预取、渐进式加载）、输入/焦点/键盘/指针处理及点击目标可供性，以及滚动即输入决策（电影式滚动何时有益何时有害、滚动可供性、动量、惯性、禁止 scroll-jacking、由滚动驱动的 UX 决策）。属于 apple-design 家族。关键词：navigation model、push pop、sheet vs modal、tab bar、back behavior、deep link、state restoration、loading state、skeleton、empty state、optimistic UI、pull to refresh、perceived performance、latency threshold、prefetch、focus order、keyboard navigation、hit target、affordance、pointer vs touch、scroll as input、scroll affordance、momentum、inertia、scroll-jacking、when cinematic scroll、scroll-driven UX decision。

A

apply-ui-review

xgent-ai / skills

用于根据 UI 验收评审报告修复界面差距；不用于初次 UI 评审、代码评审处置或没有报告的界面开发。逐项对照截图与目标核实后再修复并自检；出现停滞预警时重新思考方案，登记提交后交回复审。

在处理设计 token、CSS 自定义属性和构成原子以下基础的原始值时使用。Quark 是亚原子的构建块。

A

audit-reference-originality

akillness / jeo-skills

根据提供的源参考资料，审查网站或数字体验的原创性及抄袭风险。当 Codex 需要将当前或历史网站输出与参考页面、采集包、截图、文案、品牌、数字、图像、素材、视频、布局、动态效果或代码进行比较，提出有证据支持的风险提示，区分常见视觉风格与独特的抄袭行为，并提出具体修复方案且不作无依据的法律声明时使用。

B

baseline-ui

marcioaltoe / skills

通过修复间距、层级、排版和细微布局问题，快速清理 UI 代码。界面需要快速整理或润色时使用。

B

brand-identity

dhernz / brand-identity

当有人想从零开始创建品牌、品牌套件、设计系统、视觉识别或产品识别时使用——"I need a brand"、"help me brand my product"、"pick colors and fonts for me"、"make it look professional"——尤其适用于没有现成品牌资产的非技术、非设计人员。

B

brand-kit

cognyai / claude-code-marketing-skills

为用户产品构建可移植的 brand-kit.json——颜色、排版、语气——供其他技能（视频、广告创意、落地页）使用。提供多种发现路径，因此无论用户能访问网站的源代码，还是只有公开 URL 或仅有 logo 图像，都能使用。

B

building-native-ui

midudev / autoskills

使用 Expo Router 构建精美应用的完整指南。涵盖基础、样式、组件、导航、动画、模式以及原生标签页。

C

certificate-generator

dkyazzentwatwa / chatgpt-skills

使用可自定义模板为课程、成就和奖项批量创建专业证书。支持 CSV 输入和 PDF 导出。

C

character-reference-sheet

shinchven / nano-banana-skills

生成 3:2 宽高比的角色参考表，包含三列：详细肖像、全身正视图和全身背视图，完全复刻源图的风格和材质细节。

C

clerk-custom-ui

midudev / autoskills

自定义身份验证流程和组件外观——hooks（useSignIn，

C

codebase-to-wordpress-converter

sickn33 / agentic-awesome-skills

用于将任何代码库（React/HTML/Next.js）转换为像素级精准、SEO 优化且动态的 WordPress 主题的专家技能。

C

color-palette-extractor

dkyazzentwatwa / chatgpt-skills

从图像中提取主色，生成调色板，并使用 K-means 聚类导出为 CSS、JSON 或 ASE。

C

creative-director

kelpi-ai / meta-ads-skills

将已批准的创意角度转化为成品、符合品牌的广告图片，并存放到广告账户的图片库中。在 Angle Writer 之后、Media Buyer 之前使用。

D

design-frontend

ravnhq / ai-toolkit

Web UI 的视觉设计系统模式。Tailwind CSS v4 设计令牌

D

design-integration

noobygains / godmode

在采用现有设计系统（shadcn/ui、Material UI、Ant Design、Chakra 等）的代码库中工作时使用，在需要识别项目使用哪套系统时使用，或为缺少设计系统的项目搭建设计系统时使用。

D

design-system-generator

thienanblog / awesome-ai-agent-skills

创建或修订涵盖 token、组件、无障碍、动效和视觉验证的项目设计系统。当交付物是长期留存的设计系统文档而非一次性 UI 修改时使用。

D

design-systems

dhruvjainin / absolute

将你的开发生命周期提升 10 倍的绝佳技能

D

design-systems

maddhruv / absolute

将你的开发生命周期提升 10 倍的绝佳技能