Build an Interactive Story

Create an interactive educational story using $ARGUMENTS.

Follow the full conventions in stories/CLAUDE.md. The story must be self-contained HTML with inline CSS/JS, 10-15 scenes, 3-5 branching points, 2-3 endings, and keyboard navigation (1-9 keys).

Phase 0 — Plan (interactive)

1. Parse the argument: first word is the style name, optional remaining words hint at the topic.
2. Read STYLE-PAIRINGS.md to confirm the style is available (empty Story column) and see what's already taken.
3. Read the chosen style's HTML file from styles/{name}.html to extract the design system.
4. Read stories/CLAUDE.md for the template and conventions.
5. Read 1 existing story to match structure — skim for the STORY data format, engine pattern, and component mapping.
6. If no topic was given:
   • Research the style's cultural/historical period
   • Propose 2-3 story concepts that thematically match the aesthetic
   • Ask the user to pick one
7. Propose the story arc: title, setting, 10-15 scene outline with branching diagram, key historical facts, and how style components map to narrative functions (e.g., "cards = case files", "alerts = discoveries").
8. Discuss with the user before proceeding.

Phase 1 — Research (parallel Sonnet subagents)

Launch 2-3 sonnet subagents in parallel to research:

• Historical facts: Real names, dates, numbers, events for the chosen topic. Need 8-12 concrete facts.
• Cultural context: Period details, atmosphere, vocabulary appropriate to the era.
• Style component mapping: How to repurpose the style guide's CSS classes for narrative elements.

Each subagent returns structured research notes.

Phase 2 — Build (sequential Opus subagents)

Use 3-4 sequential opus subagents:

1. First agent: Create the full HTML file with adapted CSS, title screen with back-to-stories link, scene wrapper structure, and the story engine JavaScript. Write the first 5 scenes of the STORY object. Include CSS for scene types (narration, investigation, confrontation, ending).
2. Second agent: Read the file, add scenes 6-10 (or remaining scenes). Ensure branching points connect correctly.
3. Third agent: Read the file, add remaining scenes and endings. Verify all next values point to defined scenes. Ensure every scene has a fact property. Test that no orphan scenes exist.
4. Fourth agent (polish): Read complete file. Verify scene graph integrity (no dead ends, no orphans), keyboard navigation works, clue tracker collects facts, all historical content is accurate.

Critical rules for build agents:

• Each agent MUST read the current file before writing
• All next values in choices must reference existing scene IDs in the STORY object
• Every scene needs: year, era, content, fact, choices
• Endings should offer "Play Again" (next: 'intro') and "Back to Stories" (next: '_exit')
• Back-to-stories link on title screen: <a href="index.html">

Phase 3 — Brief & Index

1. Write a research brief to stories/briefs/{style-name}-brief.md documenting the historical facts, story arc, and component mapping.
2. Read stories/index.html to understand the card format.
3. Add a card for the new story with: scene count, ending count, style name, title, description.
4. Update STYLE-PAIRINGS.md — add the story title in the Story column for the chosen style.
5. Commit with message: Add {title} interactive story ({style-name} style)
6. Push using: git config --global credential.helper store && echo "https://GGPrompts:$(gh auth token --user GGPrompts)@github.com" > ~/.git-credentials && git push origin main