Route Change Progress
Show that a page change is underway when navigation isn't instant.
What it adds
A single global indicator at the top of the app that appears while a client-side navigation is in flight.
What your agent is told to do
5
What your agent is told to do
5-
1
Add one indicator, owned globally, tied to the app's navigation lifecycle rather than to any individual view.
-
2
Delay its appearance by roughly 200ms. Most navigations finish before that, and an indicator that flashes on every click reads as jank.
-
3
Complete or cancel it on every terminal outcome — success, redirect, error, and user-cancelled back navigation.
-
4
Do not use this to cover the arrival of data inside a view. Per-view content placeholders are owned by Skeleton Loading; extend that rather than building a second one. The two must never be visible at the same time — once the route has committed, this indicator is finished.
-
5
Announce only transitions that run long. A polite live-region message after a couple of seconds is enough; do not narrate every route change.
Edge cases it handles
6
Edge cases it handles
6- A navigation that redirects must finish the indicator on the final destination, not the intermediate one.
- A failed navigation must clear the indicator and surface the error, never leave a bar stuck at 90%.
- Rapid successive navigations must reuse one indicator, not stack several.
- Browser back and forward are navigations too, and are often instant from cache — the delay threshold matters most here.
- The bar must sit above sticky headers and modals without covering a focused control.
- Respect prefers-reduced-motion: keep the state change, drop the animated crawl.
Definition of done
8
Definition of done
8- Exactly one navigation indicator exists app-wide.
- Navigations faster than the delay threshold show nothing.
- Redirects, errors, and cancellations all clear the indicator.
- The indicator and any per-view skeleton are never on screen together.
- Long transitions are announced once to screen readers, short ones silently.
- The indicator never obscures content or a focused element.
- 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
Pagination
Pagination
Split long lists into numbered pages without losing filters or the user's place.
What it does
Discrete paged lists with an explicit page control, where page number, page size, filters, and sort all live in the URL.
How it works
- 1 Build a real page control: previous, next, and a way to jump to a specific page or the last page. This feature is for lists people navigate deliberately. If the list is a feed people graze, choose progressive appending instead.
- 2 Put page, page size, filters, and sort in the URL so every page is linkable, bookmarkable, and survives a refresh.
- 3 Show enough context to orient: current page, total pages or a clear next-page affordance, and the range of items shown out of the total.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/pagination
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
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.