Pagination
Split long lists into numbered pages without losing filters or the user's place.
What it adds
Discrete paged lists with an explicit page control, where page number, page size, filters, and sort all live in the URL.
What your agent is told to do
7
What your agent is told to do
7-
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.
-
4
Offer a page-size choice where rows vary in density, and persist the user's preference.
-
5
Keep filters and sort applied when the page changes, and reset to page one whenever a filter or sort changes.
-
6
Use cursor-based pagination for large or fast-moving datasets. Deep offsets get slow and skip records as rows shift underneath.
-
7
Do NOT compute an exact total count on every request for large tables. Either cache it, estimate it, or drop it in favour of a next-page indicator.
Edge cases it handles
7
Edge cases it handles
7- Deleting the last item on the last page must land the user on a valid page, not an empty one with no way back.
- A page number beyond the end of the results should clamp to the last page rather than render a blank screen.
- Records inserted or removed between requests can duplicate or skip items under offset pagination. Sort on a stable tiebreaker such as the primary key.
- Filtered results of zero must show the empty state with a way to clear filters, not page one of nothing.
- Pagination controls need real labels for screen readers and must be reachable and operable by keyboard.
- Returning from a detail view should come back to the page the user left, not page one.
- Page size changes must recompute the current page so the user stays roughly where they were.
Definition of done
9
Definition of done
9- Page, page size, filters, and sort are all reflected in the URL, and any page is directly linkable.
- An explicit page control offers previous, next, and a jump to a chosen page.
- Changing a filter resets to the first page and keeps the filter applied.
- Deleting the last item on the last page redirects to a valid page.
- Sorting includes a stable tiebreaker so records are neither skipped nor duplicated.
- Controls are keyboard operable and labelled for assistive technology.
- Returning from a detail view restores the previous page.
- 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.