Design System Skill
The entry point for all UI work in the Unite-Group Nexus. This skill does not build components directly — it routes to the correct specialist and ensures every design decision is grounded in DESIGN.md.
The four-layer design stack:
| Layer | Skill | When |
|---|---|---|
| 1. Context | design-intelligence |
Start of any UI work — read/create DESIGN.md |
| 2. Build | ui-component-builder |
Building or updating React components |
| 3. Audit | impeccable (installed skill) |
Before marking any component done |
| 4. Verify | visual-qa |
After build — screenshot + regression check |
External dependency: impeccable is not a repo skill — it is installed locally at
~/.claude/skills/impeccable (pbakaus/impeccable v3.9.1). If it is absent on this machine,
install it before the audit stage; do not fall back to the deprecated design-audit.
Quick Routing Guide
"Build me a [component]"
→ design-intelligence (read DESIGN.md) → ui-component-builder (generate 3 variants) → /impeccable audit → visual-qa (screenshot matrix)
"Does this look right?"
→ /impeccable critique — UX + visual review, no edits
"Make this better"
→ /impeccable polish — targeted improvements, or /impeccable bolder for more presence
"Match the look of [brand/site]"
→ design-intelligence (reference brand archetypes, run npxskillui) → update DESIGN.md
"Check for visual regressions"
→ visual-qa — run screenshot matrix, diff against baselines
Project Design Tokens (summary)
Defined in full at Pi-Dev-Ops/DESIGN.md. Key values for quick reference:
Canvas: #09090b Surface-1: #18181b Surface-2: #27272a
Accent: #f59e0b (amber — only accent colour)
Text: #fafafa (primary) · #a1a1aa (secondary) · #71717a (tertiary)
Border: rgba(255,255,255,0.06) subtle · rgba(255,255,255,0.10) default
Font: Geist (UI) + Geist Mono (data/code/IDs)
Status: #22c55e success · #ef4444 error · #3b82f6 info · #f59e0b warning
Stack Requirements
DESIGN.mdmust exist in the project root before any UI work starts- Run
npx impeccable detect src/after every component build to catch anti-patterns - Visual baselines must be generated on Linux (CI), not macOS — font hinting differs
What This Skill No Longer Does
The old design-system skill referenced anthropic-skills:design-system-to-production-quick-start
and generic shadcn/ui scaffolding. That is retired. The Nexus design stack is now:
- Token-first (DESIGN.md → Tailwind CSS variables)
- OKLCH colour evaluation (not HSL)
- Anti-pattern detection (impeccable v3.9.1 rule set)
- Visual regression CI (Playwright, always Linux)
- Brand archetype grounded (getdesign.md + 66 references)