SKILL-072 SaaS UX and layout patterns Locked skill

SaaS app shell

The shell is a layout, not a page: render it once around an outlet so the sidebar and topbar never remount on navigation.

01

What this skill helps you build

The persistent frame around every authenticated page — collapsible sidebar nav, topbar, workspace switcher, account menu, and a single content slot.

The production takeaway

The shell is a layout, not a page: render it once around an outlet so the sidebar and topbar never remount on navigation.

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 app shell — the persistent chrome that wraps every signed in screen of your SaaS. It gives you a collapsible sidebar for primary navigation, a topbar with a workspace/org switc

🔒
SaaS UX and layout patterns
When to use this

Reach for an app shell the moment your product is more than one screen behind a login. Concretely, you want it when you have: A set of top level destinations a user moves between a

🔒
SaaS UX and layout patterns
The core idea

The shell is a layout that renders once and persists , not something each page re draws. Pages plug their content into a single outlet; the sidebar, topbar, switcher, and account m

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