work-with-design-systems

Catalogue stub — full skill: natdexterra/work-with-design-systems

Decision tree

Is the full skill already installed? Check whether the skill at this location still has a das: block:
- Global: grep -q "^das:" ~/.agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- Project: grep -q "^das:" .agents/skills/work-with-design-systems/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- No das: block → full skill installed, invoke it and proceed
- das: block present → go to step 2

Detect scope, then install:

To detect scope:

[ -e ~/.agents/skills/work-with-design-systems ] && echo "global" || echo "project"

Global (installed with -g):

npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -g -y

Project (installed without -g):

npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -y

Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

Skill name: work-with-design-systems
Triggers: "work with design systems", "Figma inspect mode", "build design system Figma", "WCAG component audit"

What it does

Two operational modes for Figma design systems. Inspect mode: read-only analysis — WCAG accessibility audit, component quality scoring, and developer handoff documentation generation. Build mode: guided six-phase design system creation covering variable bindings, component slot architecture, and descriptions, with optional export to tokens.css and AI-readable rules files.

When NOT to use

Single component work not requiring system architecture
General design work without a design system — use mobile-app-design or ui-craft
Token enforcement during Figma writes — use claude2figma