design-systemlisted

Govern the DESIGN.md — Google's open standard for design tokens (YAML frontmatter + eight prose sections). Auto-activates during UI edits to enforce token-only sourcing for colors, typography, spacing, and corner radius. Also exposes seven CLI-backed subcommands — audit (lint + fix proposals), diff (regression check), export (Tailwind / DTCG), spec (canonical spec emission), migrate (port from legacy Stitch format), init (minimal scaffold), audit-extensions (drift check between extension namespaces and globals.css @theme). When a UI/UX change is requested, DESIGN.md is updated first, audited, then code propagates.
coroboros/agent-skills · ★ 0 · Web & Frontend · score 78

Install: claude install-skill coroboros/agent-skills

# Design System Two modes for governing a project's visual identity: 1. **Auto-activate** — when editing UI files (components, pages, layouts, styles, `DESIGN.md`, `tailwind.config.*`), the skill reads `DESIGN.md` first and enforces token-only sourcing for colors, typography, spacing, and corner radius. 2. **Subcommands** — `/design-system <verb> [path]` exposes the full DESIGN.md lifecycle, built on the canonical `@google/design.md` CLI. ## Subcommand routing Parse the first positional token of `$ARGUMENTS`. If it matches a verb below, load the referenced file and follow its workflow. Otherwise proceed with the token-enforcement workflow at the end of this document. | First token | Mode | Reference | |-------------|------|-----------| | `audit` (aliases: `check`, `lint`) | Lint + fix proposals, human-readable report | `references/subcommand-audit.md` | | `diff` | Regression check between versions (git-aware) | `references/subcommand-diff.md` | | `export` | Tokens → Tailwind theme or W3C DTCG `tokens.json` | `references/subcommand-export.md` | | `spec` | Emit the canonical spec from the installed CLI | `references/subcommand-spec.md` | | `migrate` | Port legacy Stitch 9-section DESIGN.md → Google standard | `references/subcommand-migrate.md` | | `init` | Scaffold a minimal valid DESIGN.md (fallback from `/award-design`) | `references/subcommand-init.md` | | `audit-extensions` | Bidirectional drift check — DESIGN.md extension YAML ↔ prose refs ↔ `globals.css` `@theme` | `