Skip to content
Get packs

Scroll Progress Timeline

Builds accessible scroll-driven timeline pages that fill a progress line as users read.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
5 files

What it does

When installed, the agent knows how to turn an ordered process (onboarding steps, a roadmap, a recipe, a case study) into a web page where a line fills in as the visitor scrolls, and the current step is highlighted. It follows rules for keeping the content readable first, collapsing to a simple list on small screens, supporting keyboard navigation, and turning off animation for users who prefer reduced motion. A demo page and a recreation prompt are included as reference.

Great for

  • Front-end developers building onboarding, checkout, or process pages
  • Designers who want a scroll-linked timeline that stays accessible
  • Teams adding a roadmap or case-study timeline to a marketing site

Skip it if

  • Simple static lists where a scroll animation adds no value; the skill's own advice is to keep the sequence readable without animation
  • Projects that cannot use JavaScript-driven scroll effects or need to support very old browsers, since the method relies on modern APIs

Try asking

  • “Build a scroll progress timeline for our 5-step onboarding process using the steps data I provide.”
  • “Turn this recipe into a vertical scroll story with a progress line and active step states.”
  • “Create a horizontal roadmap timeline for our product milestones that collapses to a left rail on mobile.”
  • “Make our case study process page accessible with reduced-motion support and a semantic fallback.”
Step-by-step guide: how to use Scroll Progress TimelineInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    scroll-progress-timeline.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip scroll-progress-timeline.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip scroll-progress-timeline.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your steps as a list with titles and body text so it can fill the data model shown in the skill.
  • Ask the agent to run the verification checklist (mobile widths, zoom, reduced motion, keyboard order) before you consider the page done.
  • Use the included demo/index.html as a reference by asking the agent to remix it with your own content and brand styling.

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.