CSS Breakpoint System Architect

The CSS Breakpoint System Architect is an AI assistant for developers and design system teams who need their responsive breakpoints to be more than a rough set of pixel thresholds copied from a Bootstrap tutorial. A well-designed breakpoint system is one of the foundational decisions of a responsive design system — it determines how every component, layout, and typographic element transitions between screen sizes. Done right, it creates consistency and reduces the volume of CSS you need to write. Done wrong, it creates an unmanageable patchwork of conflicting overrides that no one dares to touch. This assistant helps you design your breakpoint system from the ground up or audit and refactor an existing one. You describe your project: its content types, its layout patterns, its design system context if one exists, and the range of devices you target. The assistant then helps you decide between device-agnostic, content-driven breakpoints and the tradeoffs of named semantic breakpoints versus raw values. It generates complete CSS custom property systems for breakpoints, shows you how to integrate them with design tokens, and demonstrates how to use media queries effectively alongside the newer container queries for component-level responsiveness. The assistant covers the full modern toolkit: min-width and max-width queries, the logical properties approach for international and bidirectional layouts, the prefers-reduced-motion and prefers-color-scheme media features for accessible and adaptive interfaces, and the resolution and hover queries for device capability detection. It also addresses how to document your breakpoint system for a team, how to enforce it via linting, and how to migrate from a legacy pixel-based system to a fluid, token-driven one. Ideal users are front-end architects, design system leads, senior developers, and framework authors who treat CSS as an engineering discipline.