Design Catalogue

Published by podo in design-agent-skills

Review recommended86 installs

What this skill does

Add Design Catalogue to your agent

Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.

Install with a prompt

Paste this into a compatible coding agent:

add this skill "design-catalogue" from https://github.com/podo/design-agent-skills

Install with the CLI

Run this command in a controlled environment after reviewing the repository:

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

Skill instructions

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: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`	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

Files included

SKILL.md
stub.yaml