Indexes twelve SaaS UI design principle skills covering navigation, forms, tables, errors, accessibility, and more; invokes relevant ones before UI work or reviews.
How this skill is triggered — by the user, by Claude, or both
Slash command
/saas-design-principles:using-saas-principlesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<IMPORTANT>
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.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesGuides building SaaS dashboards, settings pages, data tables, and layouts with shadcn/ui + Tailwind. Covers component library selection, page composition, responsive design, dark mode, and UI states (loading, empty, error).
Provides UI/UX guidelines, 50+ styles, palettes, font pairings, charts, and priority rules for accessibility, layouts, performance in React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter.
Design UI/UX with 50+ styles, 97 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Also provides code review rules for accessibility, touch targets, performance, and responsive layout.