Skills

A

android-wear

fandhe-ai / agent-reference-skills

Wear OS（Kotlin）的 androidx.wear API 和 Watch Face Format（WFF）参考。涵盖 Wear Compose 的 CurvedLayout、旋转输入、环境模式、单手手势、ScalingLazyColumn；Tiles／Material3TileService／ProtoLayout；ComplicationDataSourceService 和 ComplicationData 类型；Health Services（MeasureClient、ExerciseClient、PassiveMonitoringClient）；Data Layer（ChannelClient）；以及 WFF 的 XML 元素、表达式、复杂功能插槽、用户设置和 Watch Face Designer。

A

angular-material

claude-dev-suite / claude-dev-suite

用于 UI 组件、主题和自定义组件的 Angular Material 与 CDK。涵盖独立 Material 组件和自定义主题。使用场景：用户提到 "Angular Material"、"Material CDK"、"mat-table"、"mat-dialog"、"Angular UI components"、"Material theming"、"Angular CDK"。不适用于：Bootstrap —— 请使用 CSS 框架技能，或 PrimeNG 等其他 Angular UI 库

A

arabic-ui

jkc66 / arabic-ui

地道的阿拉伯语写作、UI/UX 微文案和 RTL 工程。用于撰写、翻译或审阅阿拉伯语界面、仪表板、文章、文档或文案。遵循古典句法流畅度，消除翻译腔（العرنجية），应用 Al-Jahiz 的精炼原则，并处理阿拉伯语复数和双向排版。

A

archscribe

lazypay / archscribe

创建高级手绘风格的架构图、工作流图和泳道图，支持深色霓虹或浅色纸面风格，可编辑的 Excalidraw 源文件、PNG/SVG 预览、动图 GIF/MP4 输出以及交互式 HTML。当用户要求 岚叔动态架构图、手绘架构图、Excalidraw 风格图、DailyDoseOfDS 风格技术图、动态流程图、泳道图、系统可视化，或希望复刻并提升参考架构图时使用。

A

audit-accessibility

kensaurus / skills

通过 playwright-cli 进行 WCAG 2.2 审计：抓取每个页面、注入 axe-core、测试键盘导航、对比度、ARIA 标签、标题层级。在"audit accessibility"、"check a11y"、"WCAG audit"、"check keyboard nav"或"test screen reader"时使用。

A

audit-ux

kensaurus / skills

基于 NN/g 启发式、微文案审查和 Google HEART 的逐页 UX 审计。适用于评估可用性、审计微文案或评估认知负荷。跨页流程/信息架构 → audit-ux-journeys。

A

auto-animate

jackspace / claudeskillz

经过生产验证的 AutoAnimate（@formkit/auto-animate）配置。这是一个零配置的即插即用库，当 DOM 元素被添加、移除或移动时自动添加平滑过渡，gzip 后约 3 KB，无依赖，内置 prefers-reduced-motion 支持。涵盖 useAutoAnimate React Hook、其对稳定 key 和始终渲染的父元素的要求，以及 SSR 安全的用法。适用于在不编写动画代码的情况下为动态列表、筛选和排序界面、手风琴、Toast 通知或表单校验提示添加动画，适用于使用 Vite + React + Tailwind，适用于部署到 Cloudflare Workers Static Assets，或遇到动画库引发的 SSR 错误时。手势、滚动联动效果或复杂序列请改用 motion 技能。

B

baoyu-cover-image

jst-well-dan / skill-box

生成文章封面图，包含 4 个维度（类型、风格、文字、情绪）和 20 种手绘风格。支持电影宽幅（2.35:1）、宽屏（16:9）和方形（1:1）比例。当用户要求「generate cover image」「create article cover」「make cover」，或提到「封面图」时使用。

B

baoyu-cover-image

makerjackie / jackie-skills-starter

生成文章封面图，提供 5 个维度（类型、配色、渲染、文字、氛围），组合 9 套色彩方案与 6 种渲染风格。支持电影宽幅（2.35:1）、宽屏（16:9）和方形（1:1）比例。当用户要求"生成封面图"、"制作文章封面"或"做封面"时使用。

B

baoyu-infographic

makerjackie / jackie-skills-starter

根据结构化内容和数据生成信息图可视化，并可控制样式/布局。

B

blocks

markomitranic / jotdown

仅在处理文档站点时使用。列出页面可使用的所有纯 Markdown 之外的区块，包括提示框、嵌入内容、插图、代码围栏、表格、布局组件及其样式规则。在页面中添加比 Markdown 更丰富的内容或修改项目主题之前阅读。

C

canvas-design

makerjackie / jackie-skills-starter

使用原创构图与排版，创建高质量的静态视觉设计产物（.png/.pdf）。

C

card-twitter

nexu-io / html-anything

推特金句 / 数据卡，适合配推文

C

carousel-generator

drshailesh88 / integrated_content_os

Instagram 轮播图生成器。根据文本/markdown 输入创建 1080x1080px 品牌化幻灯片。当你需要生成带有 Dr. Shailesh Singh 品牌配色、字体和页脚的 Instagram 轮播图幻灯片时使用此技能。支持 @heartdocshailesh 和 @dr.shailesh.singh 两个账号。

C

chart

markomitranic / jotdown

仅在处理文档站点时使用。使用 `<Chart />` 块在文档页面中插入真实数据图表，可采用品牌配色的柱状图、折线图、面积图、饼图或雷达图。页面需要比较、排名、拆分或跟踪数字，或某段落包含三句数据时使用。

C

children-privacy-notice

mukul975 / privacy-data-protection-skills

为儿童设计与实施符合 GDPR 第 12-14 条、英国 AADC 标准 4 以及 COPPA 第 312.4 条的隐私声明。涵盖平实语言、可视化说明、分层信息、适龄词汇以及互动式声明元素。关键词：儿童隐私声明、透明度、平实语言、可视化、适龄、分层声明。

C

cnil-compliant-cookies

mukul975 / privacy-data-protection-skills

CNIL cookie 指南合规实施指南。引用了 Google 被罚 1.5 亿欧元和 Meta 被罚 6000 万欧元的案例。涵盖接受/拒绝按钮同等醒目、禁止 cookie 墙、6 个月重新同意间隔、必要 cookie 豁免，以及 CNIL 第 2020-091 号决议的详细要求。

C

component-wrapper-architecture

theorcdev / 8bitcn-ui

封装 shadcn/ui 组件的最佳实践。在创建现有 shadcn/ui 组件的 8-bit 风格变体时应用。

C

componentize

howells / skills

整合共享 UI，拆分承担多重职责的文件或抽取包。不适用于重新设计（`chiaroscuro`）、排版（`typecase`）或保持行为的清理（`unslop`）。

D

d2-03-main-menu

softinter-chiangrai / up-ai-skill-training

创建主菜单/导航中心组件，根据所选能力（搜索、创建、保存、删除）动态生成菜单项。提示输入实体名称和可用操作，生成菜单卡片和路由。当用户要求 CRUD 演练的第 2 天第 3 步，或要求为 up-app 构建主菜单时使用。

D

d3-viz

jackspace / claudeskillz

使用 d3.js 创建交互式数据可视化。适用于创建自定义图表、网络图、地理可视化，或任何需要精细控制视觉元素、过渡效果或交互的复杂 SVG 数据可视化。用于制作超出标准图表库能力的定制可视化，适用于 React、Vue、Svelte、原生 JavaScript 或其他环境。

D

dashboard-layout-planner

jeremylongshore / tons-of-skills-marketplace

配置 dashboard layout planner 操作。自动激活技能

D

dashboard

nexu-io / html-anything

固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图

D

deck-blueprint

nexu-io / html-anything

奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒

D

deck-dir-key-nav

nexu-io / html-anything

8 页单色背景，160px display + 4px accent + Mono 箭头列表

D

deck-graphify-dark

nexu-io / html-anything

深夜渐变 + 漂浮 orbs + SVG 力导向图谱 + JetBrains Mono

D

deck-hermes-cyber

nexu-io / html-anything

黑底 + CRT 网格扫描线 + $ 命令行标题 + 薄荷绿大字 + 三档 tag

D

deck-magazine-web

nexu-io / html-anything

电子杂志 × 电子墨水风，WebGL 流体背景 + 衬线 display

D

deck-obsidian-claude

nexu-io / html-anything

GitHub-dark + 紫蓝环境光 + 三色渐变标题 + GitHub 风代码

D

deck-product-launch

nexu-io / html-anything

暗 hero + 亮内容，橙→桃 accent，特性卡 + 定价 + CTA

D

deck-replit

nexu-io / html-anything

Replit Slides 八套主题 (helix/holm/vance/bevel/world/atlas/bluehouse)

D

deck-safety-alert

nexu-io / html-anything

红琥珀警示色 + hazard 条纹 + L1/L2/L3 tier 卡片 + 删除线标题

D

deck-simple

nexu-io / html-anything

通用 horizontal-swipe HTML deck，不要 magazine 调

D

deck-swiss-international

nexu-io / html-anything

16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)

D

deck-xhs-pastel

nexu-io / html-anything

奶油底 + 柔光 blob + 马卡龙圆角卡片 + Playfair 斜体序号

D

deck-xhs-white

nexu-io / html-anything

纯白 + 顶部彩虹 bar + 渐变文字 + 马卡龙软卡片 + 黑底 pill

D

design-anti-slop

prathameshagrawal / design-anti-slop

检测并修复 AI 设计套路——AI 生成的着陆页和仪表盘中常见的趋同风格（紫色／靛蓝渐变、到处使用 rounded-2xl、三栏功能网格、便当盒式仪表盘、空洞而好高骛远的主视觉文案等）。每当用户要求 Claude 构建、生成或制作着陆页、仪表盘或 SaaS UI 原型时，或用户分享现有设计（截图、URL、代码、Figma 链接）并要求评审、反馈、判断“看起来像 AI 生成的吗？”或“让它不那么普通”时，均使用此技能。即使用户没说“套路”，也应触发；例如“帮我做个主视觉区”“这看起来像 AI 做的”“为什么这和其他 SaaS 页面都一样”或“让它更有定制感”等表述都符合条件。如果关注点明确是趋同、千篇一律或 AI 生成感，应优先使用此技能，而不是通用设计评审。

D

design-lounge

susanacharya / design-lounge

根据 Susan Acharya 的 Design Lounge 设计产品 UI，包括配色方案、字体搭配、组件系列、图标、动效和作品简报。用户要求设计、设计系统、UI、视觉风格、配色、颜色、字体、落地页、营销网站、Web 应用、仪表板、管理后台、桌面应用、移动应用、商店、编辑设计、React Native、Flutter、SwiftUI、Compose 或 PWA 应用，或希望完善界面时使用。还涵盖 taste-skill pack 的功能：反套路页面、极简、粗野主义和高端风格、重新设计、图像优先的模型图、Logo 和品牌套件。用户提到 Design Lounge、kit 或作品简报时也使用。

D

design-style

nakanosanku / ohmyskills

当用户要求构建、创建、设计、开发或改进任何前端界面、网页、UI 组件或视觉元素时使用此 skill。包括: - 构建落地页、网站、Web 应用、仪表盘、作品集或任何 Web 界面 - 创建 UI 组件 (按钮、表单、卡片、导航栏、模态框等) - 使用 React、Vue、Next.js、Svelte 或任何前端框架设计页面 - 为现有组件添加样式或改进视觉设计 - 实现特定设计美学 (现代、暗色、极简、粗野主义等) - 用户提到 "frontend"、"UI"、"UX"、"design"、"interface"、"web design" 或 "styling" - 用户要求 "beautiful"、"modern"、"professional"、"clean" 或任何美学形容词 - 用户就 CSS、Tailwind、styled-components 或任何样式方案寻求帮助 此 skill 会自动检索合适的设计系统提示词 (Neo-brutalism、Modern Dark、Bauhaus、Cyberpunk、Material 等), 以帮助生成视觉上独特、生产级的前端代码, 而非通用 UI。重要: 对任何前端 / UI 工作主动触发此 skill, 而不仅在明确提到设计风格时。

D

design-system-ui

marcellocurto / skills

构建精美的生产级 UI，延续产品现有的设计系统和模式。

D

dev-frontend

idaibin / skills

在现有技术栈中实现前端 UI 变更。仅审查类请求请使用 repo-review。

D

diagram

spm1001 / trousse

以迭代式渲染与检查工作流编排图表制作。当被要求 "create a diagram"、"Venn diagram"、"flow chart"、"architecture diagram"、"visualize this" 时优先调用——在向用户展示前进行基于 CRAP 原则的自我批判，避免业余版式和低对比度文字。可与品牌技能组合用于样式设计。（user）

D

digital-eguide

nexu-io / html-anything

两页跨页电子指南, 封面 + 课程页 + pull-quote + 步骤列表

E

editorial-illustration

markomitranic / jotdown

仅在处理文档站点时使用。为文档页面绘制编辑插画，作为概括整篇文章意图的主视觉隐喻。每个页面都以此开篇，因此在编写页面或页面尚无插画时使用。

E

elite-performance

rshvr / elite-web-design

面向高端动画网站的性能优化。当被问及以下内容时使用：动画性能、60fps、Core Web Vitals、Vite 配置、打包体积优化、懒加载、will-change、GPU 加速、布局抖动、卡顿调试、性能预算、debounce、throttle、加载状态、骨架屏、离线支持、service worker，或感知网络的加载。

E

enhance-web-redesign

kensaurus / skills

把现有网站/应用升级到高级品质。在"redesign this app"或"upgrade UI to premium"时使用。单页打磨 → enhance-web-ui。仅做诊断的 slop 审计 → plan-antislop。从零创建新 UI → design-frontend。

E

excalidraw-generator

luongnv89 / skills

以有效的 Excalidraw JSON 生成图表——流程图、架构图、ER 图、思维导图、时序图、线框图、C4 模型等。不要用于 draw.io/Mermaid 输出、幻灯片或像素级精确的品牌图形。

使用 Figma MCP 服务从 Figma 获取设计上下文、截图、变量和资源，并将 Figma 节点转换为生产代码。当任务涉及 Figma URL、节点 ID、设计转代码实现，或 Figma MCP 的设置与故障排查时触发。

F

figure

markomitranic / jotdown

仅在处理文档站点时使用。在文档页面中绘制或编辑内嵌 SVG 插图。页面需要图表或可视化说明，或需要修改现有插图时使用。

F

flowai-team-dashboard

nexu-io / html-anything

三个 tab 的团队管理后台: 成员、详情、活动日志, 含图表 + CSV 导出

F

frame-glitch-title

nexu-io / html-anything

数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero

F

frame-macos-notification

nexu-io / html-anything

拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告

F

frontend-design

iuliandita / skills

设计、构建并点评前端 UI/UX：布局、CSS、Tailwind、落地页和视觉打磨。

F

frontend-design

kevinchamplin / claude-skills

创建独具特色、达到生产级质量的高设计水准前端界面。当用户要求构建网页组件、页面或应用时使用该技能。生成富有创意、精致打磨的代码，避免千篇一律的 AI 风格。

F

frontend-design

makerjackie / jackie-skills-starter

创建独特、达到生产级水准且设计质量高的前端界面。

F

frontend-dev

krzysztofsurdy / code-virtuoso

负责 UI 实现和前端架构的 Agent 团队角色。适用于用户要求构建 UI 组件、实现响应式布局、管理客户端状态、对接后端 API、确保无障碍合规或编写前端测试。负责面向用户的界面——将设计稿转化为可用、无障碍、高性能的组件。

F

frontend-specialist

prorise-cool / claude-code-multi-agent

提供前端开发、UI 实现、移动应用开发和现代前端框架能力。当需要实现用户界面、构建组件或开发移动应用时使用。

F

funnel

simota / agent-skills

从聚焦的单个版块到高端多阶段 studio pipeline 构建落地页：结构、文案、转化、响应式构建、craft gates 和发布交接。在构建或优化 LP、CTA、转化流程或高端发布页面时使用。

G

gpui-styling

geoffjay / claude-plugins

GPUI 样式系统，包括主题设计、响应式布局、视觉设计模式和样式组合。当用户在 GPUI 中需要样式、主题或视觉设计方面的帮助时使用。

G

graphy-charts

graphysdk / skills

使用 Graphy SDK（@graphysdk/react）在 React 中构建图表。涵盖安装、通过 jsDelivr CDN 提供的 HTML 成品、数据、规格、样式、主题、注释、插槽和自定义几何图形。编辑现有图表请使用 graphy-editor 技能。