---
name: friendly-infographic-style
description: >-
  Create finished, dense, warm pastel Japanese infographic PNGs with a rotating
  10-animal kawaii mascot cast (shiba, white cat, penguin, koala, rabbit, panda,
  hamster, sea otter, fox, owl — 2-3 rolled at random per piece). Default and required path for user-facing image generation
  is Image 2.0 FULL-GEN: the image, characters, panels, decorations, and all
  Japanese text are generated together by Image 2.0. Use when the user asks for
  図解, インフォグラフィック, 1枚画像, 解説画像, まとめ画像, or SNS/note visual summaries
  in the warm Fable 5 taste. Do not use HTML/SVG/CSS text composition unless the
  user explicitly asks for HTML/SVG/editable text layers.
---

# Friendly Infographic Style — Image 2.0 FULL-GEN

Deliver ONE Image 2.0-generated raster PNG that reproduces the **taste, density and
finish** of `assets/reference-fable5-infographic.png` — NOT its layout. Background,
panels, decorations, mascots and **every Japanese string** are generated together
by Image 2.0. Never build the deliverable from HTML/SVG/CSS/DOM text unless the
user explicitly asks for an editable/code-native format.

**Fixed (never change):** warm cream canvas, pastel-bordered rounded panels, bold
rounded Japanese lettering, colored number badges, shiba/cat/chick/plant/star world,
per-section callouts, high visual density.

**Adaptive (change every time):** composition grammar, number/size/shape of panels,
conclusion placement, character casting/positions, chart types, section labeling.

## Hard failure conditions (any one = regenerate, no exceptions)

- Any garbled, misspelled, clipped, or unreadable Japanese text (zoom in to check —
  never judge from the full-size view alone)
- Text not in the manifest appearing in the image (invented captions, gibberish)
- Large empty areas / stretched sparse look / "template look" of identical boxes
- Small text: primary reading text below ~1.2% of image width
- Fewer than 5 mascot/plant/prop placements, or characters covering text
- Reusing the previous output's grammar for new content (see Variety mandate)
- Starting image generation before `build.py prompt ... --json` returns PASS, or
  handing `image_gen` any string other than the returned JSON `prompt` value
- On Windows, transporting Japanese prompt text through PowerShell's default
  `Get-Content`, a normal pipeline, or `$OutputEncoding`; these legacy code-page
  paths can corrupt UTF-8 before the model sees it
- Delivering without the verify loop (tiles + audit + visual) — a pretty full-size
  view is NOT verification
- Silently switching to HTML/SVG because text failed — that fallback needs the
  user's explicit approval first

## Variety mandate (同じ見た目の連発は失敗)

Pick the composition grammar from `references/layouts.md` that fits the content —
and if the previous piece used the same grammar, actively switch. Per piece, vary at
least THREE of: grammar · header style · section labeling (number badges / tab
ribbons / icon flags) · conclusion form (banner / boxless strip / ribbon) ·
character cast & placement · chart/component mix.

## Production pipeline (always this order)

1. **Read** `references/prompt-recipes.md` (the core craft doc) and
   `references/layouts.md` §Composition grammars. Style vocabulary:
   `references/style-guide.md`.
2. **Classify density** by section count: low ≤4 / medium 5–9 / high ≥10.
   If low, FIRST expand content with `references/content-expansion.md`
   (なぜ効く/やらないこと/できた判定/コツ… — no invented facts).
3. **Pick one grammar** and draft the **text manifest** within the copy budget
   (high ≤70 strings / medium ≤50 / low ≤35; short strings; see prompt-recipes).
   Fewer, larger strings beat many small ones — small text garbles first.
4. **Compose and save first**: build the 6-block prompt from prompt-recipes.md
   ([STYLE][CANVAS][COMPOSITION][TEXT][RULES][NEGATIVE]), then save it as
   `<name>.prompt.txt` in UTF-8 before generation. Landscape 3:2. This file is the
   source of truth for both generation and later revision.
5. **Preflight + safe transport (mandatory before every generation)**:
   Windows PowerShell:
   ```powershell
   py -3 "$env:USERPROFILE\.codex\skills\friendly-infographic-style\scripts\build.py" `
     prompt <name>.prompt.txt --json --meta <name>.prompt.meta.json
   ```
   macOS / Linux:
   ```bash
   python3 "$HOME/.codex/skills/friendly-infographic-style/scripts/build.py" \
     prompt <name>.prompt.txt --json --meta <name>.prompt.meta.json
   ```
   Exit code 0 and `"verdict":"PASS"` are both required. The JSON is deliberately
   ASCII-only; parse it and pass its exact `prompt` value to `image_gen`. Never
   re-read the file through an unverified shell text path after this check. A FAIL
   stops the run before image generation.
6. **Generate**:
   - Codex / ChatGPT: call built-in `image_gen` with the exact parsed `prompt`
     value. Use the safe parsing recipe in `references/prompt-recipes.md`.
   - Claude Code (no Image 2.0): use the raw-byte delegate, never an inline
     PowerShell prompt. On Windows PowerShell:
     ```powershell
     py -3 "$env:USERPROFILE\.codex\skills\friendly-infographic-style\scripts\delegate_imagegen.py" `
       <name>.prompt.txt <name>.png --workdir <workdir>
     ```
     On macOS / Linux:
     ```bash
     python3 "$HOME/.codex/skills/friendly-infographic-style/scripts/delegate_imagegen.py" \
       <name>.prompt.txt <name>.png --workdir <workdir>
     ```
     The delegate probes the executable, uses a non-colliding random delimiter,
     rejects stale or non-PNG output, and records the new PNG SHA-256. Use a new
     output path by default; `--overwrite` still requires a changed SHA-256.
7. **Verify (mechanical + visual, mandatory)**:
   Windows PowerShell:
   ```powershell
   py -3 "$env:USERPROFILE\.codex\skills\friendly-infographic-style\scripts\build.py" `
     tiles out.png "$env:TEMP\ig-tiles"
   py -3 "$env:USERPROFILE\.codex\skills\friendly-infographic-style\scripts\build.py" `
     audit out.png
   ```
   macOS / Linux:
   ```bash
   python3 "$HOME/.codex/skills/friendly-infographic-style/scripts/build.py" tiles out.png /tmp/ig-tiles
   #   → view EVERY tile; compare each string char-by-char against the manifest
   python3 "$HOME/.codex/skills/friendly-infographic-style/scripts/build.py" audit out.png
   #   → density tripwire (PASS required; thresholds calibrated on the reference)
   ```
   Then the visual checklist in `references/quality-bar.md`.
8. **Regenerate** on any failure — max 3 targeted retries, ONE prompt change each,
   using the symptom→fix table in prompt-recipes.md. Still failing → deliver best
   attempt + list failed strings + ask: simplify copy, or legacy-html fallback?
   Whole-image mojibake such as repeated `縺`/`繧` is a transport failure, not a
   model-text retry: repair the transport, rerun the same prompt, and re-verify.
9. **Deliver** the PNG, the exact `<name>.prompt.txt`, and its
   `<name>.prompt.meta.json` together. State that Image 2.0 FULL-GEN was used.

## Quality gates

Details and 反面教師 comparisons: `references/quality-bar.md`.
Floor ≠ goal: audit PASS at 30%+ flat is still スカスカ. Reference-grade targets:
total flat ≤ ~20%, 40–90 content atoms, primary text ≥ ~1.2% of width.

## Legacy HTML fallback (explicit opt-in only)

`legacy-html/` keeps the full deterministic HTML/CSS pipeline (4 finished templates,
component library, grid recipes) driven by `scripts/build.py render|layout|check`
with assets in `assets/` (base.css, SVG characters, fonts). Use ONLY when the user
explicitly asks for editable HTML/SVG/CSS output or approves it after Image 2.0
text failures. Entry point: `legacy-html/README.md`.
