Skip to content

v0.8.0 — design-system command

Choose a tag to compare

View all tags
@marianif marianif released this 24 May 17:34
· 4 commits to main since this release
v0.8.0
0bd072a

design-system

New /impeccable-native design-system command. Sits above rebrand (vibe + tokens) and migration (mechanical token application) as the compositional layer: designs atoms, molecules, and especially organisms as living things on screens — tied to a vibe trait, a real user journey, and concrete file:line evidence.

The five-question gate

An organism must answer all five before it ships:

  1. Job — what does it let the user do, verb-led
  2. Lives in — which screen(s), which region, which moment in the flow
  3. States — ≥3 meaningful states (single-state things are molecules)
  4. Reacts to — scroll, focus, sibling changes, data arrival, dwell, app foreground
  5. Neighbors — who yields to whom, who dims when, who coexists

Captured in a life block on every organism entry in design-system-plan.json. The agent must refuse to author entries missing any of the five.

Three acts

  • Act 1 (scan) — forensics pipeline (seven scripts) catalogues components, clusters duplicates, finds dead + transitively-dead code, harvests implicit organism candidates from repeated JSX, maps per-screen choreography. Brownfield/greenfield auto-detect.
  • Act 2 (plan) — agent-authored design-system-plan.json with atoms / molecules / organisms / cleanup. Organisms harvested first (screen-driven), then strategy-projected from PRODUCT.md journeys. Per-cluster cleanup approval gates.
  • Act 3 (execute) — cleanup first (cluster-by-cluster on approval), then atoms, molecules, organisms. Each phase commits separately.

New scripts (skill/scripts/design-system/)

Script Job
component-inventory.mjs Props surface, internal composition, usage count, last-touched, kind heuristic
duplication-report.mjs Clusters via name + prop Jaccard + JSX root-shape signals; union-find on duplicate pairs
dead-code-report.mjs Direct + transitive dead; flags dynamically-referenced names as not-safe-to-delete
composition-patterns.mjs Organism candidates surviving a four-filter bar: ≥6 elements, ≥4 distinct types, non-bare root, interaction signal, ≥2-screen spread. Near-duplicate clustering at ≥80% multiset Jaccard
app-anatomy.mjs Screens + routes + journeys + goals + personas from filesystem and PRODUCT.md
screen-choreography.mjs Per-screen regions (top-fixed / above-fold / main-scrolling / bottom-fixed / overlay), occupants, entries, exits
design-system-scan.mjs Orchestrator; greenfield/brownfield-aware; readiness verdict; blocks if brand-brief.json missing

Refusal rules (in the reference doc)

  • No organism without all five life fields, ≥3 states, ≥1 named neighbor
  • No organism without ≥3 use sites OR a verbatim quote from app-anatomy.json / brand brief
  • No cleanup without per-cluster approval
  • No flattening duplicates without describing each member's job
  • No modifying brand-brief.json or tokens (that's rebrand's territory)
  • No "just in case" components

Verified

  • All 7 scripts run end-to-end against a fixture
  • Implicit-organism filter correctly reduces 25+ raw sub-trees to 1 real candidate with cross-screen evidence
  • 84/84 tests pass

🤖 Generated with Claude Code

Assets 2
Loading