Breadcrumbs
Show people where they are and how to get back.
What it adds
A breadcrumb trail on nested pages, reflecting the real hierarchy.
What your agent is told to do
4
What your agent is told to do
4-
1
Map the app's actual hierarchy first. Breadcrumbs must reflect structure, not the user's click history — that's the back button's job.
-
2
Add a trail to every page more than one level deep.
-
3
Make every segment except the last a real link.
-
4
Use the record's current name for dynamic segments.
Edge cases it handles
4
Edge cases it handles
4- Long names must truncate, not wrap the trail onto three lines.
- Deep hierarchies must collapse the middle, keeping the first and last segments.
- A user who cannot access an ancestor must not get a link that 404s or 403s.
- The trail must be readable on mobile — usually just the parent plus current.
Definition of done
7
Definition of done
7- Every nested page has an accurate trail.
- The trail reflects hierarchy, not history.
- Segments are links, and the current page is not.
- Long trails and long names degrade gracefully.
- It's marked up with a nav landmark and aria-current on the last item.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
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
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
Shareable Deep Links
Shareable Deep Links
Let people copy a URL that reopens exactly what they were looking at.
What it does
Encode the current record, tab, filter set, and selection in the URL so a copied link restores the same view for whoever opens it.
How it works
- 1 Audit the app for view state that currently lives only in memory: active tab, applied filters, sort order, expanded rows, selected items, scroll target.
- 2 Move that state into the URL and make the app read it back on load, so a pasted link reconstructs the view rather than dumping the user on a default screen.
- 3 Add a visible copy-link affordance on every view that supports it, and confirm the copy so the user knows it worked.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/shareable-deep-links
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.