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
Press Kit
Press Kit
Give journalists your logos, colours, screenshots, and boilerplate on one public page.
What it does
A public page of downloadable brand assets, colour values, screenshots, and approved boilerplate copy.
How it works
- 1 Serve every asset through the app's existing file download path so that access, headers, and content types are handled the same way as everywhere else, rather than linking directly at raw storage.
- 2 Store the correct format and media type per asset and derive the filename and extension from the stored record, never from the label an author typed.
- 3 Present each logo variant on the background it is designed for, and reuse the app's theme-aware asset switching so the page shows the right variant in light and dark rather than a washed-out logo on the wrong panel.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/press-kit
FAQ Section
FAQ Section
Add an expandable list of questions and answers to any page, in the order you choose.
What it does
A reorderable set of question and answer pairs rendered as an accessible expand-collapse list on any page.
How it works
- 1 Build it on real disclosure semantics with a button that toggles its own panel, so keyboard and screen reader users get the behaviour for free.
- 2 Give every question a stable anchor derived from its text and keep it after edits, so a support reply can link straight to one answer.
- 3 Allow answers to contain formatted text, lists, and links, and reuse the app's existing content editor and its sanitisation rules rather than accepting raw markup.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/faq-section
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
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.