design-agent-skills

A curated catalogue of design skills for Claude Code, Cursor, Codex, OpenCode, and 30+ other AI coding agents. 150 skills covering UI craft, motion, Figma workflows, accessibility, data viz, presentations, PM tools, content design, and user research. Skills install on demand — the catalogue is a lightweight index, not a bulk download.

Install

npx skills add podo/design-agent-skills -g     # user scope — all projects
npx skills add podo/design-agent-skills        # project scope — this project only

Or use the interactive CLI — arrow-key navigation, no flags needed:

npx design-agent-skills

◇  Where should skills install?
│  ● User scope    ~/.agents/skills/   all projects
│  ○ Project scope .agents/skills/     this project
└

◆  User scope
│
◇  Which profile?
│  ● Picks        24 skills  ★ best in class
│  ○ Essentials   91 skills    full coverage
│  ○ All         150 skills    everything
│  ○ Category →  pick a domain
└

◆  Picks — 24 skills
│
◆  Installing 24 skills…
│  ✓ taste-skill
│  ✓ ui-craft
│  ✓ gsap-skills
│  …
│
◆  Done — 24 skills in 4.2s

Auto-detects all installed agents (Claude Code, Cursor, Codex, OpenCode, Droid, and 30+ more). Installs skill pointers with symlinks from every agent directory to a single canonical store — one file, all agents.

Pick your install

| Profile | Flag | Skills | Best for | |---------|------|--------|----------| | Picks ★ | --picks | 24 | One best-in-class per category. Start here. | | Essentials | --essentials | ~91 | Full coverage, no redundancy. | | All | --all | 150 | Everything including niche and experimental. |

npx design-agent-skills --picks -g          # 24 best-in-class skills, global
npx design-agent-skills --essentials -g     # ~91 skills covering all categories
npx design-agent-skills --all -g            # all 150 (default when no flag)

Filter by category (composable with any profile):

npx design-agent-skills --category motion
npx design-agent-skills --picks --category accessibility
npx design-agent-skills --essentials --category figma-code

Valid categories: design-systems · creative-3d · interaction-polish · visual-components · accessibility-quality · design-review · figma-code · official-suites · diagrams · data-visualization · presentations · product-pm · content-design · email-design · tui-terminal · motion-animation · design-engineering · design-research

Commands

# Installation
npx skills add podo/design-agent-skills -g    # install globally
npx skills add podo/design-agent-skills       # install for this project

# Keeping skills current
npx skills update                             # update all skills
npx skills update <name>                      # update one skill

# Inspection
npx skills list                               # list installed skills
npx skills list -g                            # global skills only

# Removal
npx skills remove <skill>                     # remove a specific skill
npx skills remove --all                       # remove everything

# Catalogue-specific commands
npx design-agent-skills search <query>        # find skills by name or category
npx design-agent-skills add <skill> -g        # install one skill by name, globally
npx design-agent-skills --list                # show categories and skill counts
npx design-agent-skills doctor                # trigger collisions + symlink health
npx design-agent-skills --version             # print catalogue version

How skills install on demand

The catalogue has two tiers:

Tier 1 — Routing layer (6 domain catalogues): permanently owned by this repo. skills update always pulls the latest routing logic from here, regardless of what else is installed.

Tier 2 — Implementation pointers (150 skills): lightweight entries that tell an agent what a skill does and how to fetch the full version. When an agent reads a pointer and needs the real skill, it runs:

# Global install:
npx skills add owner/repo --skill <name> -g -y

# Project install:
npx skills add owner/repo --skill <name> -y

The full skill lands at ~/.agents/skills/<name>/ (global) or .agents/skills/<name>/ (project) — overwriting the pointer at the same canonical path. All 30+ agent symlinks pick up the change automatically. One install, all agents updated.

How it works

Each skill is a SKILL.md file in skills/<name>/. The catalogue is structured in two permanent tiers:

| Tier | Type | Count | Owned by | Updates | |------|------|-------|----------|---------| | Routing | router | 6 | This repo — always | skills update always reaches these | | Implementation | skill / package / platform | 150 | Upstream on first use | skills update reaches un-upgraded pointers |

Pointer anatomy

---
name: <skill-name>
description: |
  One-paragraph description for agent discovery.
triggers:
  - "phrase that activates this skill"
das:
  type: <type>                # router | skill | package | platform
  category: <category>        # design-systems, motion, accessibility, …
  upstream: <github-url>      # skill/package/platform only
  upstream_path: <path>       # skill type only
  version: latest
---

Pointer types

| Type | Role | Upgrade path | Example | |------|------|-------------|---------| | router | Domain navigator — routes to the right skill | Never upgraded; always from this repo | design-catalogue | | skill | Single SKILL.md from upstream | skills add owner/repo --skill <name> | taste-skill | | package | Multi-skill GitHub package | skills add owner/repo | ui-craft | | platform | Platform with template vars — never fetch directly | Manual per platform docs | impeccable |

Body sections

Decision tree · Install the full skill · Invoke after install · What it does

Adding a skill

1. mkdir skills/<name> && touch skills/<name>/SKILL.md skills/<name>/stub.yaml
2. Fill frontmatter + body sections (decision tree, install, invoke, what it does)
3. Set type: skill, type: package, or type: router in stub.yaml
4. Add a row to the table below
5. Open a PR — no review of upstream content required

Trigger routing and known overlaps

Skills activate when an agent reads a trigger phrase from a user message. The catalogue uses a two-level routing structure:

User asks → design-catalogue (top-level router)
                → domain catalogue (motion-catalogue, figma-catalogue, …)
                    → implementation skill (gsap-skills, figma-official-skills, …)

Intentional broad triggers — catalogue skills carry generic triggers by design so they fire before a more specific skill does. For example, design-catalogue owns "excalidraw", "wireframe", "Three.js", and "GSAP" to route the user to the right domain. The specific implementation skills (e.g. gsap-skills) own longer triggers like "GSAP skill" and "GSAP timeline" for direct invocation.

Known overlaps by domain:

| Short trigger | On catalogue | Longer triggers also matched | On impl skill | |---|---|---|---| | excalidraw | design-catalogue | excalidraw diagram, excalidraw for agents, excalidraw sketch | excalidraw-diagram, excalidraw-agents365 | | wireframe | design-catalogue | wireframe skills, wireframe-skill, JSON wireframe, interactive wireframe HTML | wireframer, wireframe-skill, claude-wireframe-skill | | Three.js | design-catalogue | Three.js skill, Three.js ECS, IFC Three.js, TSL Three.js | cloudai-threejs, threejs-ecs-ts | | GSAP | design-catalogue | GSAP skill, GSAP timeline, useGSAP | gsap-skills | | shader | design-catalogue | shader skill, WebGL shader, GPU compute shaders | shader-dev | | Framer Motion | design-catalogue | Framer Motion skill | framer-motion-skills | | Marp | design-catalogue | Marp presentation | marp-slides | | Slidev | design-catalogue | Slidev presentation | slidev-skill | | shadcn | design-catalogue | shadcn/ui, shadcn component, stitch shadcn | shadcn-ui | | Expo | design-catalogue | Expo SDK, Expo Router | expo-skills | | EAS | expo-skills | EAS Build, EAS Submit | — | | Apple HIG | design-catalogue | Apple HIG audit, Apple HIG rules, fix Apple HIG | apple-hig-skills | | generative art | design-catalogue | generative art p5, generative art skill | algorithmic-art | | animate | animate-skill | animate-css, animated GIF, animated prototype, animated slides | animate-css-skill |

These overlaps are harmless: when both a catalogue and an impl skill activate, the impl skill handles the request directly while the catalogue is redundant noise. Run npx design-agent-skills doctor --substr to see the full list at any time.

Fixed impl→impl conflicts (triggers that previously caused two unrelated skills to compete):

| Trigger | Was on | Conflicted with | Fix | |---|---|---|---| | frontend design | anthropics-skills | microsoft-skills frontend design review | renamed to Anthropic frontend design | | flow field | algorithmic-art | p5js-hermes flow field p5 | renamed to flow field art |

Supply chain

Skills install from GitHub via npx skills add. Upstream repos don't publish versioned releases or stable SHAs, so pre-install pinning isn't possible.

What we do instead:

• Tier classification — official (33), community (51), experimental (60) — experimental excluded by default
• Routing layer — domain catalogues (Tier 1) are permanently owned here; your update path to them is always intact
• skills update — re-fetches each skill from its current source; run regularly to stay current

If you need stronger guarantees, clone an upstream repo at a specific commit and point upstream in stub.yaml to your fork.

Skills

Catalogue Routers

Domain routers — activate when the user asks for a skill by domain. Route to the right implementation skill.

| Skill | Routes to | |-------|-----------| | design-catalogue | Top-level router across all domains | | motion-catalogue | Motion, 3D, shaders, generative art | | figma-catalogue | Figma, design-to-code, tokens, platform suites | | accessibility-catalogue | Accessibility, WCAG, web performance | | design-engineering-catalogue | UI craft, visual design, brand, mobile | | content-catalogue | Slides, diagrams, data viz, PM, design review, copywriting, UX writing |

Design Engineering

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | taste-skill ★ | skill | design-systems | Leonxlnx/taste-skill | | ui-craft ★ | package | design-systems | educlopez/ui-craft | | brand-design-md | skill | design-systems | zephyrwang6/brand-design-md | | design-system-governance | skill | design-systems | Owl-Listener/designer-skills | | frontend-design | skill | design-systems | Ilm-Alan/frontend-design | | impeccable | platform | design-systems | pbakaus/impeccable | | localization-design | skill | design-systems | Owl-Listener/designer-skills | | ai-graphic-design-skill | skill | design-systems | designrique/ai-graphic-design-skill | | design-for-ai | package | design-systems | ryanthedev/design-for-ai | | distinctive-frontend | package | design-systems | Koomook/claude-frontend-skills | | huashu-design | skill | design-systems | alchaincyf/huashu-design | | logo-designer-skill | package | design-systems | neonwatty/logo-designer-skill | | styleseed | package | design-systems | bitjaru/styleseed |

Motion & Animation

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | remotion ★ | skill | creative-3d | remotion-dev/skills | | generative-media-skills | platform | creative-3d | SamurAIGPT/Generative-Media-Skills | | open-design | platform | creative-3d | nexu-io/open-design | | p5js-hermes | skill | creative-3d | nousresearch/hermes-agent | | algorithmic-art | skill | creative-3d | anthropics/skills | | cloudai-threejs | package | creative-3d | CloudAI-X/threejs-skills | | fal-ai-skills | package | creative-3d | fal-ai-community/skills | | shader-dev | skill | creative-3d | MiniMax-AI/skills | | superdesign-skill | platform | creative-3d | superdesigndev/superdesign-skill | | threejs-claude-skill-package | package | creative-3d | OpenAEC-Foundation/Three.js-Claude-Skill-Package | | threejs-ecs-ts | package | creative-3d | Nice-Wolf-Studio/claude-skills-threejs-ecs-ts | | webgpu-claude-skill | package | creative-3d | dgreenheck/webgpu-claude-skill |

Interaction & Polish

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | interaction-design ★ | package | interaction-polish | rastian/interaction-design-skills | | design-auditor | skill | interaction-polish | Ashutos1997/claude-design-auditor-skill | | information-architecture-and-navigation | skill | interaction-polish | jpoindexter/design-and-ai-skills | | interfaces-that-feel | skill | interaction-polish | Owl-Listener/designer-skills | | make-interfaces-better | skill | interaction-polish | jakubkrehel/make-interfaces-feel-better | | neo-user-journey | skill | interaction-polish | Cornjebus/neo-user-journey | | search-ux | skill | interaction-polish | Owl-Listener/designer-skills | | bencium-ux-designer | package | interaction-polish | bencium/bencium-marketplace | | design-lab | package | interaction-polish | 0xdesign/design-plugin | | interface-design-dammyjay | package | interaction-polish | Dammyjay93/interface-design | | simota-agent-skills | package | interaction-polish | simota/agent-skills | | taste-design-stitch | skill | interaction-polish | google-labs-code/stitch-skills |

Visual Components

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | apple-hig-skills ★ | package | visual-components | raintree-technology/apple-hig-skills | | color-expert ★ | skill | visual-components | meodai/skill.color-expert | | material-3-skill ★ | package | visual-components | hamen/material-3-skill | | shadcn-ui ★ | package | visual-components | shadcn-ui/ui | | copywriting-skill | skill | visual-components | judicael-s/Copywriting-skill | | design-tokens-skill | skill | visual-components | ilikescience/design-tokens-skill | | google-fonts-skill | platform | visual-components | sliday/google-fonts-skill | | hig-doctor | package | visual-components | raintree-technology/hig-doctor | | humanize-text | package | visual-components | gregorymm/humanize-text | | liquid-glass-skill | package | visual-components | haider-nawaz/liquid-glass-skill | | mobile-app-design | skill | visual-components | awesome-skills/mobile-app-design | | platform-design-skills | package | visual-components | ehmo/platform-design-skills | | swiftui-claude-skills | package | visual-components | 199-biotechnologies/swiftui-claude-skills | | awesome-design-skills | package | visual-components | bergside/awesome-design-skills | | ink-google | skill | visual-components | google-labs-code/design.md | | mobile-app-ui-design | skill | visual-components | ceorkm/mobile-app-ui-design | | sleek-design-mobile-apps | platform | visual-components | sleekdotdesign/agent-skills | | swiftui-patterns | package | visual-components | dimillian/Skills | | ui-ux-pro-max | platform | visual-components | nextlevelbuilder/ui-ux-pro-max-skill |

Accessibility & Quality

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | fixing-accessibility ★ | package | accessibility-quality | ibelick/ui-skills | | wcag-ai-skill ★ | package | accessibility-quality | Raze-Systems/wcag-ai-skill | | accessibility-agents | package | accessibility-quality | Community-Access/accessibility-agents | | addyosmani-quality | package | accessibility-quality | addyosmani/web-quality-skills | | baseline-ui | package | accessibility-quality | ibelick/ui-skills | | cloudflare-web-perf | skill | accessibility-quality | cloudflare/skills | | dark-pattern-audit | package | accessibility-quality | SidKH/skills | | react-doctor | package | accessibility-quality | millionco/react-doctor | | mastepanoski-skills | package | accessibility-quality | mastepanoski/claude-skills | | wcag-audit-patterns | package | accessibility-quality | wshobson/agents |

Design Review

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | plan-design-review ★ | skill | design-review | garrytan/gstack | | creative-director | skill | design-review | smixs/creative-director-skill | | design-debt-audit | skill | design-review | Owl-Listener/designer-skills | | design-impact-reporting | skill | design-review | Owl-Listener/designer-skills | | design-negotiation | skill | design-review | Owl-Listener/designer-skills | | design-review-garrytan | skill | design-review | garrytan/gstack | | designer-skills | package | design-review | Owl-Listener/designer-skills | | service-blueprint | package | design-review | j-clegg/service-blueprint-skill | | ux-designer-skill | skill | design-review | szilu/ux-designer-skill | | design-brief | skill | design-review | nexu-io/open-design | | design-consultation | skill | design-review | garrytan/gstack | | design-with-claude | package | design-review | imsaif/design-with-claude | | ux-ui-mastery | package | design-review | phazurlabs/ux-ui-mastery | | wondelai-skills | package | design-review | wondelai/skills |

Figma & Code

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | figma-official-skills ★ | platform | figma-code | https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server | | claude2figma | package | figma-code | senlindesign/claude2figma | | extract-design-system | package | figma-code | arvindrk/extract-design-system | | google-stitch-skills | package | figma-code | google-labs-code/stitch-skills | | work-with-design-systems | skill | figma-code | natdexterra/work-with-design-systems | | design-html | skill | figma-code | garrytan/gstack | | extract-design-md | skill | figma-code | google-labs-code/stitch-skills | | figma-skill | package | figma-code | nafiurrahmanniloy/figma-skill | | figma-variables-tokens-generator | package | figma-code | Shanmus4/figma-variables-tokens-generator |

Official Suites

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | anthropics-skills ★ | package | official-suites | anthropics/skills | | expo-skills | package | official-suites | expo/skills | | software-mansion-skills | package | official-suites | software-mansion-labs/skills | | vercel-skills | package | official-suites | vercel-labs/skills | | callstack-agent-skills | package | official-suites | callstackincubator/agent-skills | | composio-artifacts | skill | official-suites | ComposioHQ/awesome-claude-skills | | microsoft-skills | package | official-suites | microsoft/skills | | openai-skills | package | official-suites | openai/skills |

Diagrams

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | excalidraw-diagram ★ | skill | diagrams | coleam00/excalidraw-diagram-skill | | softaworks-agent-toolkit | package | diagrams | softaworks/agent-toolkit | | wireframe-skill | skill | diagrams | yhassy/wireframe-skill | | wireframer | skill | diagrams | agilek/wireframer-skill | | claude-wireframe-skill | skill | diagrams | Magdoub/claude-wireframe-skill | | excalidraw-agents365 | skill | diagrams | Agents365-ai/excalidraw-skill | | hand-drawn-diagrams | skill | diagrams | muthuishere/hand-drawn-diagrams | | nimbalyst-skills | package | diagrams | https://nimbalyst.com/skills |

Data Visualization

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | antvis-chart-skills ★ | package | data-visualization | antvis/chart-visualization-skills | | claud3 | package | data-visualization | dtran320/claud3 | | d3js-skill | skill | data-visualization | chrisvoncsefalvay/claude-d3js-skill | | markdown-viewer-skills | package | data-visualization | markdown-viewer/skills | | data-analysis-skill | skill | data-visualization | dongzhang84/data-analysis-skill | | data-viz-agent | skill | data-visualization | rohitg00/awesome-claude-code-toolkit |

Presentations

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | slidev-skill ★ | package | presentations | slidevjs/slidev | | marp-slides | skill | presentations | robonuggets/marp-slides | | revealjs-skill | package | presentations | ryanbbrown/revealjs-skill | | cc-slidev | package | presentations | rhuss/cc-slidev | | frontend-slides | skill | presentations | zarazhangrui/frontend-slides | | guizang-ppt | skill | presentations | op7418/guizang-ppt-skill | | marp-slide-quality | skill | presentations | nibzard/marp-slide-quality | | nanobanan-ppt | skill | presentations | op7418/NanoBanana-PPT-Skills |

Product & PM

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | deanpeters-pm-skills ★ | package | product-pm | deanpeters/Product-Manager-Skills | | assimovt-productskills | package | product-pm | assimovt/productskills | | design-sprint | package | product-pm | aoshimash/skills | | digidai-pm | skill | product-pm | Digidai/product-manager-skills | | lenny-skills | package | product-pm | RefoundAI/lenny-skills | | phuryn-pm-skills | package | product-pm | phuryn/pm-skills | | pm-skills | package | product-pm | product-on-purpose/pm-skills | | chadboyda-gtm | package | product-pm | chadboyda/agent-gtm-skills | | claude-pm-skills | package | product-pm | pratikshadake/claude-product-management-skills | | coreyhaines-marketing | package | product-pm | coreyhaines31/marketingskills |

Content Design

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | ux-writing-skill ★ | skill | content-design | content-designer/ux-writing-skill | | content-strategy | skill | content-design | Owl-Listener/designer-skills | | product-position | skill | content-design | firatcand/founder-skills |

Email Design

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | email-html-mjml ★ | package | email-design | framix-team/skill-email-html-mjml |

TUI & Terminal

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | textual-tui-skill ★ | package | tui-terminal | aperepel/textual-tui-skill | | tui-design-skill | package | tui-terminal | gfargo/tui-design-skill |

Motion (Extended)

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | framer-motion-skills ★ | package | motion-animation | C-Jeril/framer-motion-skills | | gsap-skills ★ | package | motion-animation | greensock/gsap-skills | | animate-skill | skill | motion-animation | delphi-ai/animate-skill | | claudedesignskills | package | motion-animation | freshtechbro/claudedesignskills | | design-motion-principles | package | motion-animation | kylezantos/design-motion-principles | | motion-design-skill | package | motion-animation | lottiefiles/motion-design-skill | | animate-css-skill | package | motion-animation | msrbuilds/animate-css-skill | | css-animation-skill | skill | motion-animation | neonwatty/css-animation-skill | | fixing-motion-performance | package | motion-animation | ibelick/ui-skills | | hyperframes | package | motion-animation | heygen-com/hyperframes | | wiggle-claude-skill | skill | motion-animation | talknerdytome-labs/wiggle-claude-skill |

Design Engineering (Extended)

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | emilkowalski-skill ★ | package | design-engineering | emilkowalski/skill | | format-storybook | skill | design-engineering | mikemai2awesome/agent-skills |

Design Research

| Skill | Type | Category | Upstream | |-------|------|----------|----------| | user-research-cookiy ★ | skill | design-research | cookiy-ai/user-research-skill | | software-ux-research | skill | design-research | vasilyu1983/AI-Agents-public |