mcpField
D
design-catalogue

design-catalogue

github.com/podoAgent workflows29177 installsUpdated 1d ago
Repository

About design-catalogue

design-catalogue is a meta-skill for finding a suitable design skill when a task or goal is described without naming one. It routes users to a relevant domain catalogue or recommends a match from its index, with an installation command.

Key features

  1. 01Routes requests to domain catalogues
  2. 02Indexes design skills by purpose
  3. 03Recommends a matching skill
  4. 04Shows the relevant install command

Use cases

  1. 01Find a skill for an unspecified design task
  2. 02Browse available design skills
  3. 03Choose a skill for a design domain

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-catalogue

After installing, type/design-cataloguein Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

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

  1. Present the relevant section of the catalogue index below
  2. Recommend the best match with a one-line reason
  3. Show the stub's install command for the match
  4. Ask if they want to install and invoke it

For type:package and type:platform stubs: show the npx skills add or 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:

DomainRoute toWhen
Motion, 3D, shaders, generative artmotion-catalogueGSAP, Framer Motion, Three.js, Lottie, p5.js, shaders, video
Figma, design-to-code, tokens, platform suitesfigma-catalogueFigma skills, Stitch, design tokens, Anthropic/Vercel/Expo suites
Accessibility, WCAG, web performanceaccessibility-cataloguea11y audit, WCAG 2.2, Core Web Vitals, React quality
UI craft, visual design, brand, mobiledesign-engineering-catalogueTaste, color, typography, iOS/Android, brand identity
Slides, diagrams, data viz, PM, design review, copycontent-cataloguePresentations, wireframes, charts, UX strategy, PM frameworks, UX writing, copywriting, user research

Catalogue index

Design Engineering (opinionated UI taste)
SkillBest for
taste-skillPremium, non-generic UI — variance, motion, density dials
impeccable23 commands, Chrome extension, Live Mode browser iteration
emilkowalski-skillAnimation decision framework, easing curves, interaction principles
make-interfaces-betterPolish: micro-interactions, typography details, visual refinement
ui-craft18 slash commands, anti-slop CLI, 3 style variants — deepest design engineering skill
frontend-design8 aesthetic anchors (Brutalist, Nordic, Cyberpunk…) with locked CSS tokens per theme
huashu-designMagazine-grade typography, CSS Grid, animated prototypes, MP4 export
brand-design-mdFetches exact tokens for 62 world-class brands (Stripe, Linear, Apple…) at runtime
ai-graphic-design-skillMaps 15 AI tools to design scenarios + 2025-26 Creative Director roadmap
logo-designer-skillBrand interview → 3-5 SVG concepts → PNG export 16px–2048px
distinctive-frontend4 themed design systems (Cyberpunk, Brutalist, Vaporwave, Nordic) with staggered animations
design-for-aiCHECKER (7-category audit) + APPLIER (6-phase creation) dual-mode plugin
styleseed69 design rules, 60+ brand skins (Toss, Stripe, Linear, Vercel…), 13 slash commands
awesome-design-skills67-style aesthetic registry: glassmorphism, brutalism, bento, editorial, riso…
interaction-designIxD principles, component states, micro-interactions, affordances, task flows — Norman + Tognazzini
format-storybookStorybook story structure, template composition, controls, Chromatic, CSF patterns
localization-designRTL mirroring, per-language text expansion, non-Latin type, cultural color/icon traps
design-system-governanceOwnership models, contribution lifecycle, semver contract, deprecation policy
Motion & Animation
SkillBest for
design-motion-principlesUI motion design: build components with purposeful motion or audit for AI-slop patterns — Emil Kowalski, Jakub Krehel, Jhey Tompkins lenses
algorithmic-artGenerative art with p5.js, flow fields, particle systems
shader-devGLSL shaders: ray marching, fluid simulation, WebGL effects
p5js-hermesp5.js creative coding: noise, particles, GLSL, audio-reactive
remotionProgrammatic video with React
motion-design-skillOfficial LottieFiles: timing, easing, choreography, Disney 12 principles for UI
gsap-skillsOfficial GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText
framer-motion-skills6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout
animate-skillEmil-inspired Next.js/React patterns: hover, toast, text reveal, modals
animate-css-skillAnimate.css v4 + scroll triggers + RTL + prefers-reduced-motion
css-animation-skillScrapes live app design language, interviews, produces standalone animation file
wiggle-claude-skillAnimates SVG logos → Lottie JSON → GIF + MP4
claudedesignskills22-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
SkillBest for
taste-design-stitchAesthetic judgment for Google Stitch output
design-labInteractive design exploration, variant generation
interface-design-dammyjayDashboards, admin panels, SaaS information-dense UI
bencium-ux-designerDistinctive, production-grade frontend
neo-user-journeyUX journey mapping + Playwright testing + 50+ patterns + Nielsen scoring
simota-agent-skills15 design sub-skills: Vision, Frame (Figma bridge), Pixel, Clay, Ink, Sketch
design-auditor19-category audit: typography, dark mode, RTL, dark patterns; 0-100 score
search-uxSearch input, autocomplete, ranking, faceted filters, zero-results, search analytics
interfaces-that-feelEmotional design: felt-state → physical analogue → motion/copy/spacing changes
information-architecture-and-navigationPolar-bear IA: organization/labeling/nav/search, taxonomy, wayfinding, findability
Visual, Components & Color
SkillBest for
color-expertOKLCH/OKLAB color science, palette generation, contrast
baseline-uiAnimation durations, typography scale, Tailwind anti-patterns
shadcn-uishadcn/ui component workflow
ui-ux-pro-max50+ styles, 97 palettes, 9 tech stacks
platform-design-skills300+ HIG/MD3/WCAG rules for cross-platform
apple-hig-skillsApple HIG: iOS, macOS, visionOS, watchOS, tvOS
hig-doctorDiagnose and fix Apple HIG violations
swiftui-patternsSwiftUI view and component best practices
ink-googleInk-style editorial design for artifacts
design-tokens-skillW3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports
google-fonts-skill1,923 Google Fonts with mood tags + 73 pairings + CSS vars + Tailwind config
mobile-app-designiOS HIG + Android MD3 + RN best practices — 26K words
mobile-app-ui-designProfessional mobile UI: intentional, smooth, alive interfaces
sleek-design-mobile-appsSleek platform: design screens, projects, assets via natural language (account req.)
liquid-glass-skilliOS 26 Liquid Glass: .glassEffect(), GlassEffectContainer, migration patterns
swiftui-claude-skillsWWDC 2025 verified SwiftUI, iOS 26.4 RC, Xcode 26
swiftui-design-skillSwiftUI visual design craft — anti-AI-slop, typography, color, brand
material-3-skillMaterial Design 3 / Material You: dynamic color, tonal surfaces, 30+ components (Compose + Flutter)
Accessibility & Quality
SkillBest for
fixing-accessibilityARIA, keyboard nav, focus management, contrast fixes
fixing-motion-performanceLayout thrashing, compositor, scroll-linked animation
wcag-audit-patternsWCAG 2.2 audits with remediation
addyosmani-quality6-skill suite: a11y, Lighthouse, CWV, perf, SEO, best practices
cloudflare-web-perfCore Web Vitals: LCP, INP, CLS fixes
react-doctorReact security, performance, correctness scoring
mastepanoski-skills6 audits: ux-rethink, Nielsen, WCAG POUR, Don Norman, cognitive walkthrough
wcag-ai-skillWCAG 2.2 full workflow: design → frontend → QA → conformance docs
accessibility-agents25 specialist a11y agents: web code, Office/PDF docs, markdown auditors
dark-pattern-auditStatic audit of codebase + copy for deceptive dark patterns — confidence-graded, source-located
Design Review & Creative Direction
SkillBest for
creative-director20+ ideation methods, Cannes/D&AD evaluation
design-briefStructured design briefs from loose requirements
design-consultationComplete design system from scratch
design-review-garrytanVisual audit + atomic fix commits
plan-design-reviewScored critique (0–10) with AI slop detection
design-htmlImplement designs as production HTML/CSS
digidai-pmSenior PM: 30+ frameworks, SaaS metrics
ux-ui-mastery19 skills: cognitive psych, spatial UX, ambient UI, iOS 26, WCAG 3.0
designer-skills91 skills, 28 commands: design research, systems, ux-strategy, critique
design-with-claudeDeterministic WCAG/token audit + design slash commands: dashboards, b2b SaaS, healthcare UX, onboarding
ux-designer-skillSynthesizes 19 authoritative UX sources (NNG, Laws of UX) — 2026 best practices
wondelai-skillsBook-derived: Refactoring UI, Design of Everyday Things, Sprint, Lean UX
design-impact-reportingDesign ROI: user→product→business metrics, scorecard / before-after / A-B / portfolio
design-debt-auditDesign-debt taxonomy + audit process + Severity×Frequency/Effort scoring + register
design-negotiationAdvocacy scripts: timeline / scope / stakeholder override / headcount, evidence-based
service-blueprintNN/g service blueprints: 5 swim lanes, lines of visibility, JSON schema + render pipeline
Design Research
SkillBest for
user-research-cookiyEnd-to-end user research: study planning, AI-moderated interviews, survey design, transcript synthesis, research reports
software-ux-researchResearch ops: survey design, repository management, usability testing (ISO 9241), JTBD
Figma & Design-to-Code
SkillBest for
figma-official-skills7 official Figma skills: implement, generate, library, code-connect
openai-skillsOpenAI's 9 skills: Figma + frontend + slides + imagegen
google-stitch-skills6 Stitch skills: design-md, react-components, shadcn, loop
extract-design-mdExtract Stitch output into DESIGN.md format
claude2figma4 skills enforcing token compliance: colors/fonts/spacing bind to Figma variables
work-with-design-systemsInspect (WCAG audit) + Build (6-phase with variable bindings) dual-mode
figma-variables-tokens-generatorQuestionnaire → W3C token ZIP + Figma plugin for import
figma-skillFigma API + Community resources → design tokens → 7 frameworks
extract-design-systemReverse-engineers tokens from any live website → tokens.json + tokens.css
Official Platform Suites
SkillBest for
anthropics-skills6 Anthropic skills: frontend-design, artifacts, canvas, theme, brand, pptx
vercel-skills4 Vercel skills: web-design-guidelines, components, React best practices
microsoft-skills2 Microsoft skills: design review, dark-theme React
software-mansion-skillsOfficial Software Mansion: RN animations, gestures, SVG, on-device AI
callstack-agent-skillsOfficial Callstack: RN best practices, profiling, Turbo Modules, upgrade
expo-skillsOfficial Expo: Expo SDK, EAS Build/Submit, Expo Router
Diagrams & Wireframing
SkillBest for
excalidraw-diagramExcalidraw with visual validation loop (3.2k stars)
hand-drawn-diagramsQuick hand-drawn sketch diagrams
excalidraw-agents365Excalidraw tuned for coding agent workflows
wireframerLow-fidelity wireframes, structure-first
softaworks-agent-toolkit40+ skills: mermaid, excalidraw, draw-io, C4, marp
nimbalyst-skillsExcalidraw with MCP tools, mockups, data models
wireframe-skillNL → wireframe JSON + interactive HTML with drag/drop, undo/redo
claude-wireframe-skill5 UX approaches as interactive prototypes — B&W first then color variants
Data Visualization & Charts
SkillBest for
antvis-chart-skills7 AntV skills: 26+ chart types, 98.2% accuracy
markdown-viewer-skills14 skills: Vega, PlantUML, JSON Canvas, infographics
d3js-skillD3.js: data binding, scales, transitions, interactive charts
data-viz-agentMulti-library agent: D3/Chart.js/Plotly/Matplotlib
claud3D3 v7 + Tufte principles: 80+ chart types, dark theme, annotations
data-analysis-skillMulti-expert parallel analysis → HTML reports + PowerPoint export
3D, Creative & Media
SkillBest for
cloudai-threejsThree.js 3D scenes, animations, WebGL
fal-ai-skillsfal.ai image/video and 3D model generation
composio-artifactsArtifacts connected to GitHub/Slack/Linear via Composio
webgpu-claude-skillThree.js TSL, node materials, GPU compute, WGSL — r183+
threejs-ecs-tsThree.js + Entity Component Systems + TypeScript
threejs-claude-skill-package24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture
generative-media-skills41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio
open-design31 skills + 71 brand design systems — local-first Claude Design alternative
superdesign-skillInfinite-canvas ideation: brand extraction, design drafts, IDE-native
Presentations
SkillBest for
nanobanan-pptAI-powered PPT with document analysis and image generation
guizang-pptStructured PowerPoint from outline (no API deps)
frontend-slidesAnimation-rich HTML presentations
revealjs-skillReveal.js: themes, Chart.js, speaker notes, PDF export
marp-slidesMARP + 22 example decks, SVG charts, dashboard components
slidev-skillOfficial Slidev: developer presentations in Markdown with Vue + animations
cc-slidevSlidev plugin with evidence-based design guardrails for tech talks
marp-slide-qualitySlideGauge scoring: overflow, contrast, density checks before render
Product & PM
SkillBest for
deanpeters-pm-skills9 skills: journey maps, OST, story mapping, PRD
phuryn-pm-skills65 skills / 8 plugins: discovery, strategy, execution, market research, data analytics, GTM, growth
coreyhaines-marketing3 CRO skills: onboarding, page, signup flow
pm-skills55 skills: Triple Diamond, 26 phases, Design Sprint, Foundation Sprint
claude-pm-skillsProduct thinking, discovery, prioritization, launch
design-sprintResearch codebase → design feature → decompose into parent + sub-issues with dependencies
product-positionB2B SaaS positioning: messaging hierarchy, competitive framing, strategic narrative — Dunford + JTBD frameworks
lenny-skills86 PM skills: behavioral product design, surveys, user interviews, design reviews, onboarding, growth loops (945 ★)
assimovt-productskills16 skills: roadmaps, North Star metrics, A/B experiments, competitor analysis, strategy docs, Shape Up scoping
chadboyda-gtm18 go-to-market skills: positioning/ICP, pricing, sales motion, outbound, launches, GTM metrics
Content Design & Copy
SkillBest for
ux-writing-skillMicrocopy, button labels, error messages, empty states, form copy, a11y writing
copywriting-skillLanding pages, product copy, email sequences, headlines, tone-of-voice (5 sub-skills)
humanize-textScore + rewrite text across 7 AI-pattern dimensions; works on raw text, Figma URLs, screenshots
content-strategyContent audit, content model, voice/tone, governance, content hierarchy
Email Design
SkillBest for
email-html-mjmlMJML 4.x → cross-client HTML email, WCAG 2.1 AA, Outlook-safe
TUI & Terminal Design
SkillBest for
tui-design-skillTerminal UI design: Bubble Tea (Go), Ratatui (Rust), Textual (Python), Ink (TS)
textual-tui-skillTextual (Python) deep-dive: 40+ widgets, TCSS, reactive, workers, Pilot testing

Routing guide

User saysRoute 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

Comments

Markdown supported