saas-design-principles

Review the current code or component against SaaS design principles — identifies violations and suggests improvements

Use this agent for comprehensive SaaS design audits of components, pages, or features. Examples: <example>Context: User has built a settings page and wants it reviewed. user: "Review my settings page against SaaS best practices" assistant: "I'll use the saas-design-reviewer agent to audit the settings page." <commentary>Settings page involves permissions, form design, and navigation patterns — the agent audits against all relevant principles.</commentary></example> <example>Context: User finished building a data table component. user: "Check if my table component follows good SaaS patterns" assistant: "I'll use the saas-design-reviewer agent to review the table implementation." <commentary>Data table touches alignment, pagination, bulk actions, responsive patterns — comprehensive audit needed.</commentary></example> <example>Context: User is building onboarding and wants a design check. user: "Does my onboarding flow follow best practices?" assistant: "I'll use the saas-design-reviewer agent to evaluate the onboarding flow." <commentary>Onboarding involves progressive disclosure, empty states, forms — multi-principle audit.</commentary></example>

This skill should be used when the user is building or reviewing accessibility (a11y), WCAG 2.2 AA compliance, keyboard navigation, focus management, screen reader support, ARIA attributes, color contrast, or SPA accessibility. Covers legal requirements, accessible component primitives, and the unique focus challenges of single-page applications.

This skill should be used when the user is building or reviewing login flows, magic links, SSO (SAML/OIDC), multi-factor authentication (MFA), OTP input fields, password reset, or session management. Covers the modern auth stack hierarchy, MFA fatigue prevention, session expiry UX, and GDPR compliance for authentication.

This skill should be used when the user is building or reviewing data tables, pagination, column alignment, bulk actions, sorting, filtering, row selection, or table-to-card responsive patterns. Covers the pagination vs infinite scroll decision, DataTable vs IndexTable patterns, and column default strategy.

This skill should be used when the user is building or reviewing theming systems, design tokens, dark mode implementation, CSS custom properties, color naming conventions, or theme switching architecture. Covers the three-tier token model (primitive/semantic/component), purpose-based naming, and the DTCG specification.

This skill should be used when the user is building or reviewing error states, validation errors, permission errors (403), session expiry warnings, offline handling, concurrent edit conflicts, rate limiting, or server error (500) recovery flows. Covers the full taxonomy of SaaS failure modes and graceful degradation patterns.

This skill should be used when the user is building or reviewing form validation, inline validation, auto-save vs explicit save patterns, form error messages, multi-step wizards, toggle switches, or input fields. Covers the "reward early, punish late" validation strategy and form UX best practices.

This skill should be used when the user is building or reviewing toast notifications, banners, modal dialogs, inline messages, snackbars, or alert systems. Covers the four-tier notification hierarchy, feedback patterns, success and error messaging, and alert fatigue prevention.

This skill should be used when the user is building or reviewing role-based access control (RBAC), invitation flows, settings pages, admin panels, or feature gating. Covers the hide/disable/reduce strategy for restricted features, RBAC progression, account vs workspace settings separation, and invitation UX.

This skill should be used when the user is building or reviewing onboarding flows, empty states, progress checklists, signup forms, product tours, or first-run experiences. Covers progressive disclosure of features, time-to-value optimization, the Zeigarnik effect, and feature revelation strategy.

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.

This skill should be used when the user is building or reviewing sidebar navigation, command palette (Cmd+K), breadcrumbs, organization or workspace switching, multi-tenancy UI, or top bar layout. Covers navigation structure decisions, power-user keyboard patterns, and drill-down navigation.

This skill should be used when the user is building or reviewing loading states, optimistic UI updates, skeleton screens, code splitting, lazy loading, or performance budgets. Covers perceived speed, bundle size optimization, INP targets, and any work where application responsiveness and perceived latency matter.

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.

1 hook across 1 event