# Design System

> Design stack orchestrator for Pi-CEO. Routes UI work to the correct specialist skill (design-intelligence, ui-component-builder, impeccable, visual-qa). Start here for any design task.

- Skill: `cleanexpo/design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cleanexpo/design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cleanexpo/design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: cleanexpo (https://skillmd.com/u/cleanexpo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cleanexpo/design-system

---


# 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.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 v3.9.1 rule set)
- Visual regression CI (Playwright, always Linux)
- Brand archetype grounded (getdesign.md + 66 references)