SKILL-024 SaaS UX and layout patterns Locked skill

Detail page layout

The detail page answers "what is this record and what can I do with it?" — lead with identity and the primary action, push everything else into tabs.

01

What this skill helps you build

The single-record screen — a header with title, status, and actions; a metadata sidebar; tabs; and related records.

The production takeaway

The detail page answers "what is this record and what can I do with it?" — lead with identity and the primary action, push everything else into tabs.

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 detail page a.k.a. the "show" or "record" screen : the focused view of a single record — one user, one invoice, one project. It is where someone lands after clicking a row in a

🔒
SaaS UX and layout patterns
When to use this

Use this layout whenever a record is rich enough that a table row can't hold it — it has its own lifecycle, its own actions, and its own children. Concretely, reach for a detail pa

🔒
SaaS UX and layout patterns
The core idea

A detail page is organized by how often each piece is needed , not by how the data is stored. The screen has three zones: 1. Header — identity and intent. The record's title, its s

🔒
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.