UI & UX

Interaction Storytelling

Turns complex journeys and explanations into interactive narratives with real user control, not passive scroll decoration.

What it does

Turns complex journeys and explanations into interactive narratives with real user control, not passive scroll decoration.

When to use it

Use for scrollytelling, chaptered pages, guided reveals, timelines or before-and-after explanations.

Problems it prevents

Stops 'scrollytelling' that's really just a static page with unnecessary motion glued on.

Typical workflow

  1. Define the narrative's real structure
  2. Give the user meaningful control
  3. Build a complete static fallback route
  4. Verify pacing against real content

Example output

An interactive explanation that still works, in full, as a plain static page if motion is disabled.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/interaction-storytelling/ to use it on every project, or in .claude/skills/interaction-storytelling/ to scope it to one repository. Then invoke it directly:

/interaction-storytelling

Read the official Claude Code skills guide

Works well with