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.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
<IMPORTANT>
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.
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.
Use the Skill tool to invoke any skill by name. When invoked, follow the skill's guidance directly.
| 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 |
Invoke a skill when there is even a small chance the work touches one of these areas:
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.