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.

1 hook across 1 event