design-catalogue
Meta-skill for this catalogue. Activate when the user wants to browse, discover, or find the right design skill — not when they've already named one.
When to use
Activate when the user:
- Asks what design skills exist ("what skills do you have?", "show me design skills")
- Describes a problem but names no skill ("I want premium UI", "make it not look generic")
- Asks which skill fits a task ("what should I use for animations?", "which for good taste?")
Do not activate if the user already named a specific skill — route directly to that stub.
How to respond
- Present the relevant section of the catalogue index below
- Recommend the best match with a one-line reason
- Show the stub's install command for the match
- Ask if they want to install and invoke it
For
type:packageandtype:platformstubs: show thenpx skills addor per-agent install command from the stub. These must not be curl'd directly.
Domain fast-path
When the user's intent is clearly within one domain, route directly to that domain catalogue instead of scrolling the full index below:
| Domain | Route to | When |
|---|---|---|
| Motion, 3D, shaders, generative art | motion-catalogue | GSAP, Framer Motion, Three.js, Lottie, p5.js, shaders, video |
| Figma, design-to-code, tokens, platform suites | figma-catalogue | Figma skills, Stitch, design tokens, Anthropic/Vercel/Expo suites |
| Accessibility, WCAG, web performance | accessibility-catalogue | a11y audit, WCAG 2.2, Core Web Vitals, React quality |
| UI craft, visual design, brand, mobile | design-engineering-catalogue | Taste, color, typography, iOS/Android, brand identity |
| Slides, diagrams, data viz, PM, design review, copy | content-catalogue | Presentations, wireframes, charts, UX strategy, PM frameworks, UX writing, copywriting, user research |
Catalogue index
Design Engineering (opinionated UI taste)
| Skill | Best for |
|---|---|
taste-skill | Premium, non-generic UI — variance, motion, density dials |
impeccable | 23 commands, Chrome extension, Live Mode browser iteration |
emilkowalski-skill | Animation decision framework, easing curves, interaction principles |
make-interfaces-better | Polish: micro-interactions, typography details, visual refinement |
ui-craft | 18 slash commands, anti-slop CLI, 3 style variants — deepest design engineering skill |
frontend-design | 8 aesthetic anchors (Brutalist, Nordic, Cyberpunk…) with locked CSS tokens per theme |
huashu-design | Magazine-grade typography, CSS Grid, animated prototypes, MP4 export |
brand-design-md | Fetches exact tokens for 62 world-class brands (Stripe, Linear, Apple…) at runtime |
ai-graphic-design-skill | Maps 15 AI tools to design scenarios + 2025-26 Creative Director roadmap |
logo-designer-skill | Brand interview → 3-5 SVG concepts → PNG export 16px–2048px |
distinctive-frontend | 4 themed design systems (Cyberpunk, Brutalist, Vaporwave, Nordic) with staggered animations |
design-for-ai | CHECKER (7-category audit) + APPLIER (6-phase creation) dual-mode plugin |
styleseed | 69 design rules, 60+ brand skins (Toss, Stripe, Linear, Vercel…), 13 slash commands |
awesome-design-skills | 67-style aesthetic registry: glassmorphism, brutalism, bento, editorial, riso… |
interaction-design | IxD principles, component states, micro-interactions, affordances, task flows — Norman + Tognazzini |
format-storybook | Storybook story structure, template composition, controls, Chromatic, CSF patterns |
localization-design | RTL mirroring, per-language text expansion, non-Latin type, cultural color/icon traps |
design-system-governance | Ownership models, contribution lifecycle, semver contract, deprecation policy |
Motion & Animation
| Skill | Best for |
|---|---|
design-motion-principles | UI motion design: build components with purposeful motion or audit for AI-slop patterns — Emil Kowalski, Jakub Krehel, Jhey Tompkins lenses |
algorithmic-art | Generative art with p5.js, flow fields, particle systems |
shader-dev | GLSL shaders: ray marching, fluid simulation, WebGL effects |
p5js-hermes | p5.js creative coding: noise, particles, GLSL, audio-reactive |
remotion | Programmatic video with React |
motion-design-skill | Official LottieFiles: timing, easing, choreography, Disney 12 principles for UI |
gsap-skills | Official GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText |
framer-motion-skills | 6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout |
animate-skill | Emil-inspired Next.js/React patterns: hover, toast, text reveal, modals |
animate-css-skill | Animate.css v4 + scroll triggers + RTL + prefers-reduced-motion |
css-animation-skill | Scrapes live app design language, interviews, produces standalone animation file |
wiggle-claude-skill | Animates SVG logos → Lottie JSON → GIF + MP4 |
claudedesignskills | 22-skill bundle: Three.js, GSAP, R3F, Framer, Babylon, A-Frame, PixiJS, Rive, Lottie |
hyperframes | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS media (HeyGen) |
Interaction & Polish
| Skill | Best for |
|---|---|
taste-design-stitch | Aesthetic judgment for Google Stitch output |
design-lab | Interactive design exploration, variant generation |
interface-design-dammyjay | Dashboards, admin panels, SaaS information-dense UI |
bencium-ux-designer | Distinctive, production-grade frontend |
neo-user-journey | UX journey mapping + Playwright testing + 50+ patterns + Nielsen scoring |
simota-agent-skills | 15 design sub-skills: Vision, Frame (Figma bridge), Pixel, Clay, Ink, Sketch |
design-auditor | 19-category audit: typography, dark mode, RTL, dark patterns; 0-100 score |
search-ux | Search input, autocomplete, ranking, faceted filters, zero-results, search analytics |
interfaces-that-feel | Emotional design: felt-state → physical analogue → motion/copy/spacing changes |
information-architecture-and-navigation | Polar-bear IA: organization/labeling/nav/search, taxonomy, wayfinding, findability |
Visual, Components & Color
| Skill | Best for |
|---|---|
color-expert | OKLCH/OKLAB color science, palette generation, contrast |
baseline-ui | Animation durations, typography scale, Tailwind anti-patterns |
shadcn-ui | shadcn/ui component workflow |
ui-ux-pro-max | 50+ styles, 97 palettes, 9 tech stacks |
platform-design-skills | 300+ HIG/MD3/WCAG rules for cross-platform |
apple-hig-skills | Apple HIG: iOS, macOS, visionOS, watchOS, tvOS |
hig-doctor | Diagnose and fix Apple HIG violations |
swiftui-patterns | SwiftUI view and component best practices |
ink-google | Ink-style editorial design for artifacts |
design-tokens-skill | W3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports |
google-fonts-skill | 1,923 Google Fonts with mood tags + 73 pairings + CSS vars + Tailwind config |
mobile-app-design | iOS HIG + Android MD3 + RN best practices — 26K words |
mobile-app-ui-design | Professional mobile UI: intentional, smooth, alive interfaces |
sleek-design-mobile-apps | Sleek platform: design screens, projects, assets via natural language (account req.) |
liquid-glass-skill | iOS 26 Liquid Glass: .glassEffect(), GlassEffectContainer, migration patterns |
swiftui-claude-skills | WWDC 2025 verified SwiftUI, iOS 26.4 RC, Xcode 26 |
swiftui-design-skill | SwiftUI visual design craft — anti-AI-slop, typography, color, brand |
material-3-skill | Material Design 3 / Material You: dynamic color, tonal surfaces, 30+ components (Compose + Flutter) |
Accessibility & Quality
| Skill | Best for |
|---|---|
fixing-accessibility | ARIA, keyboard nav, focus management, contrast fixes |
fixing-motion-performance | Layout thrashing, compositor, scroll-linked animation |
wcag-audit-patterns | WCAG 2.2 audits with remediation |
addyosmani-quality | 6-skill suite: a11y, Lighthouse, CWV, perf, SEO, best practices |
cloudflare-web-perf | Core Web Vitals: LCP, INP, CLS fixes |
react-doctor | React security, performance, correctness scoring |
mastepanoski-skills | 6 audits: ux-rethink, Nielsen, WCAG POUR, Don Norman, cognitive walkthrough |
wcag-ai-skill | WCAG 2.2 full workflow: design → frontend → QA → conformance docs |
accessibility-agents | 25 specialist a11y agents: web code, Office/PDF docs, markdown auditors |
dark-pattern-audit | Static audit of codebase + copy for deceptive dark patterns — confidence-graded, source-located |
Design Review & Creative Direction
| Skill | Best for |
|---|---|
creative-director | 20+ ideation methods, Cannes/D&AD evaluation |
design-brief | Structured design briefs from loose requirements |
design-consultation | Complete design system from scratch |
design-review-garrytan | Visual audit + atomic fix commits |
plan-design-review | Scored critique (0–10) with AI slop detection |
design-html | Implement designs as production HTML/CSS |
digidai-pm | Senior PM: 30+ frameworks, SaaS metrics |
ux-ui-mastery | 19 skills: cognitive psych, spatial UX, ambient UI, iOS 26, WCAG 3.0 |
designer-skills | 91 skills, 28 commands: design research, systems, ux-strategy, critique |
design-with-claude | Deterministic WCAG/token audit + design slash commands: dashboards, b2b SaaS, healthcare UX, onboarding |
ux-designer-skill | Synthesizes 19 authoritative UX sources (NNG, Laws of UX) — 2026 best practices |
wondelai-skills | Book-derived: Refactoring UI, Design of Everyday Things, Sprint, Lean UX |
design-impact-reporting | Design ROI: user→product→business metrics, scorecard / before-after / A-B / portfolio |
design-debt-audit | Design-debt taxonomy + audit process + Severity×Frequency/Effort scoring + register |
design-negotiation | Advocacy scripts: timeline / scope / stakeholder override / headcount, evidence-based |
service-blueprint | NN/g service blueprints: 5 swim lanes, lines of visibility, JSON schema + render pipeline |
Design Research
| Skill | Best for |
|---|---|
user-research-cookiy | End-to-end user research: study planning, AI-moderated interviews, survey design, transcript synthesis, research reports |
software-ux-research | Research ops: survey design, repository management, usability testing (ISO 9241), JTBD |
Figma & Design-to-Code
| Skill | Best for |
|---|---|
figma-official-skills | 7 official Figma skills: implement, generate, library, code-connect |
openai-skills | OpenAI's 9 skills: Figma + frontend + slides + imagegen |
google-stitch-skills | 6 Stitch skills: design-md, react-components, shadcn, loop |
extract-design-md | Extract Stitch output into DESIGN.md format |
claude2figma | 4 skills enforcing token compliance: colors/fonts/spacing bind to Figma variables |
work-with-design-systems | Inspect (WCAG audit) + Build (6-phase with variable bindings) dual-mode |
figma-variables-tokens-generator | Questionnaire → W3C token ZIP + Figma plugin for import |
figma-skill | Figma API + Community resources → design tokens → 7 frameworks |
extract-design-system | Reverse-engineers tokens from any live website → tokens.json + tokens.css |
Official Platform Suites
| Skill | Best for |
|---|---|
anthropics-skills | 6 Anthropic skills: frontend-design, artifacts, canvas, theme, brand, pptx |
vercel-skills | 4 Vercel skills: web-design-guidelines, components, React best practices |
microsoft-skills | 2 Microsoft skills: design review, dark-theme React |
software-mansion-skills | Official Software Mansion: RN animations, gestures, SVG, on-device AI |
callstack-agent-skills | Official Callstack: RN best practices, profiling, Turbo Modules, upgrade |
expo-skills | Official Expo: Expo SDK, EAS Build/Submit, Expo Router |
Diagrams & Wireframing
| Skill | Best for |
|---|---|
excalidraw-diagram | Excalidraw with visual validation loop (3.2k stars) |
hand-drawn-diagrams | Quick hand-drawn sketch diagrams |
excalidraw-agents365 | Excalidraw tuned for coding agent workflows |
wireframer | Low-fidelity wireframes, structure-first |
softaworks-agent-toolkit | 40+ skills: mermaid, excalidraw, draw-io, C4, marp |
nimbalyst-skills | Excalidraw with MCP tools, mockups, data models |
wireframe-skill | NL → wireframe JSON + interactive HTML with drag/drop, undo/redo |
claude-wireframe-skill | 5 UX approaches as interactive prototypes — B&W first then color variants |
Data Visualization & Charts
| Skill | Best for |
|---|---|
antvis-chart-skills | 7 AntV skills: 26+ chart types, 98.2% accuracy |
markdown-viewer-skills | 14 skills: Vega, PlantUML, JSON Canvas, infographics |
d3js-skill | D3.js: data binding, scales, transitions, interactive charts |
data-viz-agent | Multi-library agent: D3/Chart.js/Plotly/Matplotlib |
claud3 | D3 v7 + Tufte principles: 80+ chart types, dark theme, annotations |
data-analysis-skill | Multi-expert parallel analysis → HTML reports + PowerPoint export |
3D, Creative & Media
| Skill | Best for |
|---|---|
cloudai-threejs | Three.js 3D scenes, animations, WebGL |
fal-ai-skills | fal.ai image/video and 3D model generation |
composio-artifacts | Artifacts connected to GitHub/Slack/Linear via Composio |
webgpu-claude-skill | Three.js TSL, node materials, GPU compute, WGSL — r183+ |
threejs-ecs-ts | Three.js + Entity Component Systems + TypeScript |
threejs-claude-skill-package | 24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture |
generative-media-skills | 41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio |
open-design | 31 skills + 71 brand design systems — local-first Claude Design alternative |
superdesign-skill | Infinite-canvas ideation: brand extraction, design drafts, IDE-native |
Presentations
| Skill | Best for |
|---|---|
nanobanan-ppt | AI-powered PPT with document analysis and image generation |
guizang-ppt | Structured PowerPoint from outline (no API deps) |
frontend-slides | Animation-rich HTML presentations |
revealjs-skill | Reveal.js: themes, Chart.js, speaker notes, PDF export |
marp-slides | MARP + 22 example decks, SVG charts, dashboard components |
slidev-skill | Official Slidev: developer presentations in Markdown with Vue + animations |
cc-slidev | Slidev plugin with evidence-based design guardrails for tech talks |
marp-slide-quality | SlideGauge scoring: overflow, contrast, density checks before render |
Product & PM
| Skill | Best for |
|---|---|
deanpeters-pm-skills | 9 skills: journey maps, OST, story mapping, PRD |
phuryn-pm-skills | 65 skills / 8 plugins: discovery, strategy, execution, market research, data analytics, GTM, growth |
coreyhaines-marketing | 3 CRO skills: onboarding, page, signup flow |
pm-skills | 55 skills: Triple Diamond, 26 phases, Design Sprint, Foundation Sprint |
claude-pm-skills | Product thinking, discovery, prioritization, launch |
design-sprint | Research codebase → design feature → decompose into parent + sub-issues with dependencies |
product-position | B2B SaaS positioning: messaging hierarchy, competitive framing, strategic narrative — Dunford + JTBD frameworks |
lenny-skills | 86 PM skills: behavioral product design, surveys, user interviews, design reviews, onboarding, growth loops (945 ★) |
assimovt-productskills | 16 skills: roadmaps, North Star metrics, A/B experiments, competitor analysis, strategy docs, Shape Up scoping |
chadboyda-gtm | 18 go-to-market skills: positioning/ICP, pricing, sales motion, outbound, launches, GTM metrics |
Content Design & Copy
| Skill | Best for |
|---|---|
ux-writing-skill | Microcopy, button labels, error messages, empty states, form copy, a11y writing |
copywriting-skill | Landing pages, product copy, email sequences, headlines, tone-of-voice (5 sub-skills) |
humanize-text | Score + rewrite text across 7 AI-pattern dimensions; works on raw text, Figma URLs, screenshots |
content-strategy | Content audit, content model, voice/tone, governance, content hierarchy |
Email Design
| Skill | Best for |
|---|---|
email-html-mjml | MJML 4.x → cross-client HTML email, WCAG 2.1 AA, Outlook-safe |
TUI & Terminal Design
| Skill | Best for |
|---|---|
tui-design-skill | Terminal UI design: Bubble Tea (Go), Ratatui (Rust), Textual (Python), Ink (TS) |
textual-tui-skill | Textual (Python) deep-dive: 40+ widgets, TCSS, reactive, workers, Pilot testing |
Routing guide
| User says | Route to |
|---|---|
| "good taste", "anti slop", "premium UI", "not generic" | taste-skill or ui-craft |
| "design variance", "motion intensity", "visual density" | taste-skill |
| "no Inter font", "no 3-column cards", "no centered hero" | taste-skill or ui-craft |
| "anti-slop detector", "33 rules", "ui-craft", "18 slash commands" | ui-craft |
| "polish", "micro-interactions", "make it feel better" | make-interfaces-better |
| "animation principles", "easing curves" | emilkowalski-skill |
| "GLSL", "ray march", "WebGL shader" | shader-dev |
| "generative art", "p5.js", "particle system" | algorithmic-art or p5js-hermes |
| "Three.js", "3D scene", "WebGL 3D" | cloudai-threejs |
| "Figma to code", "implement Figma" | figma-official-skills |
| "Stitch", "DESIGN.md", "stitch loop" | google-stitch-skills |
| "color palette", "OKLCH", "color science" | color-expert |
| "WCAG", "accessibility audit", "contrast" | fixing-accessibility or addyosmani-quality |
| "Core Web Vitals", "LCP", "CLS" | cloudflare-web-perf or addyosmani-quality |
| "React performance", "React audit" | react-doctor |
| "design review", "visual audit", "AI slop" | plan-design-review |
| "design system", "build from scratch" | design-consultation |
| "Apple HIG", "iOS design", "visionOS" | apple-hig-skills |
| "HIG compliance", "fix HIG" | hig-doctor |
| "mermaid", "C4 diagram", "draw.io" | softaworks-agent-toolkit |
| "excalidraw" | excalidraw-diagram |
| "wireframe", "lo-fi", "layout skeleton" | wireframer |
| "D3", "chart", "data visualization" | d3js-skill or antvis-chart-skills |
| "customer journey", "user story", "PRD" | deanpeters-pm-skills or phuryn-pm-skills |
| "CRO", "conversion", "onboarding" | coreyhaines-marketing |
| "PowerPoint", "slides", "presentation" | guizang-ppt or nanobanan-ppt |
| "HTML presentation", "animated slides" | frontend-slides |
| "shadcn", "shadcn component" | shadcn-ui |
| "platform design", "cross-platform rules" | platform-design-skills |
| "creative strategy", "campaign concept", "SCAMPER" | creative-director |
| "design brief", "requirements spec" | design-brief |
| "motion principles", "purposeful motion", "motion audit", "AI slop motion", "hover state design", "micro-interaction design", "Emil Kowalski motion", "Jhey Tompkins" | design-motion-principles |
| "GSAP", "ScrollTrigger", "GreenSock" | gsap-skills |
| "Framer Motion", "framer animation", "layout animation" | framer-motion-skills |
| "Lottie", "motion principles", "Disney principles" | motion-design-skill |
| "SVG logo animation", "wiggle", "logo GIF" | wiggle-claude-skill |
| "Animate.css", "bounce", "fadeIn" | animate-css-skill |
| "Babylon.js", "A-Frame", "PixiJS", "Rive" | claudedesignskills |
| "HTML to video", "render video", "HeyGen" | hyperframes |
| "Reveal.js", "revealjs presentation" | revealjs-skill |
| "Marp", "MARP slides" | marp-slides |
| "Slidev", "developer slides Vue" | slidev-skill |
| "Marp quality", "slide overflow check" | marp-slide-quality |
| "design tokens", "DTCG", "W3C tokens", "Terrazzo" | design-tokens-skill |
| "Google Fonts", "font pairing", "typography scale" | google-fonts-skill |
| "mobile app design", "touch targets", "thumb zones" | mobile-app-design |
| "iOS 26", "Liquid Glass", "glassEffect" | liquid-glass-skill |
| "SwiftUI iOS 26", "WWDC 2025 SwiftUI" | swiftui-claude-skills |
| "SwiftUI design", "SwiftUI visual design", "iOS visual design" | swiftui-design-skill |
| "WCAG 2.2 guidance", "conformance docs" | wcag-ai-skill |
| "25 a11y agents", "PDF accessibility", "document a11y" | accessibility-agents |
| "Don Norman audit", "cognitive walkthrough", "ux-rethink" | mastepanoski-skills |
| "91 design skills", "design ops", "visual critique" | designer-skills |
| "audit my design system", "healthcare UX", "b2b SaaS UX" | design-with-claude |
| "UX principles", "Laws of UX", "usability guidelines" | ux-designer-skill |
| "Refactoring UI", "Design Sprint book", "Lean UX" | wondelai-skills |
| "user journey", "journey mapping", "Playwright UX" | neo-user-journey |
| "design score", "19-category audit", "dark patterns audit" | design-auditor |
| "Figma token compliance", "Figma variables enforcement" | claude2figma |
| "extract tokens website", "reverse-engineer CSS" | extract-design-system |
| "Figma design system build", "variable bindings" | work-with-design-systems |
| "React Native animations", "Reanimated", "Gesture Handler" | software-mansion-skills |
| "Expo", "EAS Build", "Expo Router" | expo-skills |
| "React Native profiling", "Turbo Modules", "brownfield" | callstack-agent-skills |
| "D3 Tufte", "80 chart types", "dark chart" | claud3 |
| "parallel data analysis", "data to PowerPoint" | data-analysis-skill |
| "WebGPU", "TSL Three.js", "GPU compute" | webgpu-claude-skill |
| "Three.js ECS", "entity component 3D" | threejs-ecs-ts |
| "Three.js BIM", "IFC architecture", "AEC 3D" | threejs-claude-skill-package |
| "Midjourney workflow", "Kling", "Veo3", "Flux Kontext" | generative-media-skills |
| "infinite canvas design", "SuperDesign" | superdesign-skill |
| "open-design platform", "31 design skills local" | open-design |
| "Triple Diamond PM", "55 PM skills", "Design Sprint method" | pm-skills |
| "MJML", "HTML email", "Outlook-safe email" | email-html-mjml |
| "terminal UI", "TUI", "Bubble Tea", "Ratatui", "Textual" | tui-design-skill |
| "brand tokens Stripe", "62 brands" | brand-design-md |
| "aesthetic anchor", "Brutalist CSS", "Nordic design" | frontend-design |
| "logo SVG", "brand interview", "logo PNG" | logo-designer-skill |
| "AI Midjourney design", "AI Creative Director" | ai-graphic-design-skill |
| "button label", "error message copy", "empty state", "microcopy" | ux-writing-skill |
| "landing page copy", "product copy", "tone of voice", "headline" | copywriting-skill |
| "remove AI patterns", "de-slop", "AI writing", "humanize text" | humanize-text |
| "Material Design 3", "Material You", "MD3", "Jetpack Compose design" | material-3-skill |
| "brand skin", "design token engine", "styleseed" | styleseed |
| "design aesthetic", "glassmorphism", "brutalism style", "claymorphism" | awesome-design-skills |
| "Textual TUI", "Textual Python", "Textual widget", "TCSS" | textual-tui-skill |
| "interaction design", "component states", "affordance", "micro-interaction timing" | interaction-design |
| "Storybook", "Storybook story", "CSF", "Chromatic visual regression" | format-storybook |
| "user research", "user interview", "research synthesis", "usability study" | user-research-cookiy |
| "feature design sprint", "design to issues", "decompose feature" | design-sprint |
| "product positioning", "messaging hierarchy", "value proposition", "competitive framing" | product-position |
| "behavioral product design", "designing surveys", "running design reviews", "growth loops" | lenny-skills |
| "roadmap planning", "North Star metric", "experiment design", "competitor analysis", "Shape Up" | assimovt-productskills |
| "go-to-market skills", "GTM operator", "sales motion", "AI SDR", "pricing strategy" | chadboyda-gtm |
| "dark patterns", "deceptive design", "manipulative UI", "hidden fees code" | dark-pattern-audit |
No match
If intent doesn't match any stub:
- Say so directly: "No stub in this catalogue covers [X] yet."
- Suggest checking the repo for new additions
- Offer to help build a stub if they have an upstream skill in mind