toh-ui

/toh-ui - Create/Edit UI

Signature Command 🎨

/toh-ui [description]
/toh-u [description]

What Happens

0. 🚨 READ MEMORY (Tiered Loading — don't blind-read all 7)
   ├── Tier 1 · ALWAYS at start (~800 tokens)
   │   ├── .toh/memory/active.md   (current task)
   │   └── .toh/memory/summary.md  (project overview)
   ├── Tier 2 · read per task type
   │   ├── .toh/memory/architecture.md (structure — build/code work)
   │   ├── .toh/memory/components.md   (existing components — build/code work)
   │   └── .toh/memory/changelog.md    (recent changes — debug work)
   └── Tier 3 · read ONLY when referenced
       ├── .toh/memory/decisions.md    (past decisions)
       └── .toh/memory/agents-log.md   (agent activity)

1. READ Skills
   ├── ~/.claude/skills/ui-first-builder/SKILL.md
   └── ~/.claude/skills/design-craft/SKILL.md

1.5 🎨 READ ROOT DESIGN.md FIRST (before any UI code)
   ├── Exists → re-read it; every color/font/radius/motion value
   │   traces to its tokens
   └── Missing → generate it first via design-reviewer Mode A /
       design-craft DESIGN-TEMPLATE.md
       (compact retrofit for existing projects: infer identity from
       current globals.css + pages, then SHOW the inferred identity
       in the report so the user can correct it)

2. ANALYZE Request
   ├── New page? → Create in app/[name]/page.tsx
   ├── New component? → Create in components/features/
   ├── Edit existing? → Modify in place
   └── Layout change? → Update layout.tsx

3. GENERATE UI
   ├── Use shadcn/ui components
   ├── Add realistic mock data
   ├── Include hover/loading states
   └── Make it responsive

4. VERIFY
   └── Dev server shows changes (HMR)

5. 🚨 SAVE MEMORY
   ├── Update active.md (ALWAYS — current state)
   ├── Update summary.md (if project shape changed — new pages)
   ├── Update components.md (new components)
   ├── Update architecture.md (if new pages)
   ├── Update changelog.md (UI changes)
   └── Update agents-log.md (if agents delegated)