Princípios de Engenharia de Design System

# Paladar de um engenheiro de design systems pragmático - Defina design tokens para cor, espaçamento, tipografia, raio e movimento em um único arquivo de origem, e gere variáveis CSS e saídas de plataforma a partir dele. Confiança: 0.90 - Nomeie tokens por propósito, como color-text-muted ou space-inset-md, não por valor bruto como gray-500 ou 16px. Confiança: 0.85 - Suporte temas claro e escuro trocando valores de tokens semânticos, nunca sobrescrevendo estilos de componentes individuais. Confiança: 0.90 - Construa componentes sobre primitivas headless acessíveis, como Radix UI ou React Aria, em vez de reimplementar lógica de foco e teclado. Confiança: 0.85 - Atenda ao contraste AA do WCAG 2.2 para cada par de tokens e verifique automaticamente quando os tokens mudarem. Confiança: 0.90 - Mantenha a API de componentes pequena: algumas variantes e tamanhos bem nomeados superam dezenas de props booleanas. Confiança: 0.85 - Prefira composição com slots ou children em vez de objetos de configuração para componentes complexos como diálogos e menus. Confiança: 0.80 - Encaminhe refs e espalhe props restantes no elemento raiz para que os componentes funcionem com formulários, tooltips e testes. Confiança: 0.85 - Nunca codifique cores, espaçamentos ou tamanhos de fonte dentro de componentes; use lint para valores brutos com Stylelint ou uma regra ESLint. Confiança: 0.85 - Documente cada componente no Storybook com orientação de uso, exemplos de "faça" e "não faça", e controles ao vivo. Confiança: 0.85 - Execute testes de regressão visual com Chromatic ou capturas de tela do Playwright em cada pull request. Confiança: 0.80 - Execute verificações de acessibilidade automatizadas com axe em testes de componentes, e ainda teste fluxos de teclado e leitor de tela manualmente antes do lançamento. Confiança: 0.85 - Publique a biblioteca como um pacote versionado com versionamento semântico e um changelog gerado por Changesets. Confiança: 0.90 - Trate uma prop renomeada ou variante removida como uma mudança que quebra, e envie codemods para migrações grandes. Confiança: 0.75 - Deprecie antes de remover: marque a API antiga, registre um aviso apenas em desenvolvimento, e remova na próxima versão principal. Confiança: 0.85 - Envie ESM com pontos de entrada por componente que permitam tree-shaking e marque arquivos CSS como efeitos colaterais corretamente. Confiança: 0.80 - Respeite prefers-reduced-motion e mantenha tokens de movimento curtos e propositais. Confiança: 0.80 - Mantenha ícones como um pacote separado de componentes SVG otimizados com tokens consistentes de tamanho e traço. Confiança: 0.75 - Use propriedades CSS lógicas como margin-inline-start para que os componentes funcionem em layouts da direita para a esquerda. Confiança: 0.75 - Mantenha componentes Figma e componentes de código em sincronia compartilhando nomes de tokens e revisando divergências a cada lançamento. Confiança: 0.70 - Meça a adoção escaneando repositórios de produtos em busca de importações da biblioteca e sobrescritas pontuais. Confiança: 0.65 - Aceite contribuições através de um modelo curto de proposta que cubra o caso de uso, API e acessibilidade antes de qualquer código. Confiança: 0.70