Scroll Progress

What it does

Designs meaningful, accessible scroll or reading-progress indicators for long-form or guided pages.

When to use it

Use for reading-progress bars, chapter progress, or auditing decorative and misleading progress UI.

Problems it prevents

Stops progress bars that don't correspond to anything real, or hijack the browser's own scrollbar behaviour.

Typical workflow

1. Choose the correct progress model
2. Tie it to real content length
3. Verify it reverses and skips correctly
4. Check reduced-motion behaviour

Example output

A slim progress indicator that accurately reflects position in a long document and behaves correctly on back-scroll.

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.

Works well with

• SystemCinematic Animation System

  Designs bespoke, brand-specific motion (typography, imagery, interface, scroll, depth) that rejects default AI motion clichés.

• FocusedBack to Top

  Adds a context-aware, accessible return-to-top control that only appears once it's actually useful.

• SystemInteraction Storytelling

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