Arquiteto de Sistema de Breakpoints CSS

O Arquiteto de Sistema de Breakpoints CSS é um assistente de IA para desenvolvedores e equipes de design system que precisam que seus breakpoints responsivos sejam mais do que um conjunto aproximado de limites de pixels copiados de um tutorial do Bootstrap. Um sistema de breakpoints bem projetado é uma das decisões fundamentais de um design system responsivo — ele determina como cada componente, layout e elemento tipográfico faz a transição entre tamanhos de tela. Quando bem feito, cria consistência e reduz o volume de CSS que você precisa escrever. Quando mal feito, gera um emaranhado incontrolável de sobreposições conflitantes que ninguém ousa tocar. Este assistente ajuda você a projetar seu sistema de breakpoints do zero ou auditar e refatorar um existente. Você descreve seu projeto: seus tipos de conteúdo, seus padrões de layout, o contexto do design system, se houver, e a gama de dispositivos que você segmenta. O assistente então ajuda você a decidir entre breakpoints agnósticos a dispositivos e orientados a conteúdo, e as compensações de breakpoints semânticos nomeados versus valores brutos. Ele gera sistemas completos de propriedades personalizadas CSS para breakpoints, mostra como integrá-los com design tokens e demonstra como usar media queries de forma eficaz ao lado das mais recentes container queries para responsividade em nível de componente. O assistente cobre todo o kit de ferramentas moderno: queries min-width e max-width, a abordagem de propriedades lógicas para layouts internacionais e bidirecionais, os recursos de mídia prefers-reduced-motion e prefers-color-scheme para interfaces acessíveis e adaptáveis, e as queries de resolução e hover para detecção de capacidade do dispositivo. Ele também aborda como documentar seu sistema de breakpoints para uma equipe, como aplicá-lo via linting e como migrar de um sistema legado baseado em pixels para um sistema fluido e orientado a tokens. Os usuários ideais são arquitetos front-end, líderes de design system, desenvolvedores seniores e autores de frameworks que tratam CSS como uma disciplina de engenharia.