oborchers/using-saas-principles
saas-design-principles/skills/using-saas-principles/SKILL.md
This skill should be used when the user asks "which SaaS design skill should I use", "show me all design principles", "help me pick a design pattern", or at the start of any SaaS-related conversation. Provides the index of all twelve principle skills and ensures the right ones are invoked before any SaaS UI work begins.
$ install --global
skillsauthnpx skillsauth add oborchers/fractional-cto using-saas-principlesInstall 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 AM138.3s1 file scanned
SKILL.md
- name:
- using-saas-principles
- description:
- This skill should be used when the user asks "which SaaS design skill should I use", "show me all design principles", "help me pick a design pattern", or at the start of any SaaS-related conversation. Provides the index of all twelve principle skills and ensures the right ones are invoked before any SaaS UI work begins.
- version:
- 1.0.0
<IMPORTANT>
When working on any SaaS UI pattern — forms, tables, navigation, authentication, onboarding, notifications, errors, permissions, settings, theming, or responsive layouts — invoke the relevant saas-design-principles skill BEFORE writing or reviewing code.
These are not suggestions. They are research-backed, opinionated principles drawn from Linear, Stripe, Intercom, Shopify Polaris, GitHub Primer, IBM Carbon, Atlassian, and decades of Nielsen Norman Group research. </IMPORTANT>
How to Access Skills
Use the Skill tool to invoke any skill by name. When invoked, follow the skill's guidance directly.
Available Skills
| Skill | Triggers On |
|-------|-------------|
| saas-design-principles:speed-is-the-feature | Performance, loading states, optimistic UI, skeleton screens, perceived speed |
| saas-design-principles:saas-navigation | Sidebar nav, command palette (Cmd+K), breadcrumbs, org/workspace switching |
| saas-design-principles:progressive-disclosure | Onboarding flows, empty states, checklists, feature revelation, signup |
| saas-design-principles:form-design | Form validation, auto-save vs explicit save, inline errors, multi-step wizards |
| saas-design-principles:notification-hierarchy | Toasts, banners, modals, inline messages, alert fatigue, feedback |
| saas-design-principles:error-handling | Validation errors, 403s, session expiry, network errors, conflict resolution |
| saas-design-principles:data-tables | Tables, pagination, column alignment, bulk actions, sorting, filtering |
| saas-design-principles:permissions-and-settings | RBAC, invitations, role management, account vs workspace settings |
| saas-design-principles:authentication | Login, MFA, magic links, SSO, session management, GDPR |
| saas-design-principles:accessibility | WCAG 2.2 AA, keyboard navigation, focus management, SPA a11y, ARIA |
| saas-design-principles:design-tokens | Theming, dark mode, CSS variables, token architecture, color naming |
| saas-design-principles:responsive-design | Breakpoints, mobile layouts, table-to-card conversion, touch targets |
When to Invoke Skills
Invoke a skill when there is even a small chance the work touches one of these areas:
- Building or modifying any UI component listed above
- Reviewing existing SaaS UI for quality
- Making architectural decisions about layout, navigation, or state management
- Designing new features that involve user interaction
The Three Meta-Principles
All twelve principles rest on three foundations:
-
Utility before Usability before Beauty — A feature must work correctly before it works smoothly, and smoothly before it delights. Sequential dependencies, not tradeoffs.
-
Purpose-built over flexible — Opinionated defaults that work for 80% of users beat infinitely configurable systems that work for nobody without setup.
-
Ship or it doesn't exist — Every principle only matters if it reaches real users and improves measurable outcomes.
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