SKILL-043 SaaS UX and layout patterns Locked skill

Index / table page

Filter, sort, and page state belong in the URL query string — not component state — so every list view is shareable, bookmarkable, and back-button safe.

01

What this skill helps you build

The list screen done right: search, filtering, sortable columns, pagination, and row selection with bulk actions — all driven from the URL.

The production takeaway

Filter, sort, and page state belong in the URL query string — not component state — so every list view is shareable, bookmarkable, and back-button safe.

02

Inside this skill

The full skill expands these implementation areas with decisions, edge cases, prompts, tests, and framework-specific code.

SaaS UX and layout patterns
What this helps you build

The workhorse screen of every SaaS app: a list index page that shows many records in a table — users, invoices, orders, projects — with the controls people expect. Search, filter,

🔒
SaaS UX and layout patterns
When to use this

Reach for this any time you have more than a handful of records of one type and a user needs to find, scan, or act on them. Concretely: An admin or settings area listing users, tea

🔒
SaaS UX and layout patterns
The core idea

The list's state lives in the URL, not in the component. Search term, active filters, sort column and direction, and the current page are all query parameters: ?q=acme&status=activ

🔒
03

Unlock the full implementation

Paid access includes the complete skill body, implementation prompt, common mistakes, production checklist, and code examples where this skill includes them.