design-agent-skills

A curated catalogue of design skills for Claude Code, Cursor, Codex, OpenCode, and 30+ other AI coding agents.
151 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   92 skills    full coverage
│  ○ All         151 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

npx design-agent-skills --picks -g          # 24 best-in-class skills, global
npx design-agent-skills --essentials -g     # ~92 skills covering all categories
npx design-agent-skills --all -g            # all 151 (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 (151 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:

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

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:

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

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 (64), 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.

Design Engineering

Motion & Animation

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 (Extended)

Design Engineering (Extended)

Design Research