Reading Progress Bar
A slim bar showing how far through an article the reader has scrolled.
What it adds
A thin progress indicator pinned to the top of article pages, tracking scroll through the body text.
What your agent is told to do
5
What your agent is told to do
5-
1
Measure progress against the article body element only. Take the top and bottom of the prose, not the height of the document.
-
2
Recalculate the body height when the page reflows: late-loading images, expanded sections, embeds, and font swaps all change the total after first paint.
-
3
Reuse the app's existing Progress Indicator System tokens for the bar's colour and height rather than introducing a new accent, and keep it visually distinct from Route Change Progress so the two are not confused.
-
4
Hide the bar entirely when the article fits within the viewport, and update it on a throttled scroll handler tied to the frame rather than on every scroll event.
-
5
Do not animate the fill with a transition. The bar should track the scroll position exactly, and a smoothed fill lags behind the reader and reads as broken.
Edge cases it handles
8
Edge cases it handles
8- A short article that fits on one screen has no meaningful progress. The bar would sit at zero or jump straight to full, so it should not render at all.
- Progress must stop at the end of the article body. Counting the footer, the related posts block, and the comment thread means the bar reads half full when the reader has finished the piece.
- Images and embeds that load after first paint change the total height mid-read, so a reader who was at sixty percent suddenly drops to forty. Recompute the bounds on resize and on load, and reserve image dimensions so the shift is small.
- A moving bar is a motion effect. Under prefers-reduced-motion, either hide it or update it without any animated transition.
- A sticky site header and the bar compete for the same strip of screen. Decide which owns the top edge and offset the other, or the bar will disappear under the header on scroll.
- The bar is decoration for assistive technology and should be hidden from the accessibility tree rather than announced as a live percentage on every scroll.
- Returning to an article with a restored scroll position must show the correct fill immediately, not animate up from zero.
- In right-to-left layouts the bar must fill from the right edge.
Definition of done
8
Definition of done
8- The bar reflects scroll position through the article body and reaches full at the end of the prose.
- Articles shorter than the viewport show no bar.
- Late-loading images and embeds do not leave the bar reporting a stale total.
- The bar respects prefers-reduced-motion and does not animate its fill.
- It coexists with the sticky header without overlap on any breakpoint.
- It is hidden from screen readers and does not emit scroll announcements.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Newsletter Archive
Newsletter Archive
Turn sent email issues into browsable web pages that new readers can find and read.
What it does
A public archive of past newsletter issues, each with its own permanent page and a subscribe path.
How it works
- 1 Store the sent version of each issue rather than regenerating it. An archive built by re-rendering a template will drift the moment the template changes, and old issues will stop matching what subscribers actually received.
- 2 Convert the email markup to web markup on the way in: strip the table scaffolding, the fixed pixel widths, and the inline styles that only exist to survive an email client, and render the result in the app's normal article styles.
- 3 Reuse the app's existing publishing states rather than adding a second one. An issue should move from sent to archived through the same Draft and Publish States machinery the rest of the content uses.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/newsletter-archive
Help Center
Help Center
Give customers a searchable help site they can read before they open a support ticket.
What it does
A public help site of articles grouped into collections, with search, browse, and a contact fallback.
How it works
- 1 Treat the article as the single source of help content. If the app already has Contextual Help, Knowledge Base Chat, or an AI knowledge base drafting flow, point them at these same records rather than keeping a second copy of the answers that will drift.
- 2 Index articles into the app's existing search rather than standing up a separate search box with its own ranking. Extend Global Search and reuse the existing match highlighting so a result looks the same wherever it appears.
- 3 Give every article a stable slug and every collection an ordered list of articles, and show breadcrumbs from the collection down to the article so a visitor who landed from search knows where they are.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/help-center
Blog
Blog
Publish articles from inside the app to public pages with authors and categories.
What it does
A blog with authored posts, categories, scheduling, and public article and index pages.
How it works
- 1 Scope this honestly. The minimum coherent version is a post with a title, body, author, category, publish state, and a public page at a stable URL, plus an index and a feed. Defer multi-language content, per-post custom layouts, and a general page builder rather than half-building them.
- 2 Do not build a new editor. Extend the app's existing Rich Text Editor or Markdown Editor with whatever a post needs, and inherit its autosave, unsaved-change warning, and undo instead of reinventing them.
- 3 Reuse the app's existing Draft and Publish States and Scheduled Publishing rather than adding a second publish workflow for posts. Reuse SEO Setup for titles, descriptions, and social previews.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/blog
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.