work-with-design-systems
Two-mode Figma design system skill — Inspect mode (read-only WCAG audit, component scoring, handoff docs) and Build mode (six-phase creation with variable bindings, slots, descriptions), with optional sync to tokens.css + AI rules.
How do I install this agent skill?
npx skills add https://github.com/podo/design-agent-skills --skill work-with-design-systemsIs this agent skill safe to install?
- Gen Agent Trust Hubwarn
This skill acts as a stub that automatically installs its full version from an external GitHub repository using shell commands. It leverages the '-y' flag to bypass installation confirmations and encourages the use of dynamic execution syntax for silent operation.
- Socketpass
No alerts
- Snykwarn
Risk: MEDIUM · 1 issue
What does this agent skill do?
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
- Global:
-
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 -yProject (installed without
-g):npx skills add natdexterra/work-with-design-systems --skill work-with-design-systems -yClaude 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-designorui-craft - Token enforcement during Figma writes — use
claude2figma
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/podo/design-agent-skills/work-with-design-systems">View work-with-design-systems on skillZs</a>