Page Table of Contents
Turn a long page into a scannable set of anchored sections.
What it adds
A generated list of a page's headings, with anchor links and an indicator for the section currently in view.
What your agent is told to do
5
What your agent is told to do
5-
1
Generate the table from the headings actually rendered on the page. Do not maintain a hand-written list beside the content — it will drift.
-
2
Derive stable anchor ids from heading text, and disambiguate repeated headings deterministically so a shared link keeps pointing at the same section.
-
3
Offset every jump by the height of any sticky header, so the target heading is not hidden underneath it.
-
4
Track the section in view and mark it, but debounce the switch — a highlight that flickers between two entries at a boundary is worse than none.
-
5
Do not render the table for pages with fewer than about three sections; it adds noise and no navigation value.
Edge cases it handles
6
Edge cases it handles
6- Headings inside collapsed sections must expand their section when linked to, not scroll to nothing.
- A deep-linked anchor on first load must land correctly even though layout shifts as images and fonts settle.
- Very long heading text must truncate in the table while keeping the full text as its accessible name.
- On mobile there is no room for a sidebar — collapse the table to a control at the top rather than dropping it.
- Content that loads after first paint must update the table, not leave it stale.
- Keyboard users must be able to tab into the table and land focus on the target heading after activating a link, not just scroll the page.
Definition of done
8
Definition of done
8- Every rendered heading appears in the table, and nothing else does.
- Anchor ids are stable across reloads and unique when headings repeat.
- Jumps clear any sticky header.
- The active-section indicator does not flicker at boundaries.
- The table is usable on mobile and by keyboard, and moves focus to the target.
- Short pages render no table at all.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Deep-Linkable Modals
Deep-Linkable Modals
Make dialogs and detail panels linkable without losing the page behind them.
What it does
Modals and detail panels that live at their own URL, so they can be shared, bookmarked, and closed with the back button.
How it works
- 1 Pick the overlays worth linking — record detail, edit forms, share dialogs — and give each one a real URL.
- 2 When that URL is opened directly, with no page underneath, render the content as a full page instead of an overlay floating on nothing.
- 3 Make the browser back button close the modal and leave the user on the page they were on, not two steps back.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/deep-linkable-modals
Tabs
Tabs
Split a crowded page into sections without another route.
What it does
Accessible tabbed sections, with the active tab reflected in the URL.
How it works
- 1 Use tabs for alternative views of the SAME thing. If the content is unrelated, it wants a separate page.
- 2 Put the active tab in the URL so a tab can be linked, bookmarked, and survives a refresh.
- 3 Implement the WAI-ARIA tabs pattern: arrow keys move between tabs, Tab moves into the panel.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/tabs
Previous and Next Record Navigation
Previous and Next Record Navigation
Move through a result set one record at a time without going back to the list.
What it does
Previous and next controls on a detail view that walk the same sequence the user's list produced.
How it works
- 1 Derive the sequence from the filter, sort, and search that were active on the originating list — not from the table's default ordering. A different order than the list the user came from is a bug, not a fallback.
- 2 Carry the sequence identity in the URL so the detail page is shareable and survives a refresh.
- 3 Disable the controls at genuine boundaries and make that state visible; do not fetch a page of results just to discover there is nothing after the last record.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/previous-and-next-record-navigation
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.