Deep-Linkable Modals
Make dialogs and detail panels linkable without losing the page behind them.
What it adds
Modals and detail panels that live at their own URL, so they can be shared, bookmarked, and closed with the back button.
What your agent is told to do
5
What your agent is told to do
5-
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.
-
4
Restore focus to the element that opened the modal when it closes, and to a sensible landmark when the modal was opened from a cold URL.
-
5
Do NOT push a new history entry for every internal state change inside the modal — tab switches and accordion toggles should not each require a back press to escape.
Edge cases it handles
6
Edge cases it handles
6- Opening a modal URL directly must render a standalone page, not a blank backdrop.
- The page behind the modal must not scroll, and must return to its previous scroll position on close.
- If the linked record was deleted or the viewer lacks permission, show that inside the overlay and keep the base route intact.
- Forward navigation must reopen the modal, not leave the URL and the UI disagreeing.
- A modal opened from a cold URL has no trigger element to return focus to — define where focus goes.
- Closing with unsaved changes must warn before discarding, including on back.
Definition of done
8
Definition of done
8- Every deep-linkable overlay has a shareable URL that works when pasted into a fresh tab.
- Direct loads render as a full page; in-app opens render as an overlay.
- Back closes the modal and stays on the underlying page.
- Focus is trapped while open and restored to the trigger on close.
- Deleted or forbidden content fails inside the overlay without breaking the base route.
- Background scroll is locked and restored.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
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
Workspace Switcher
Workspace Switcher
Move between organizations without mixing their data.
What it does
A switcher for users who belong to several workspaces, with clean state isolation on every switch.
How it works
- 1 Show the current workspace at all times, prominently enough that nobody edits the wrong account's data by accident.
- 2 Resolve the active workspace on the server from the session or the URL. Never trust a client-held value to scope a query.
- 3 On switch, clear every piece of cached state tied to the previous workspace: query caches, filters, drafts, selections, realtime subscriptions.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/workspace-switcher
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.