메뉴
The drum sounds. Chameleon and Deer gather for complete UI work. Use when designing interfaces that must be both beautiful and accessible.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Move mountains with patient strength. Wake from hibernation, gather what must move, carry it carefully, hibernate to verify, and wake again to confirm. Use when migrating anything — data, components, icons, documents, formats, or systems.
Gather scattered ideas into organized GitHub issues. The bee collects pollen from every flower, checks if the hive already has it, and carefully deposits new work in the comb for later. Never edits code—only organizes the work ahead. Use when creating issues from TODOs or planning work.
Better Auth framework reference — configuration, security, rate limiting, sessions, plugins, and production hardening. Use when configuring Better Auth, auditing auth security, adding plugins, or troubleshooting Heartwood.
Build multi-file features with unstoppable momentum. Trumpet the vision, gather materials, construct with strength, test thoroughly, and celebrate completion. Use when implementing features that span multiple files or systems.
Make your invisible work visible. The firefly drifts through your git history, gathers what you shipped into stories, glows them into human words, and helps you share them with the world. Use when you need patch notes, posts, or just want to see what you built.
The drum sounds. Hummingbird, Squirrel, Firefly, and Wren gather for a complete growth cycle — from finding opportunities to shipping findable content. Use when you want to plan and execute your content-to-discovery pipeline in one focused session.
| name | gathering-ui |
| description | The drum sounds. Chameleon and Deer gather for complete UI work. Use when designing interfaces that must be both beautiful and accessible. |
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.
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.
SUMMON → DISPATCH → GATE → DISPATCH → GATE → VERIFY
↓ ↓ ↓ ↓ ↓ ↓
Spec Chameleon Check Deer Check Visual
(self) (sonnet) ✓ (sonnet) ✓ Proof
| 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
The drum sounds. The glade awaits...
The conductor receives the UI request and prepares the dispatch plan:
Clarify the UI Work:
Confirm with the human, then proceed.
Output: UI specification, dispatch plan confirmed.
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:
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.
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:
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.
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):
The glade is complete. But the conductor looks with its own eyes...
Component Audit Gate (MANDATORY before page-level verification):
Before capturing full pages, the conductor audits every component the Chameleon built or modified in isolation using Showroom. This gate catches design token violations, off-grid spacing, missing focus styles, and hardcoded colors (including accent surfaces that should use var(--grove-accent-*) tokens) that page-level captures miss.
# For each component built or modified by the Chameleon:
uv run --project tools/glimpse glimpse showroom \
libs/engine/src/lib/ui/components/[path-to-component].svelte
# For new components, scaffold fixtures first:
uv run --project tools/glimpse glimpse showroom \
libs/engine/src/lib/ui/components/[path-to-component].svelte --scaffold
All Showroom compliance violations must be resolved before proceeding to page-level Glimpse. If violations are found, resume the Chameleon with the specific findings.
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):
glimpse showroom with no compliance violations--logs outputCompletion 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.
The conductor dispatches. It does not write CSS, build components, or audit accessibility.
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.
CI between Chameleon and Deer. Showroom audit on every component after Chameleon. CI after Deer's fixes. Glimpse after everything.
The conductor MUST capture and review Glimpse screenshots before declaring complete. CI passing is not the same as looking correct.
If iteration is needed, resume existing agents. They have context from their prior work.
The conductor does NOT:
Beautiful and accessible — the forest welcomes all. 🌲