frontend-foundation

What problem does it solve?

Day-0 frontend foundation ensures consistent spacing, accessible theming, and layout stability across React/Next.js apps. It tackles issues like inconsistent spacing, missing dark mode, mobile usability gaps, and CLS regressions by establishing a cohesive design system from the start.

Core Features & Use Cases

• Design tokens, dual theme (dark + light), and a responsive spacing scale to create a cohesive visual language.
• A mobile-first layout strategy and CLS Zero discipline to prevent layout shifts during load.
• A reusable component system on headless primitives (Base UI, Radix, React Aria) that accelerates development while ensuring accessibility.
• Works as the foundational layer invoked before premium-frontend-design, and pairs with a frontend-output-validator for post-implementation checks.
• Use cases include starting a new frontend project, setting up a design system, or quickly fixing foundational issues like broken mobile layouts or icon budget violations.

Quick Start

Initialize frontend-foundation at project start to establish tokens, dual theme, and mobile-first layout before building UI components.