---
title: "Scroll Progress Timeline - Air Market"
description: "When you are explaining something that happens in order - a signup, a recipe, a roadmap - readers lose track of where they are. This lays the steps out along a line, vertical or horizontal, and fills…"
canonical: "https://airmarket.ai/app/scroll-progress-timeline"
---

[Air Market](/) / [Design](/category/design) / Scroll Progress Timeline

Skill by [Meng To](/@mengto)

# Scroll Progress Timeline

Show people how far along the steps they are

## What this does

When you are explaining something that happens in order - a signup, a recipe, a roadmap - readers lose track of where they are. This lays the steps out along a line, vertical or horizontal, and fills the line in as they scroll so the current step is obvious. It still works on small screens and for people who turn animation off.

### Top 3 things it does for you

- Lay out a process as steps people scroll through
- Show a line that fills in as the reader moves
- Highlight the step someone is currently on

## Information

**Scroll Progress Timeline at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [Meng To](/@mengto) |
| Category | [Design](/category/design) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Size | 116 KB |
| Licence | MIT |
| Repository | [MengTo/Skills](https://github.com/MengTo/Skills/tree/bdf0e83c5d12c84229b4f9c6524900aca65e44b8/agent-skills/web-design/scroll-progress-timeline) |
| GitHub stars | 5,235 (as of Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of Scroll Progress Timeline and flagged nothing. AIR's verdict: **safe**.

**What Scroll Progress Timeline's check was run against**

|  |  |
| --- | --- |
| Commit | bdf0e83c5d12c84229b4f9c6524900aca65e44b8 |
| Content hash | d2f391b8969e3455a7a315902388fc3b8b4b7067bd764f9da0e2170f8c3110ec |
| Files read | [Browse the files at this exact commit](https://github.com/MengTo/Skills/blob/bdf0e83c5d12c84229b4f9c6524900aca65e44b8/agent-skills/web-design/scroll-progress-timeline/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for Scroll Progress Timeline](/security/scroll-progress-timeline)

## About Scroll Progress Timeline

Turns any ordered process into a data-driven scroll story, laid out vertically or horizontally, with a base line, a progress fill, and active states for each step.

It also covers responsive collapse, a semantic fallback, and reduced-motion behavior, so the sequence stays readable outside the animated view.

Use it for onboarding, checkout, roadmaps, recipes, case studies, service processes, histories or narratives where progress through the sequence should be visible while scrolling.

## What's inside

- SKILL.md - instructions
- agents/openai.yaml - data
- demo/index.html - template
- demo/preview.jpg
- demo/PROMPT.md - reference
- REFERENCES.md - reference

## Questions

### Is Scroll Progress Timeline safe to install?

AIR scanned this exact version of Scroll Progress Timeline and flagged nothing. AIR's verdict: safe. The verdict is named by the content that was read, at commit bdf0e83c5d12, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/scroll-progress-timeline.

### How do I install Scroll Progress Timeline?

Open https://airmarket.ai/app/scroll-progress-timeline on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/MengTo/Skills/tree/bdf0e83c5d12c84229b4f9c6524900aca65e44b8/agent-skills/web-design/scroll-progress-timeline. Install from that link, not the branch.

## Related on Air Market

- [More Design listings](/category/design)
- [Everything by Meng To](/@mengto)

---

Canonical URL: <https://airmarket.ai/app/scroll-progress-timeline>