Guide · Agent skill
How to use the Scroll Progress Timeline agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Scroll Progress Timeline skill teaches an AI agent to turn an ordered process, such as onboarding steps, a roadmap, a recipe or a case study, into a web page where a progress line fills as the visitor scrolls and the current step is highlighted. It is aimed at front-end developers, designers and marketing teams who want this effect without losing readability or accessibility. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what to check in the result.
Scroll Progress TimelineMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the scroll-progress-timeline ZIP from our page and unzip it on your computer.
- 2Place the folder. Move the scroll-progress-timeline folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 4Describe your ordered process. List the steps, their headings and the orientation you want, vertical or horizontal.
- 5Ask with the skill name. Use a request such as $scroll-progress-timeline to build the page, or describe the timeline without the name.
- 6Review the output. Check that the sequence reads correctly without animation, that the line and active step agree, and that the layout collapses on small screens.
What the skill makes the agent do
Agent skills are folders of instructions that an AI agent loads when a task matches them. This one covers scroll-linked timelines. The agent models your steps as data, renders them as an ordered list with real headings, and then adds a base line, a progress fill and active step states on top of that list.
The skill's core rule is that the sequence must stay complete, readable and navigable before any animation is added. The line, dots and active state enhance the structure; they do not replace it.
- Renders a quiet base line behind every point and one progress line on top.
- Measures the first and last point centers so the line starts and ends at the dots.
- Marks a step active when the progress head crosses its center.
- Collapses to a simple left rail on small screens.
- Turns animation off under prefers-reduced-motion: reduce and keeps all step content in normal flow.
Install the skill
Download the ZIP for this skill from our page and unzip it. The folder is named scroll-progress-timeline and contains SKILL.md, REFERENCES.md, agents/openai.yaml and demo/ with index.html and PROMPT.md.
For a personal install, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal: ~/.claude/skills/scroll-progress-timeline/
- Project: .claude/skills/scroll-progress-timeline/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need special syntax. Describe an ordered process and say you want it shown as a scrolling timeline or progress story. The demo prompt uses the form $scroll-progress-timeline, which names the skill directly.
Good requests state the content, the orientation and any constraints, such as the number of steps or the need for mobile support.
- Turn these four onboarding steps into a vertical scroll timeline with a progress line.
- Use $scroll-progress-timeline to build a checkout process page with an active step state.
- Make a horizontal roadmap section for our five launch phases that stays keyboard accessible.
- Recreate the demo page as a standalone HTML file.
Examples of what you can build
The skill suits any sequence where progress should be visible while reading. The included demo, Fieldwork — From Question to Proof, shows four uneven process steps beside a sticky chapter title, each with a number, phase, heading, description, evidence tag and abstract media panel.
- A vertical onboarding flow with a left rail that fills as the visitor scrolls.
- A case study showing project phases with a progress line.
- A recipe with ordered stages and highlighted current step.
- A service process page for a marketing site.
What you need and safety notes
The listing does not require any other tools or packages. The skill does not run scripts and does not use the network, so it only supplies instructions and reference files to the agent.
The output itself is front-end code that relies on JavaScript scroll effects and modern browser APIs such as IntersectionObserver and ResizeObserver. Review the generated code as you would any code before shipping it.
- Requires: nothing listed.
- Runs scripts: no.
- Uses network: no.
- The skill references GSAP ScrollTrigger as an optional option for continuous fills or pinned media; check its licence and use before adopting it.
Tips for better results
Give the agent real content with headings, and say whether the steps are ordered by time, by stage or by logic. Ask it to test the result at several widths and with reduced motion enabled, since the skill's verification list covers these cases.
The skill's own advice is that a static list is sometimes the better choice. If the sequence is short and the animation adds nothing, ask for a simpler version.
- Ask for verification at 390, 768, 1024 and 1440 pixel widths and at 200% zoom.
- Ask for keyboard order and reduced-motion checks.
- Ask for a horizontal layout only for short sequences with concise labels.
- Use the demo PROMPT.md as a starting point when you want a remix.
What people use it for
- Onboarding flow where each setup stage is a step and the line fills as the visitor reads.
- Product roadmap section with phases shown as a vertical or short horizontal timeline.
- Case study page showing the stages of a project with an active step highlighted.
- Checkout or service process page where the visitor can see how far through the sequence they are.
Frequently asked questions
How do I install the scroll progress timeline skill?
Download the ZIP from our page and unzip it. Put the scroll-progress-timeline folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings, then Capabilities, then Skills.
Is the scroll progress timeline skill free?
The skill is published under the MIT licence, according to its listing. Check the licence file in the download for the full terms before you use it in your own project.
What do I need to run this skill?
The listing states no requirements. The skill does not run scripts and does not use the network. The pages it helps you build use JavaScript and modern browser APIs.
Does the skill work on mobile?
Yes, the skill instructs the agent to collapse the timeline to a simple left rail on small screens without changing the reading order. It also recommends testing at 390, 768, 1024 and 1440 pixel widths.
Does the timeline work with reduced motion settings?
The skill tells the agent to respect prefers-reduced-motion: reduce by showing the complete line or the reached states without scrubbed animation, blur, pinning or large transforms, while keeping all content in normal flow.
When should I not use this skill?
Skip it for simple static lists where a scroll animation adds no value. It is also a poor fit for projects that cannot use JavaScript-driven scroll effects or must support very old browsers, because the method relies on modern APIs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer building an onboarding, checkout, roadmap or case-study page and want a scroll-linked progress line that stays readable and accessible. Pick something else if your sequence is short and static, or if your project cannot rely on modern browser JavaScript for scroll effects.
Download the skill