Scroll Position Restoration
Bring people back to where they were, not to the top of the list.
What it adds
Restore scroll position when a user returns to a list they navigated away from.
What your agent is told to do
5
What your agent is told to do
5-
1
Record the scroll position when leaving a scrollable view and restore it when returning to the same view.
-
2
Key the saved position on the full view state: route, filters, search, sort, and page. A position from a different filter is worse than the top of the list.
-
3
Restore only on a return, meaning back navigation or a return from a detail view. A fresh visit starts at the top.
-
4
Wait for the content that determines page height before restoring, or the restore will land in the wrong place.
-
5
Do not fight the browser's own restoration. Take it over explicitly for the views you manage instead of running both.
Edge cases it handles
6
Edge cases it handles
6- Images and embeds without reserved dimensions change the page height after restore. Reserve space or restore after they settle.
- In a virtualized list the original node no longer exists. Restore by item identity and offset, not pixel value.
- An infinite list must restore the loaded pages too, or the target position does not exist yet.
- If the item the user was looking at has since been deleted, land near where it was rather than jumping.
- Saved positions must be discarded when the view state changes, and must not grow without bound.
- The restore jump must not be animated; scrolling the user through a thousand rows is worse than arriving.
Definition of done
8
Definition of done
8- Returning to a list from a detail view lands on the same item.
- Positions are keyed by route, filters, search, sort, and pagination.
- A fresh navigation to the view starts at the top.
- Restoration happens after height-affecting content has loaded, with no visible second jump.
- Virtualized and infinite lists restore correctly.
- Stored positions are bounded and expire.
- 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
Return-to-Origin Navigation
Return-to-Origin Navigation
Send people back to the exact list they came from, filters and all.
What it does
A shared mechanism for remembering where a workflow started and returning the user there when it finishes.
How it works
- 1 Add one reusable way to carry an origin through a workflow, and use it everywhere instead of hardcoded 'back to index' links.
- 2 Capture the full origin state — filters, page, sort, search query, and scroll position — not just the path.
- 3 Validate the return target before redirecting: it must be a path inside this app that the current user is allowed to see.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/return-to-origin-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.