SKILL-071 SaaS UX and layout patterns Locked skill

Responsive SaaS layouts

Design the mobile layout as a real layout, not a squeezed desktop one — the sidebar becomes a drawer and the table becomes cards.

01

What this skill helps you build

Make dashboards and data tables usable on a phone — collapse the sidebar to a drawer, turn tables into stacked cards, and size every touch target for a thumb.

The production takeaway

Design the mobile layout as a real layout, not a squeezed desktop one — the sidebar becomes a drawer and the table becomes cards.

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

A SaaS shell — persistent nav plus a content area full of data tables — that stays usable when the viewport shrinks to a phone. The desktop layout keeps its fixed sidebar and wide

🔒
SaaS UX and layout patterns
When to use this

Use this whenever a logged in surface has to work on both a laptop and a phone — which, for most SaaS, is every authenticated page. Concretely, reach for this pattern when you have

🔒
SaaS UX and layout patterns
The core idea

The mobile view is a different layout of the same content , not a scaled down copy of the desktop one. Two structural transforms do most of the work: Sidebar → drawer. On wide scre

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