design-system

name	design-system
description	Design stack orchestrator for Pi-CEO. Routes UI work to the correct specialist skill (design-intelligence, ui-component-builder, design-audit, visual-qa). Start here for any design task.
automation	manual
intents	design, feature

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	design-audit	Before marking any component done
4. Verify	visual-qa	After build — screenshot + regression check

---

Quick Routing Guide

"Build me a [component]" → design-intelligence (read DESIGN.md) → ui-component-builder (generate 3 variants) → design-audit (/audit) → visual-qa (screenshot matrix)

"Does this look right?" → design-audit (/critique) — UX + visual review, no edits

"Make this better" → design-audit (/polish) — targeted improvements, or (/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.md must 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 24-pattern set)
• Visual regression CI (Playwright, always Linux)
• Brand archetype grounded (getdesign.md + 66 references)