game-theme-preview

Game Theme Preview & Contrast Fix

Outcome

Every part of every Bloom game theme is verifiable at a glance - each element rendered in its resolved colors with a WCAG ratio under it - and every low-contrast spot gets an AI-curated, palette-aware fix that the human approves element-by-element in the page itself. The agent then applies the approved colors and re-verifies. Also: a one-shot CLI to check the contrast of any two colors.

When To Use

• You changed colors in src/content/templates/template books/Games/gamesThemes.less.
• Someone reports a game element (dashed drop target, draggable, button, checkbox) is hard to see against the background.
• A tester wants to scroll through all themes and confirm they look good.
• You need the WCAG contrast ratio between two colors.

The canonical loop (do it this way)

This is the agreed process. The generator measures, validates, and visualizes; the agent chooses the colors (fitting each theme's palette and name); the human approves each change; the agent applies and re-verifies.

1. Measure. Generate the preview from the source LESS and publish it:

   py ".github/skills/game-theme-preview/generate_preview.py" <out.html>
   

   (<out.html> in the session scratchpad). Publish with the Artifact tool; the nav chips show each theme's issue count.
2. Curate (agent judgment, not just the algorithm). For each flagged element, dump the theme's resolved palette and failing checks (call build() per theme), then pick a color that a designer eyeballing the whole theme would choose:
   • reuse a color the theme already uses (text, header, an existing outline),
   • honor the theme's name/identity (keep coral-reef coral, cherry-blossom pink),
   • prefer one upstream change that fixes several checks (e.g. deepening --game-primary-color slightly), and note when one variable feeds another,
   • keep intentional translucency (darken / raise alpha rather than going opaque). Write the picks to a curated JSON file (scratchpad - it's a per-review input, not a repo asset): theme -> "Component title|check label" -> [ {label, why, changes:[[var,value],...]} ]
3. Validate + visualize. Re-run with the curated file as the 3rd argument:

   py generate_preview.py out.html "<path>/gamesThemes.less" curated.json
   

   Each curated pick renders first as a blue Recommended option with its rationale, in context, and is held to the same whole-element validation as a generated one - invalid picks are dropped, never shipped. Mechanical alternatives appear below as fallbacks. Republish to the same Artifact URL.
4. Human approves. The user ticks the options they want and clicks Copy approved changes; they paste back an apply-ready block.
5. Apply + re-verify. Edit the named .bloom-page.game-theme-* block(s) in gamesThemes.less (one variable per line, with a short comment + the issue id). Re-run the generator against the edited file and confirm the affected theme's nav chip is clean and no other theme regressed.