Progress Checklist

What it does

The progress checklist walks new users through getting set up: a handful of tickable steps and a bar that fills as they go. Finished setups become customers who stay; abandoned ones quietly leave. This one keeps the momentum honest and the progress personal.

• Each visitor's ticks are their own, saved in their browser.
• The bar shows the completed count out of the total, plus the percentage, updating live as rows get ticked.
• Steps can link straight to the place where they get done, one tap from list to action.
• Preloaded ticks and fake almost-there momentum are banned.
• Your app can tick steps automatically through one documented hook, and a documented reset lets you wipe your own ticks for testing.
• The whole row toggles with one tap, and screen readers hear the count move.
• An empty list renders nothing.

How it works

1. 1Slide the step count, 3 to 6.
2. 2Pick the style, a full card list or a compact bar that opens on tap.
3. 3Copy the prompt, the checklist's plan for your AI, into whichever AI you use.
4. 4Write your real setup steps into the marked list, each with an optional link pointing at the exact page where that step happens.
5. 5Tick a few as a test: the bar should fill live, and a page reload should remember everything.
6. 6Try the app hook too: call the documented function and watch the row tick itself without a tap.

What you can customize

• How many steps: three feels instantly doable at a glance; six suits setups with real substance that people genuinely need walking through.
• Style: the card sits proud in a dashboard; the compact bar tucks into headers and sidebars.
• Colors, checks, and type adapt to your site automatically, because your AI builds the checklist right inside your own design, matching the cards you already use.