This skill should be used when the user is building or reviewing responsive layouts, mobile design, breakpoints, table-to-card patterns, touch targets, collapsible sidebars, or mobile/bottom navigation. Covers the "sacrifice principle" for mobile SaaS, desktop/tablet/mobile breakpoint strategy, and minimum touch target standards.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
Over 55% of global web traffic comes from mobile, but complex SaaS on small screens requires deliberate sacrifice, not automatic scaling. The best SaaS products do not replicate their desktop experience on mobile — they extract the subset of functionality that makes sense for the context.
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.
Over 55% of global web traffic comes from mobile, but complex SaaS on small screens requires deliberate sacrifice, not automatic scaling. The best SaaS products do not replicate their desktop experience on mobile — they extract the subset of functionality that makes sense for the context.
Study how leading products handle this:
The question is not "how do we make this fit on mobile?" but "what subset of functionality makes sense in a mobile context?"
| Breakpoint | Range | Layout |
|---|---|---|
| Desktop | ≥1024px | Full sidebar, multi-column layouts, complete data tables |
| Tablet | 768–1023px | Collapsible sidebar, reduced columns, touch-friendly controls |
| Mobile | ≤767px | Bottom navigation, single-column layouts, cards replacing tables |
Minimum sizes are non-negotiable:
| Standard | Minimum Size |
|---|---|
| Apple HIG | 44x44px |
| Material Design | 48x48dp |
All interactive elements — buttons, links, checkboxes, toggles — must meet these minimums on touch devices.
Two patterns are necessary in a reusable application — the choice depends on data density and the user's primary task:
Transform each table row into a card. Best for resource lists (orders, customers, products) where users browse and act on individual items.
Freeze the first column (identifying information) and allow horizontal scrolling. Best for comparison data where column relationships matter.
Shopify Polaris automatically transforms tables into list/card layouts on small screens. On screens below 490px, hide bulk actions unless essential.
When reviewing or building responsive layouts: