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)

  1. Parse the argument: first word is the style name, optional remaining words hint at the topic.
  2. Read the Style Guide Catalog table in README.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.
Related skills
Installs
2
GitHub Stars
15
First Seen
Mar 3, 2026