Chameleon Adapt The chameleon doesn't force its environment to change. It reads the light, understanding where it lives. It sketches its form, creating structure. It shifts its hues, matching the forest around it. It adds texture—rough bark, smooth leaves, shifting light. Finally, it adapts completely, becoming one with its surroundings. The result feels organic, like it was always meant to be there. When to Activate User asks to "design this page" or "make it look Grove" User says "add some visual polish" or "theme this" User calls /chameleon-adapt or mentions chameleon/adapting Creating or enhancing pages for Grove sites Implementing seasonal decorations or weather effects Building glassmorphism containers for readability Adding nature components (trees, birds, particles) Working with the color palette system The Adaptation READ → SKETCH → COLOR → TEXTURE → ADAPT ↓ ↲ ↓ ↲ ↓ Understand Create Apply Add Final Light Structure Palette Effects Form Reference Routing Table Phase Reference Load When READ — No reference needed (context assessment) SKETCH references/layout-patterns.md When designing page structure COLOR references/color-palette.md When applying seasonal colors COLOR references/groveterm-system.md When writing user-facing text TEXTURE references/glass-components.md When adding glassmorphism TEXTURE references/nature-components.md When adding nature decorations Phase 1: READ The chameleon reads the light, understanding where it lives... Before choosing a single color, understand the environment. Assess three things: What season is it? import { season } from '$lib/stores/season'; const isSpring = $derived($season === 'spring'); const isAutumn = $derived($season === 'autumn'); const isWinter = $derived($season === 'winter'); // Summer is the default (no flag needed) What's the emotional tone? Tone Season Mood Hope, renewal Spring Cherry blossoms, new growth Growth, warmth Summer Full foliage, activity Harvest, reflection Autumn Falling leaves, warm colors Rest, stillness Winter Snow, frost, evergreens Dreams, far-future Midnight Purple glow, fireflies Season Mood Summary: Season Primary Colors Mood Spring springFoliage , cherryBlossomsPeak , wildflowers Renewal, hope Summer greens , cherryBlossoms Growth, warmth Autumn autumn , autumnReds Harvest, reflection Winter winter (frost, snow, frosted pines) Rest, stillness What's the page's purpose? Story/narrative pages — Full seasonal atmosphere Data-dense interfaces — Minimal decoration, focus on readability Landing/hero sections — Weather effects, randomized forests Forms/admin — Clean glass surfaces, no distractions Output: Season selection and decoration level decision (minimal / moderate / full) Phase 2: SKETCH The chameleon outlines its form, creating structure... Build the page skeleton with glassmorphism layers. Establish the layering formula, place glass containers, and wire up the sticky navigation pattern. Key decisions: Which glass variant fits each container? Where does content live in the z-index stack? What's the responsive breakdown? Reference: Load references/layout-patterns.md for the layering formula, sticky nav pattern, page section templates, responsive grid patterns, spacing system, and accessibility layout rules. Quick glass starter: import { Glass, GlassCard, GlassButton } from '@lattice/ui/ui';

Readable text over busy backgrounds

Reference: Load references/glass-components.md for all glass variants, props, CSS utility classes, and composition patterns. Output: Page structure with glass containers and z-index layers in place Phase 3: COLOR The chameleon shifts its hues, matching the forest around it... Apply the seasonal color palette from @autumnsgrove/lattice/ui/nature . Match palette choice to the emotional tone identified in READ. Use seasonal helper functions ( getSeasonalGreens , getCherryColors ) for consistent depth across the scene. Also apply Grove terminology through GroveTerm components — never hardcode Grove-specific words in user-facing text. Reference: Load references/color-palette.md for all color tokens with hex values, seasonal palettes (Spring/Summer/Autumn/Winter/Midnight), accent palettes, helper functions, and background gradient patterns. Reference: Load references/groveterm-system.md for the GroveTerm component suite, the [[term|standard]] syntax, common term vocabulary, and accessibility rules. Output: Color scheme applied with proper imports and seasonal variants; user-facing text uses GroveTerm components Phase 4: TEXTURE The chameleon adds depth—rough bark, smooth leaves, shifting light... Layer nature components for atmosphere. Generate the randomized forest (trees never overlap — 8% minimum gap). Add weather effects appropriate to the season. Place seasonal birds for life. Wire up Lucide icons (never emojis). Respect the responsive density table. Reference: Load references/nature-components.md for the full component catalog, randomized forest generation algorithm, weather effect snippets, seasonal bird placement, icon registry pattern, and mobile particle count adjustments. Output: Nature components layered with proper z-index and responsive density Phase 5: ADAPT The chameleon becomes one with its surroundings—complete adaptation... Final polish and accessibility. Reduce particle counts for mobile. Add the mobile overflow sheet menu for navigation. Verify prefers-reduced-motion wraps all particle layers. Confirm all touch targets are 44x44px minimum. Check dark mode glass variants. Run CI. Verification (mandatory): pnpm install gw ci --affected --fail-fast --diagnose If CI fails: read diagnostics, fix, re-run. The chameleon does not leave broken code behind its color shift. Visual Verification (mandatory for UI work): The chameleon doesn't just build — it looks at what it built. Use Glimpse to capture the result and iterate until the design matches the vision:

Prerequisite: seed the database if not already done

uv run --project tools/glimpse glimpse seed --yes

Capture the page you just built (--auto starts the dev server)

Local routing uses ?subdomain= for tenant isolation

uv run --project tools/glimpse glimpse capture \ "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \ --season autumn --theme dark --logs --auto

Verify all season × theme combos render correctly

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

Interactive check: click around, verify flows work visually

uv run --project tools/glimpse glimpse browse \ "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \ --do "click navigation links, scroll down" --screenshot-each --logs --auto

Optional: verify with random data too (proves UI handles any content)

uv run --project tools/glimpse glimpse seed --profile fake --fake-posts 5 --yes

Then capture with the randomly generated subdomain from seed output

The iterate loop: Capture → review screenshot → spot issues → fix → capture again. Repeat until the adaptation is complete. Don't ship UI you haven't seen. Final Checklist (after CI passes AND visual verification): CI: gw ci --affected passes clean Glimpse: Captured page looks correct in all target seasons Glimpse: Dark mode and light mode both verified visually Glimpse: No console errors in --logs output Glass effects used for text readability over busy backgrounds? Lucide icons, no emojis? Mobile overflow menu for navigation items? Decorative elements respect prefers-reduced-motion ? Touch targets at least 44x44px? Seasonal colors match the page's emotional tone? Trees randomized with proper spacing (8% minimum gap)? Dark mode supported with appropriate glass variants? User-facing text follows Grove voice? Grove terminology uses GroveTerm components (not hardcoded)? [[term]] syntax used in data-driven content strings? Output: Fully adapted, accessible, responsive UI ready for production — visually verified Chameleon Rules Intention Every color choice serves the content. Decoration enhances readability—it never obstructs it. Restraint Not every page needs a forest. Data-dense interfaces deserve clean glass surfaces without distraction. Authenticity Use the seasonal system as intended. Spring isn't just "light colors"—it's renewal and hope. Communication Use adaptation metaphors: "Reading the light..." (understanding context) "Sketching the form..." (building structure) "Shifting hues..." (applying colors) "Adding texture..." (layering components) "Full adaptation..." (final polish) When to Use Pattern Good For Glassmorphism Text over backgrounds, navbars, cards, modals Randomized forests Story pages, about pages, visual sections Seasonal themes Roadmaps, timelines, emotional storytelling Midnight Bloom Future features, dreams, mystical content Weather particles Hero sections, transitions between seasons Birds Adding life to forest scenes, seasonal indicators When NOT to Use Pattern Avoid When Heavy decoration Data-dense pages, admin interfaces, forms Particle effects Performance-critical pages, accessibility concerns Seasonal colors Brand-critical contexts needing consistent colors Multiple glass layers Can cause blur performance issues Randomization Content that needs to match between sessions Complex forests Mobile-first pages, simple informational content Example Adaptation User: "Make this about page feel like Grove" Chameleon flow: READ — "Page is about the team's journey. Emotional tone: reflection. Season: Autumn (harvest). Decoration level: full." SKETCH — "Load references/layout-patterns.md . Create glass card containers, sticky nav with glass-surface , layering formula in place." COLOR — "Load references/color-palette.md . Import autumn palette (rust, ember, amber, gold), warm gradients, autumnReds for accent. Load references/groveterm-system.md for user-facing text." TEXTURE — "Load references/nature-components.md and references/glass-components.md . Add randomized aspen/birch trees, FallingLeavesLayer , autumn birds (cardinals), Lucide icons." ADAPT — "Responsive density, reduced-motion support, GroveTerm for 'Welcome, Wanderer' greeting, 44px touch targets, dark mode verified. Run gw ci --affected ." Quick Decision Guide Situation Action Story/narrative page Full seasonal atmosphere, weather effects Data-dense interface Minimal decoration, focus on glass readability Landing/hero section Randomized forest, particles, seasonal birds Form/admin interface Clean glass surfaces, no nature distractions Mobile-first page Reduce tree count, simpler effects Accessibility concern Respect prefers-reduced-motion, keep glass for readability Integration with Other Skills /gathering-ui — Pairs chameleon with deer-sense for accessible UI in one pass /deer-sense — Accessibility audit after adaptation /grove-ui-design — Broader UI design patterns and component selection /beaver-build — Write tests covering interactive UI after adaptation The forest welcomes those who adapt with intention.