usulpro
/
math-tasks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
math-tasks/tasks/space-coloring/CLAUDE.md

3.4 KiB
Raw Blame History

Space Coloring Task Type

Theme: nms (assets/themes/nms/)

Full-page line-art coloring worksheets for kids. Each page is a single A4 portrait scene from a No Man's Sky-inspired universe: a detailed spaceship surrounded by asteroids, planets, and floating space artifacts. Header and footer are kept minimal so the coloring image dominates.

Layout

  • Page: A4 (210mm x 297mm), portrait, white background
  • Header: 16mm — small uppercase wordmark left, title centered, scene number right (NN / NN)
  • Main: flex-1, image centered with object-contain, 8mm side padding, 3mm vertical padding
  • Footer: 32mm — footers/planet{1-9}.jpeg with linear-gradient mask (transparent at top, solid at bottom), scene legend overlaid (italic, centered)

Coloring Image Assets

  • Path: assets/themes/nms/coloring-pages/coloring{N}.png
  • Raw originals: assets/themes/nms/coloring-pages/raw/
  • Dimensions: 864 x 1184 (ratio ~0.73). Fit cleanly inside a ~190mm x ~260mm area on A4.
  • Style: clean black bold outlines, no shading, no gray fills, pure white background, kid-friendly cartoon detail.

Image Generation

Each coloring image is generated via the gen-image skill (Banatie API). Per-scene prep folders live in temp/scene{N}/ with:

  • prompt.md — full prompt + legend + CLI command
  • ref-ship-*.jpeg — spaceship reference (from hero-images/)
  • ref-asteroid*.png — asteroid reference (from items/asteroids/)

Composition rules (every scene)

  • Main subject: one spaceship in the center foreground, lots of mechanical detail
  • 2-3 large detailed asteroids in the foreground
  • 5-10 smaller asteroids in the background
  • A planet (full or partial) in one corner as background
  • A few floating space artifacts (crystals, debris, alien orbs, satellite shards)
  • Action context (firing, mining, scanning, hiding, exploring)
  • 3D depth, like a video-game screenshot
  • Clean bold outlines only — no shading, hatching, or gray fills
  • White background

Settings

  • --aspect-ratio 4:3 (portrait, fits A4)
  • --template minimalist
  • --ref <ship> + --ref <asteroid> (two refs, max)

Scene Legends

Every page has a story legend in the footer (e.g. "Last Stand at Veridian Belt — a heavy gunship fires its twin cannons..."). The first phrase (scene title) is shown in text-indigo-700 Fredoka, the rest in italic text-indigo-950. Keep legends to 1-2 short sentences.

Color Palette

Element Class
Title text-indigo-950
Wordmark text-indigo-300
Page indicator text-indigo-400
Legend body text-indigo-950 (italic)
Legend title text-indigo-700 (Fredoka)
Header divider border-indigo-100

Scripts

  • scripts/generate.mjs — copies template -> output, runs postGenerate(). No data layer (coloring pages have no editable parameters).

Editor

None. Coloring pages have no editable data — nothing to move, scale, or rotate inside a printed line-art page.

Adding a Page

  1. Drop a new prep folder in temp/scene{N}/ with prompt.md + ref images
  2. Generate the line-art via gen-image skill into assets/themes/nms/coloring-pages/coloring{N}.png
  3. Update .md with the new scene legend
  4. Duplicate a page block in .template.html, swap the image path, footer planet, page indicator, and legend
  5. Run generate.mjs and verify screenshot
  6. Update index.html doc card (page count)