generate-y1-theme

name: generate-y1-theme description: Generates all SVG assets for a Y1 music player theme. Use this when asked to generate theme assets, create SVGs for a Y1 theme, or build a new theme from a style guide.

Y1 Theme Asset Generation

Generate all 86 SVG assets for a Y1 theme. Follow every instruction here precisely — coherence across all assets depends on it.

Before You Start

1. Identify the theme directory. It will be under themes/<name>/ or examples/<name>/. If not told, ask.
2. Read <theme-dir>/style-guide.md — this is the locked aesthetic. Every decision must comply with it.
3. Read <theme-dir>/icon-catalog.json — this is the complete asset registry. Every file you need to generate is listed here with its svgFilename, dimensions, designIntent, and category.
4. Write all SVGs to <theme-dir>/svg/.
5. Do not stop for review between assets. Generate all 86, then summarise.

SVG Technical Structure

Every SVG must follow this exact structure:

<svg xmlns="http://www.w3.org/2000/svg" width="W" height="H" viewBox="0 0 W H">
  <defs>
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="2.5" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="glow-strong" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>
  <!-- background always first -->
  <rect width="W" height="H" fill="#0A0A14"/>
  <!-- icon content -->
</svg>

• W and H come from the dimensions field in the catalog (e.g. "166x166" → width="166" height="166")
• Use stroke-linecap="round" and stroke-linejoin="round" throughout
• Add additional named filters in <defs> as needed for specific glow colours

Palette (from style-guide.md)

Category Style Weight

ON/OFF State Pairs

Assets with -on / -off suffixes are state pairs. The rules are strict:

• ON state: full palette colours + appropriate filter="url(#glow)" or filter="url(#glow-strong)" on key elements
• OFF state: identical shapes, but ALL strokes and fills changed to #3A3A5C, NO filter attributes at all
• The shape must be pixel-identical between on and off — only colour and filter change

Sequential Sets

Some assets are a progression (battery levels, backlight durations, timer durations):

• Use the same base shape for every step in the set
• Vary only fill amount, colour intensity, or segment count
• The progression should read visually as a clear sequence (e.g. battery-1 is almost empty → battery-4 is full)

Battery specifics (64×32)

• Pill shape: outer rect with rounded corners, small terminal nub on right
• 4 segments filled left-to-right: 1=#E84040 (1 seg), 2=#C8A96E (2 segs), 3=#F0EDE6 (3 segs), 4=#3FFFD8 (4 segs full)
• Charging variants: identical pill + a lightning bolt centred over it (white stroke)

Backlight specifics (146×146)

• 8 steps from dim crescent moon (10s) → blazing full sun (always-on)
• Steps: crescent → quarter moon → half moon → 3/4 moon → full moon → sun with few rays → sun with many rays → blazing sun with glow-strong

Timer specifics (146×146)

• timer-off: empty hourglass, crescent moon, all #3A3A5C
• timer-10 through timer-120: hourglass with progressive sand fill (red → sand → cyan as duration increases) + crescent moon in corner

EQ Preset Icons (146×146)

10 EQ presets, each with a unique 5-bar frequency profile:

• eq-normal: flat, all bars same height, white
• eq-classical: low, low, mid, low, low — a wide gentle curve, cyan
• eq-dance: tall bass, mid notch, tall treble — violet
• eq-flat: all bars at minimum height, dim
• eq-folk: mid-forward hump, sand
• eq-heavymetal: scooped mids (tall-short-tall-short-tall), red
• eq-hiphop: very tall bass (left 2), rest shorter, violet
• eq-jazz: moderate curve peaking at mid, cyan
• eq-pop: V-shape (tall bass + tall treble, low mids), sand
• eq-rock: tall bass, tall treble, moderate mids — red/white

Working Through the Catalog

For each entry in icon-catalog.json:

1. Note the svgFilename — that is the output filename, written to <theme-dir>/svg/<svgFilename>
2. Note dimensions for the viewBox
3. Read designIntent carefully — it describes exactly what to draw
4. Read description for additional context
5. Apply category style weight rules above
6. Create the SVG file

Work through all entries. When done, report a count of files created and any that were skipped.

Next step: run /validate-y1-theme to check dimensions, structure, and ON/OFF pairs before deploying.