oborchers/responsive-design
saas-design-principles/skills/responsive-design/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add oborchers/fractional-cto responsive-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 13, 2026, 6:52 AM130.7s1 file scanned
SKILL.md
- name:
- responsive-design
- description:
- 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.
- version:
- 1.0.0
Responsive Design Means Knowing What to Sacrifice
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.
The Sacrifice Principle
Study how leading products handle this:
- Linear mobile focuses on viewing/updating issues and responding to comments. Sprint planning and complex filtering stay desktop-only.
- Notion mobile converts multi-column database views to card layouts.
- Slack mobile focuses on messaging core — channels, threads, DMs. Complex admin features stay desktop-only.
The question is not "how do we make this fit on mobile?" but "what subset of functionality makes sense in a mobile context?"
Breakpoint Strategy
| 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 |
Touch Targets
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.
Tables on Mobile
Two patterns are necessary in a reusable application — the choice depends on data density and the user's primary task:
Pattern 1: Card Layout Conversion
Transform each table row into a card. Best for resource lists (orders, customers, products) where users browse and act on individual items.
Pattern 2: Horizontal Scroll with Frozen Column
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.
Navigation on Mobile
- Replace the sidebar with bottom navigation for primary actions
- Limit bottom navigation to 4–5 items maximum
- Use a "More" menu for additional items
- Maintain breadcrumbs for drill-down flows, but simplify to show only the parent and current page
Review Checklist
When reviewing or building responsive layouts:
- [ ] Mobile design deliberately sacrifices non-essential features, not just scales down
- [ ] Desktop uses full sidebar with multi-column layouts
- [ ] Tablet has a collapsible sidebar with reduced columns
- [ ] Mobile uses bottom navigation with single-column layouts
- [ ] All touch targets meet minimum 44x44px (Apple) or 48x48dp (Material)
- [ ] Data tables convert to cards or horizontal-scroll on mobile
- [ ] Card layouts used for browseable resource lists
- [ ] Frozen-column scroll used for comparison data
- [ ] Bulk actions hidden on screens below 490px unless essential
- [ ] Bottom navigation limited to 4–5 items
- [ ] Breadcrumbs simplified on mobile (parent + current only)
Related Skills
oborchers/using-planning-tools
tools
VerifiedTrustedCommunity
This skill should be used when the user invokes any /plan-* command from the planning-tools plugin (/plan-context, /plan-master, /plan-open-questions, /plan-verify, /plan-tick, /plan-progress, /plan-delete), asks how Claude Code's plan files work, asks where plans are stored, asks to author or audit a multi-phase master planning document, asks how to walk through a plan's Open Questions interactively, asks how to write progress entries, or mentions ~/.claude/plans/ or .claude/planning-tools.local.md. Provides the index of planning-tools commands, the master-plan workflow lifecycle, the v0.3.0+ list-shape mandate (phases and questions as headings + bulleted scope items, never tables), the v0.3.2+ plain-bullet shape (no `- [ ]` checkboxes — heading emoji is the sole tick signal), the progress-entry methodology, and the mechanics of Claude Code's plan-mode file storage.
14SKILL.mdUpdated May 13, 2026
oborchers/whitespace-density
testing
VerifiedTrustedCommunity
This skill should be used when the user is adjusting spacing, padding, margins, content density, section gaps, vertical rhythm, or separation between elements. Also applies when reviewing whether a design feels cramped or too sparse, choosing between borders and whitespace for separation, or defining a spacing system. Covers the 4px/8px spacing system, macro vs micro whitespace, content density spectrum, separation techniques (whitespace > background shifts > borders), and vertical rhythm.
12SKILL.mdUpdated May 22, 2026
oborchers/visual-interest-expression
development
VerifiedTrustedCommunity
This skill should be used when the user is defining brand personality in design, choosing between illustration and photography, adding motion or animation, creating visual motifs, ensuring layout variety, customizing CSS framework defaults, or calibrating the level of creative expression for a given context. Covers Lavie & Tractinsky's expressive aesthetics, the expression spectrum (restrained to bold), brand personality translation, illustration systems, photography direction, and template independence.
12SKILL.mdUpdated May 22, 2026
oborchers/visual-hierarchy
development
VerifiedTrustedCommunity
This skill should be used when the user is establishing visual importance, designing headings, creating focal points, designing CTAs or buttons, arranging label-data relationships, implementing scanning patterns (F-pattern, Z-pattern), or ensuring one dominant element per screen. Covers the three levers of hierarchy (size, weight, color), three-tier information architecture, the 'emphasize by de-emphasizing' principle, CTA design, and label-data relationships.
12SKILL.mdUpdated May 22, 2026