story
Installation
SKILL.md
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)
- Parse the argument: first word is the style name, optional remaining words hint at the topic.
- Read the Style Guide Catalog table in
README.mdto confirm the style is available (empty Story column) and see what's already taken. - Read the chosen style's HTML file from
styles/{name}.htmlto extract the design system. - Read
stories/CLAUDE.mdfor the template and conventions. - Read 1 existing story to match structure — skim for the STORY data format, engine pattern, and component mapping.
- 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
- 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").
- Discuss with the user before proceeding.