design-catalogue
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.
- Installs
- 177
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/podo/design-agent-skills --skill design-catalogue- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads design-catalogue automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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: researched art directions, real-browser inspector, look-and-fix loop |
impeccable | Design fluency: slash commands (polish, audit, critique…), anti-pattern detection, theming, typography, motion |
hallmark | Anti-AI-slop: design, audit, redesign, and extract design DNA from screenshots/URLs; structural variety |
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 (Swiss, Brutalist, Aurora Maximalism, Retro-Futuristic…) with locked CSS tokens per theme |
distinctive-frontend | Distinctive, non-generic interfaces: extreme typography, cohesive themes, staggered animation, layered backgrounds |
huashu-design | Magazine-grade typography, CSS Grid, animated prototypes, MP4 export |
brand-design-md | Looks up DESIGN.md specs for well-known brands (Stripe, Linear, Apple…) from getdesign.md 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 |
design-for-ai | Four-stage workflow (research → plan → mock → build) with seeded design DNA and dual-blind review |
styleseed | Design method engine: setup, build, review, scoring, tokens, a11y, copy; brand skins + score-then-fix gate |
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 |
motion | Official Motion team skill (Motion, ex Framer Motion, + CSS): best practices, docs/example search, CSS springs, performance audits, upgrades |
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 | Motion/creative-coding bundle: Three.js, GSAP, R3F, Framer Motion, Babylon, A-Frame, PixiJS, Rive, Lottie, Spline |
hyperframes | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS media (HeyGen) |
huashu-art-motion | Art-style and explainer video animation by code: storyboard → render → QA → deliver (Chinese docs) |
oil-motion | Scroll/pointer-driven web animation from AI video or sprite sequences (Chinese docs) |
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 | Design suite: Vision, Muse, Frame (Figma bridge), Pixel, Echo, Prose, Ink (SVG icons) |
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 |
building-components | Vercel: accessible, composable, themeable UI component authoring |
wpds | Official WordPress Design System: components, tokens, patterns (needs WPDS MCP) |
ui-ux-pro-max | 50+ styles, 97 palettes, 9 tech stacks |
platform-design-skills | HIG, Material 3 and WCAG 2.2 rules, one skill per platform: iOS, iPadOS, macOS, watchOS, visionOS, tvOS, Android, web |
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 |
design-tokens-skill | W3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports |
google-fonts-skill | Google Fonts search with mood tags, pairings, CSS custom properties, Tailwind config, type scales |
mobile-app-design | iOS HIG + Android MD3 + RN best practices: touch targets, thumb zones, adaptive patterns, audit scripts |
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 | WCAG 2.2 AA package: router skills for web UI, site audits, Office/PDF/ePub, markdown, desktop and Python tooling, GitHub workflows |
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 | Concept generation (SIT, TRIZ, SCAMPER, lateral thinking) scored against Cannes/D&AD/HumanKind criteria |
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 | Designer review of a plan before implementation: 0–10 per design dimension, fills gaps, flags AI-slop (gstack) |
design-html | Implement designs as production HTML/CSS |
digidai-pm | Senior PM: 30+ frameworks, SaaS metrics |
ux-ui-mastery | Sumi (ex ux-ui-mastery): cognitive UX, NN/g heuristics, research, interaction/motion, a11y, i18n, agentic AI UX, design systems |
designer-skills | Nine-plugin designer toolkit: research, systems, UX strategy, UI, interaction, testing, ops, critique (installs every skill) |
design-with-claude | Deterministic WCAG/token audit + design slash commands: dashboards, b2b SaaS, healthcare UX, onboarding |
ux-designer-skill | UX/UI review and critique grounded in Nielsen heuristics, Laws of UX and WCAG 2.2; references loaded on demand |
wondelai-skills | Book-derived: Refactoring UI, Everyday Things, Microinteractions, Lean UX, Inspired, JTBD, Hook Model, Design Sprint |
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 | Service blueprints (NN/g, GDS): five swim lanes, lines of visibility/interaction, JSON schema + render pipeline |
Design Research
| Skill | Best for |
|---|---|
user-research-cookiy | End-to-end user research: study planning, discussion guides, transcript synthesis, reports; optional AI-moderated interviews on Cookiy |
software-ux-research | UX research methods, study design, synthesis and research ops: reference guides + templates |
Figma & Design-to-Code
| Skill | Best for |
|---|---|
figma-official-skills | Official Figma skills: design-to-code, generate, library, Code Connect, FigJam, Slides, motion |
openai-skills | Official OpenAI skills: Figma, imagegen, screenshot |
google-stitch-skills | Google Stitch skills: design-md, prompt enhancement, 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 files via figma-developer-mcp → assets, tokens, code for Tailwind/React/Vue/Svelte/RN/Flutter/CSS (needs Figma token) |
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 | Vercel skills: web-design-guidelines, writing guidelines, React best practices, composition, view transitions |
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 diagrams with a visual validation loop |
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 | Design-adjacent picks: mermaid, excalidraw, draw-io, C4, marp, schema designer, design-system starter |
nimbalyst-skills | Nimbalyst app built-ins: 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 | AntV chart skills: chart images, G2, G6 graphs, X6 diagrams, infographics, GPT-Vis, T8 narrative text |
markdown-viewer-skills | Text-driven visuals in Markdown (docu.md): Vega-Lite/ECharts charts, UML, BPMN, ArchiMate, infographics |
d3js-skill | D3.js: data binding, scales, transitions, interactive charts |
claud3 | D3 v7 + Tufte principles: 80+ chart types, dark theme, annotations |
data-viz-agent | Data-viz engineer agent: D3, Chart.js, Matplotlib, Plotly; perceptual encodings, colorblind-safe, accessible |
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 | AI media via muapi.ai: cinematic video, Nano Banana images, Seedance, product ads, thumbnails (needs muapi account + CLI) |
open-design | Local-first Claude Design alternative: app + daemon running design skills and brand design systems on your own agent (an app, not a skill install) |
superdesign-skill | Hosted infinite-canvas design agent for UI, decks and graphics; branchable drafts (needs @superdesign/cli + account) |
Presentations
| Skill | Best for |
|---|---|
nanobanan-ppt | AI slide decks: document analysis → styled slide images + HTML player (needs a Gemini key) |
guizang-ppt | Structured PowerPoint from outline (no API deps) |
frontend-slides | Animation-rich HTML presentations |
html-ppt | HTML PPT Studio: themes, layouts, full-deck templates, presenter mode with speaker script |
kami | Paper-style typesetting: resumes, one-pagers, white papers, letters, decks (PDF/PNG/PPTX) |
humanize-ppt | Outline director + post-render checkup for agent-made decks (planner only, no rendering) |
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 | Nine PM plugins: discovery, strategy, execution, market research, analytics, GTM, growth, toolkit, AI shipping |
coreyhaines-marketing | 3 CRO skills: onboarding, page, signup flow |
pm-skills | Triple Diamond phase skills, foundation skills (personas, OKRs, lean canvas), Design Sprint and Foundation Sprint tools |
claude-pm-skills | Product thinking, discovery, prioritization, launch |
design-sprint | Research codebase → design feature → decompose into parent + sub-issues (GitHub/Backlog; installs create-issue) |
product-position | B2B SaaS positioning: messaging hierarchy, competitive framing, strategic narrative — Dunford + JTBD frameworks |
lenny-skills | Design-relevant skills from Lenny's archive: interviews, discovery, onboarding, PRDs, product taste, AI-native UX |
assimovt-productskills | Roadmaps, North Star metrics, A/B experiments, competitor analysis, strategy docs, Shape Up scoping |
chadboyda-gtm | Go-to-market skills: positioning/ICP, pricing, sales motion, outbound, launches, retention, 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 5.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: widgets, TCSS, reactive, workers, Pilot testing, common pitfalls |
ink-google | json-render Ink renderer: JSON specs → interactive terminal UIs |
Routing guide
| User says | Route to |
|---|---|
| "good taste", "anti slop", "premium UI", "not generic" | taste-skill or ui-craft |
| "art direction", "look and fix", "real-browser inspector" | 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" | design-review-garrytan or hallmark |
| "review my design plan", "plan design review" | 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 or html-ppt |
| "presenter mode", "speaker script", "Xiaohongshu cards" | html-ppt |
| "resume", "one-pager", "white paper", "typeset a PDF" | kami |
| "presentation outline", "talk structure", "deck checkup" | humanize-ppt |
| "shadcn", "shadcn component" | shadcn-ui |
| "WordPress Design System", "WPDS", "Gutenberg UI" | wpds |
| "Hallmark", "design audit", "extract design DNA", "study this design" | hallmark |
| "platform design", "cross-platform rules" | platform-design-skills |
| "creative strategy", "campaign concept", "SCAMPER" | creative-director |
| "design brief", "visual brief", "I-Lang brief" | design-brief |
| "product brief", "project brief", "requirements spec" | designer-skills |
| "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 |
| "Motion library", "motion.dev", "CSS springs", "MotionScore" | motion |
| "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 |
| "art style animation", "explainer video animation" | huashu-art-motion |
| "scroll-driven video", "sprite sequence animation", "pointer-driven animation" | oil-motion |
| "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 |
| "PDF accessibility", "Office document a11y", "document a11y" | accessibility-agents |
| "Don Norman audit", "cognitive walkthrough", "ux-rethink" | mastepanoski-skills |
| "designer toolkit", "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", "dark chart", "annotated chart" | claud3 |
| "dataviz agent", "colorblind-safe charts", "Plotly", "Matplotlib", "Chart.js" | data-viz-agent |
| "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", "local Claude Design alternative" | open-design |
| "Triple Diamond PM", "Foundation Sprint", "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", "brand DESIGN.md" | brand-design-md |
| "aesthetic anchor", "Brutalist CSS", "Swiss design" | frontend-design |
| "distinctive frontend", "avoid generic AI aesthetics", "extreme typography" | distinctive-frontend |
| "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 |
| "json-render Ink", "terminal UI from JSON" | ink-google |
| "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 |
| "UX research methods", "research ops", "study design" | software-ux-research |
| "service blueprint", "swim lanes", "line of visibility" | service-blueprint |
| "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
FAQ
What does the design-catalogue skill do?
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.
How do I install design-catalogue?
Run npx skills add https://github.com/podo/design-agent-skills --skill design-catalogue in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-catalogue/ (personal) or .claude/skills/design-catalogue/ (project).
Which AI agents can use design-catalogue?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is design-catalogue safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains design-catalogue?
It is published by podo in podo/design-agent-skills. It has 177 recorded installs.
More from podo/design-agent-skills
distinctive-frontend
podo/design-agent-skills
Generates distinctive interfaces that avoid generic AI aesthetics, using extreme typography, cohesive themes (Cyberpunk, Brutalist, Vaporwave, Nordic Minimalism), orchestrated staggered animations, and layered backgrounds. Originally published as Koomook/claude-frontend-skills; installed from a verbatim mirror.
taste-skill
podo/design-agent-skills
Anti-slop frontend art direction (tasteskill v2). Deals researched design directions for a page or app screen from a library built from curated gallery sites, enforces a strict no-generic-AI-UI house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Works in any web stack.
emilkowalski-skill
podo/design-agent-skills
Emil Kowalski's design engineering skills. Creator of Sonner, Vaul, and animations.dev. Covers the animation decision framework, custom easing curves, component interaction principles, and typography rules, plus skills to review, audit, and improve motion, performance, and native-feeling mobile web UI.
ui-craft
podo/design-agent-skills
Design engineering skill for AI coding agents: opinionated rules for how interfaces should look, move, and feel, a required discovery phase before coding, domain references, three style variants (minimal, editorial, dense-dashboard), and an anti-slop approach that flags generic patterns such as centered hero sections, Inter-only typography, and three-column card grids. Covers premium UI taste, component patterns, and design-engineering workflows.
color-expert
podo/design-agent-skills
A large color-science knowledge base applied to UI/UX design. Covers OKLCH/OKLAB color spaces, palette generation, accessibility contrast ratios, color naming, pigment mixing, and historical color theory. By meodai, creator of color-names.
apple-hig-skills
podo/design-agent-skills
Apple Human Interface Guidelines as agent skills covering iOS, macOS, visionOS, watchOS, and tvOS. From raintree-technology, makers of the Apple HIG compliance website.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available