Security News
upm Launches as a Fast, Tiny Package Manager Written in TypeScript
upm uses Node.js to deliver fast npm installs in about 250 KB, with a JavaScript API and security defaults.
By Sarah Gooding - Sep 29, 2026
New:Microsoft Teams Notifications Are Now Available in Socket.Learn more →
design-agent-skills
Advanced tools
design-agent-skills
Catalogue of design skills for Claude Code, Cursor, Codex, OpenCode, and Droid
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
| Profile | Flag | Skills | Best for |
|---|---|---|---|
| Picks ★ | --picks | 24 | One best-in-class per category. Start here. |
| Essentials | --essentials | ~92 | Full coverage, no redundancy. |
| All | --all | 151 | Everything including niche and experimental. |
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:
| Tier | Type | Count | Owned by | Updates |
|---|---|---|---|---|
| Routing | router | 6 | This repo — always | skills update always reaches these |
| Implementation | skill / package / platform | 151 | 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
mkdir skills/<name> && touch skills/<name>/SKILL.md skills/<name>/stub.yaml- Fill frontmatter + body sections (decision tree, install, invoke, what it does)
- Set
type: skill,type: package, ortype: routerinstub.yaml - Add a row to the table below
- 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(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.
| 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 ★ | package | 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
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 |
FAQs
Catalogue of design skills for Claude Code, Cursor, Codex, OpenCode, and Droid
We found that design-agent-skills demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 31 Aug 2026
Related posts
Company News
Socket Joins New OpenJS Program to Fund Node.js Security Work
Socket is joining the OpenJS Security Stewardship Program to fund Node.js vulnerability research, maintainer remediation, and security releases.
By Sarah Gooding - Sep 25, 2026
Security News
Re-Enabled GitHub Actions Expose Thousands of Repositories to Mini Shai-Hulud
Two compromised GitHub Actions were re-enabled with malicious tags intact, exposing thousands of downstream repositories to Mini Shai-Hulud.
By Karlo Zanki - Sep 24, 2026