Gathering UI 🌲🦎🦌

The drum echoes through the glade. The conductor stands at the clearing's center, orchestrating two very different kinds of attention. The Chameleon arrives with fresh eyes — no preconceptions about what the page should look like, just the spec and the forest's palette. The Deer arrives later, also with fresh eyes — it hasn't watched the CSS being written, so it tests accessibility without unconscious trust. Beautiful and accessible, built by isolated minds.

When to Summon

Designing new pages or interfaces
Implementing complete UI features
Ensuring visual design meets accessibility standards
Creating Grove-themed experiences
When beauty and inclusion must coexist

IMPORTANT: This gathering is a conductor. It never writes components or audits accessibility directly. It dispatches subagents — one per animal — each with isolated context and an intentional model. The conductor only manages handoffs and gate checks.

The Gathering

SUMMON → DISPATCH → GATE → DISPATCH → GATE → VERIFY
  ↓         ↓        ↓        ↓        ↓        ↓
Spec    Chameleon  Check     Deer    Check    Visual
(self)  (sonnet)    ✓      (sonnet)   ✓     Proof

Animals Dispatched

Order	Animal	Model	Role	Fresh Eyes?
1	🦎 Chameleon	sonnet	Design UI with Grove aesthetics	Yes — sees only the UI spec
2	🦌 Deer	sonnet	Audit accessibility independently	Yes — sees file list only, not design reasoning

Reference: Load references/conductor-dispatch.md for exact subagent prompts and handoff formats

Phase 1: SUMMON

The drum sounds. The glade awaits...

The conductor receives the UI request and prepares the dispatch plan:

Clarify the UI Work:

What page/component are we designing?
What's the emotional tone?
Which season should it reflect?
What's the content structure?

Confirm with the human, then proceed.

Output: UI specification, dispatch plan confirmed.

Phase 2: ADAPT (Chameleon)

The conductor signals. The Chameleon shifts its colors...

Agent(chameleon, model: sonnet)
  Input:  UI specification only
  Reads:  chameleon-adapt/SKILL.md + references (MANDATORY)
  Output: built components + file list

Dispatch a sonnet subagent to design and build the UI. The Chameleon receives ONLY the UI specification. It reads its own skill file and executes its full workflow.

What the Chameleon builds:

Svelte components with glassmorphism
Seasonal color palette integration
Nature decorations (trees, creatures, weather)
Mobile-responsive layouts
Reduced motion support
GroveTerm components for user-facing terminology

Handoff to conductor: File list (every file created/modified), component summary (what was built, glass variants used, seasonal elements).

Gate check: Run gw dev ci --affected --fail-fast — must compile. If build fails, resume Chameleon.

Phase 3: SENSE (Deer)

The Deer steps into the glade. It hasn't watched the colors change...

Agent(deer, model: sonnet)
  Input:  UI file list ONLY (not Chameleon's design reasoning)
  Reads:  deer-sense/SKILL.md + references (MANDATORY)
  Output: accessibility report + applied fixes

Dispatch a sonnet subagent to audit accessibility. The Deer receives ONLY the file list — NOT the Chameleon's design decisions or reasoning. This isolation is intentional: the Deer should test what's rendered, not trust what was intended.

What the Deer audits:

Keyboard navigation (tab order, focus management, escape handling)
Screen reader compatibility (ARIA labels, semantic HTML, live regions)
Color contrast (4.5:1 minimum, WCAG AA)
Touch targets (44px minimum)
Reduced motion (prefers-reduced-motion respected)
Focus indicators visible

Handoff to conductor: Accessibility report (violations found, fixes applied, WCAG level achieved), updated file list.

Gate check: Run gw dev ci --affected --fail-fast — must still compile after a11y fixes.

Phase 4: ITERATION (When Deer Finds Issues)

If the Deer's report includes issues it couldn't fix directly (e.g., structural changes needed for keyboard navigation, color scheme changes for contrast):

Resume Chameleon with Deer's specific findings
Chameleon applies fixes
Gate check: CI passes
Resume Deer to re-verify only the changed files
Max 2 iterations — then escalate to human

Phase 5: VERIFY

The glade is complete. But the conductor looks with its own eyes...

Visual Verification (MANDATORY for UI gatherings):

# Seed database if not already done
uv run --project tools/glimpse glimpse seed --yes

# Capture across all seasons and themes
uv run --project tools/glimpse glimpse matrix \
  "http://localhost:5173/[page]?subdomain=midnight-bloom" \
  --seasons spring,summer,autumn,winter --themes light,dark --logs --auto

# Interactive verification — click around, verify flows
uv run --project tools/glimpse glimpse browse \
  "http://localhost:5173/[page]?subdomain=midnight-bloom" \
  --do "click navigation, scroll content, interact with elements" \
  --screenshot-each --logs --auto

Review every screenshot. If something looks wrong — fix it and capture again.

Validation Checklist (after visual verification):

Completion Report:

🌲 GATHERING UI COMPLETE

UI: [Name]

DISPATCH LOG
  🦎 Chameleon (sonnet) — [X components built, Y files created/modified]
  🦌 Deer (sonnet)       — [Z a11y issues found, W fixed]

GATE LOG
  After Chameleon: ✅ compiles clean
  After Deer:      ✅ compiles clean, a11y verified
  Iterations:      [N iterations / none needed]
  Visual:          ✅ Glimpse matrix captured and reviewed
  Final CI:        ✅ gw dev ci --affected passes

ACCESSIBILITY
  Keyboard nav: ✅
  Screen reader: ✅
  Contrast: ✅ [ratios]
  Touch targets: ✅ 44px+
  Reduced motion: ✅
  WCAG level: [AA/AAA]

The glade welcomes all wanderers.

Conductor Rules

Never Do Animal Work

The conductor dispatches. It does not write CSS, build components, or audit accessibility.

Fresh Eyes Are a Feature

The Deer hasn't watched the Chameleon work. It sees only the rendered result, not the design intent. This isolation catches contrast issues, missing labels, and navigation gaps that a sympathetic observer would miss.

Gate Every Transition

CI between Chameleon and Deer. CI after Deer's fixes. Glimpse after everything.

Visual Proof Required

The conductor MUST capture and review Glimpse screenshots before declaring complete. CI passing is not the same as looking correct.

Resume, Don't Restart

If iteration is needed, resume existing agents. They have context from their prior work.

Anti-Patterns

The conductor does NOT:

Write components itself
Let Deer see Chameleon's design reasoning (isolation is the point)
Skip Glimpse verification ("CI passed so it looks fine")
Skip the Deer phase ("it's just a small component")
Declare complete without visual proof

Beautiful and accessible — the forest welcomes all. 🌲

gathering-ui