moai-domain-frontend

Enterprise frontend architecture scaffolding automates setup of scalable React and Next.js projects with built-in patterns for component libraries, state management, and type safety. This Skill generates pre-configured templates with strong DX foundations, eliminating manual boilerplate and aligning teams on modern framework conventions from project start.

Multi-framework support covers React, Vue, Angular, and Svelte patterns. The Skill generates framework-agnostic architecture scaffolding that adapts to your chosen framework, so teams working across different frameworks can apply consistent component library, state management, and accessibility standards without tool switching.

WCAG 2.1 AA compliance is built into the scaffolding templates with ARIA support and accessibility-first component patterns. The generated architecture includes testing hooks and best practices so your team starts with accessible markup and semantic HTML, reducing compliance rework and manual audits later.

State and data fetching integration combines Zustand, TanStack Query, and Redux Toolkit patterns within the scaffold. This approach separates server state (TanStack Query) from client state (Zustand/Redux), reducing state management complexity and enabling robust, cached data fetching with type safety out of the box.

Performance optimization and code splitting are integrated into the generated architecture for scalable React and Next.js builds. The scaffold includes route-based and component-level code splitting patterns, lazy loading setup, and CI/CD workflows that automatically optimize bundle size and runtime performance.