design-catalogue

name	design-catalogue
description	Catalogue navigator for design-agent-skills. Lists available design skill stubs, matches user intent to the right stub, and routes to install and invoke. Use when the user wants to browse or find the right design skill.
triggers	["what design skills","find a design skill","browse design skills","which skill for design","design skill for","show me design skills","what skills do you have"]
das	{"category":"meta","type":"navigator","catalogue":true}

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:

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	38 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
"38 design commands", "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