FE lab: add variant-driven design lab skill

[KailasMahavarkar]

Adds a new workflow skill, lab - a discipline for designing frontend sections and pages by exploring real-React variants in an isolated, dev-only lab, locking winners one at a time, and assembling the page additively before any production code is written.

The problem it kills: design-by-mockup drifts. A static HTML comp or Figma frame looks right, then gets rebuilt in the real framework and quietly becomes something else - different spacing, different responsive behavior, different tokens. You approve a picture and ship a stranger. The lab moves exploration into the real stack but keeps it out of production, so what's approved is literally what ships.

Why it works better

	Design-by-mockup (HTML / Figma)	The Lab
Where variants live	throwaway HTML, static frames	real React, real components, real tokens
Responsive	guessed, or a separate artifact	desktop + mobile judged together (toggle)
Page assembly	imagined in your head	additive /lab-view - the real page, growing
Drift to production	high - rebuilt from scratch	zero - approve, then wire the same components
What you approve	a picture	the actual page

How it works

flowchart TD
  T["Ask target<br/>(section or 1 page)"] --> S["Ask 1-3<br/>scope Qs"]
  S --> C["COOK<br/>build 3 variants<br/>desktop + mobile"]
  C --> Q{happy?}
  Q -- "no · same target" --> C
  Q -- yes --> L["LOCK winner"]
  L --> D["destroy losers<br/>cook empties"]
  L --> V["VIEW<br/>additive page<br/>grows by 1"]
  V --> N{page done?}
  N -- "no" --> T
  N -- yes --> W["FINAL WIRING<br/>real tokens + fonts<br/>→ production"]

Loading

One target at a time (a section, or at most one page). Cook its variants, lock the winner, the cook empties, the locked winner joins /lab-view. Repeat until the page is whole, then leave the lab and wire it for real.

The harness

┌──────────────────────────────────────────────────┐
│ lab navbar (plain, very low)            [☾/☀] [▢] │  theme · mobile-sidebar toggle
├───────────────────────────────────────┬┄┄┄┄┄┄┄┄┄┄┄┤
│  ┌─ shared site navbar ──────────────┐ ┊  mobile  ┊
│  │  MAIN preview (desktop)           │ ┊  sidebar ┊  ← toggled on/off
│  │   /lab-cook → current variants    │ ┊  ~390px  ┊     from the navbar
│  │   /lab-view → full connected page │ ┊  mirror  ┊
│  └───────────────────────────────────┘ ┊          ┊
└───────────────────────────────────────┴┄┄┄┄┄┄┄┄┄┄┄┘
                              all dev-only · never ships

Real-stack proof (prototype on a live project)

The build - locked targets (✓) and the in-flight target's variants, all real React, assembling additively:

/lab-view - the additive page, desktop and mobile judged together:

Contents

File	Purpose
skills/lab/SKILL.md	The skill - Iron Laws, the 3 pieces, CLUD labcycle, setup vs steady-state, variant rules, red-flag table, final-wiring handoff
skills/lab/references/harness-blueprint.md	Concrete Vite+React scaffolding: cook / view / chrome / locked, dev-gated routes, LabShell with theme + toggleable mobile sidebar
skills/lab/references/scope-questions.md	The 1-3 scope-question playbook
skills/lab/assets/*.png	Showcase screenshots

Iron Laws

1. One target in cook at a time.
2. Cook empties on lock (no variant graveyard).
3. View before code.
4. Scaffold is throwaway (scoped CSS / CDN fonts / inline styles never ship).
5. Dev-only.

Scope / status

Standalone skill drop. Not yet wired into skills/INDEX.md, the compiled hyperstack.bootstrap.md, or MCP/agent hooks - intentional, separate follow-up. Installed locally for testing via a symlink at ~/.claude/skills/lab.

Verification

$ rg -m3 '^(name|category|description):' skills/lab/SKILL.md
name: lab
category: workflow
description: Use when designing or revamping a frontend section or whole page ...

Frontmatter parses the way scripts/generate-skills-index.ts expects.