This skill should be used when the user is building or reviewing sidebar navigation, command palette (Cmd+K), breadcrumbs, organization or workspace switching, multi-tenancy UI, or top bar layout. Covers navigation structure decisions, power-user keyboard patterns, and drill-down navigation.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
Jakob's Law dominates SaaS navigation: users spend most of their time in other apps and expect yours to work the same way. This is a measurable predictor of adoption speed.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Jakob's Law dominates SaaS navigation: users spend most of their time in other apps and expect yours to work the same way. This is a measurable predictor of adoption speed.
The established pattern for complex SaaS is a left sidebar for primary navigation with a top bar for context and utilities.
When to use sidebar vs. header-only navigation:
| Use Case | Pattern |
|---|---|
| Small number of sections, no secondary hierarchy | Header-only (top) navigation |
| Nested navigation (every real SaaS product) | Left sidebar |
IBM Carbon's guidance is definitive: the moment nested navigation is needed — and every real SaaS product needs it — use a sidebar.
The command palette is the power-user signature of modern SaaS. Linear, Superhuman, Slack, Figma, Notion, Vercel, and GitHub all implement it.
Essential design rules (from Superhuman's engineering team):
Three models dominate:
| Model | Example | Description |
|---|---|---|
| Single account, multiple orgs | GitHub | One user account added to multiple organizations |
| Separate accounts per org | Distinct accounts for each organization | |
| Hybrid (single account, multiple workspaces) | Linear, Notion | Single account, multiple workspaces |
Build for the hybrid model — it covers the widest range of products.
Placement:
Visual differentiation is mandatory. Use workspace avatars or colors so users switching between workspaces know immediately which context they are in.
Breadcrumbs are mandatory for any drill-down navigation.
Rules:
When reviewing or building navigation: