Principios de Ingeniería de Sistemas de Diseño

# Gusto de sistema de diseño de un ingeniero pragmático de sistemas de diseño - Define tokens de diseño para color, espaciado, tipografía, radio y movimiento en un archivo fuente, y genera variables CSS y salidas de plataforma a partir de él. Confianza: 0.90 - Nombra los tokens por propósito, como color-text-muted o space-inset-md, no por valor bruto como gray-500 o 16px. Confianza: 0.85 - Soporta temas claro y oscuro intercambiando valores de tokens semánticos, nunca sobrescribiendo estilos de componentes individuales. Confianza: 0.90 - Construye componentes sobre primitivas headless accesibles como Radix UI o React Aria en lugar de reimplementar lógica de foco y teclado. Confianza: 0.85 - Cumple con el contraste AA de WCAG 2.2 para cada par de tokens y verifícalo automáticamente cuando los tokens cambien. Confianza: 0.90 - Mantén la API de componentes pequeña: unas pocas variantes y tamaños bien nombrados superan a docenas de props booleanas. Confianza: 0.85 - Prefiere composición con slots o children sobre objetos de configuración para componentes complejos como diálogos y menús. Confianza: 0.80 - Reenvía refs y extiende las props restantes al elemento raíz para que los componentes funcionen con formularios, tooltips y pruebas. Confianza: 0.85 - Nunca codifiques colores, espaciados o tamaños de fuente dentro de los componentes; lint para valores brutos con Stylelint o una regla de ESLint. Confianza: 0.85 - Documenta cada componente en Storybook con guía de uso, ejemplos de hacer y no hacer, y controles en vivo. Confianza: 0.85 - Ejecuta pruebas de regresión visual con Chromatic o capturas de pantalla de Playwright en cada pull request. Confianza: 0.80 - Ejecuta verificaciones de accesibilidad automatizadas con axe en pruebas de componentes, y aún así prueba flujos de teclado y lector de pantalla manualmente antes del lanzamiento. Confianza: 0.85 - Publica la librería como un paquete versionado con versionado semántico y un changelog generado por Changesets. Confianza: 0.90 - Trata una prop renombrada o una variante eliminada como un cambio de ruptura, y envía codemods para migraciones grandes. Confianza: 0.75 - Depreca antes de eliminar: marca la API antigua, registra una advertencia solo de desarrollo, y elimínala en la próxima versión mayor. Confianza: 0.85 - Envía ESM con puntos de entrada por componente que sean tree-shakeable y marca los archivos CSS como efectos secundarios correctamente. Confianza: 0.80 - Respeta prefers-reduced-motion y mantén los tokens de movimiento cortos y con propósito. Confianza: 0.80 - Mantén los iconos como un paquete separado de componentes SVG optimizados con tokens de tamaño y trazo consistentes. Confianza: 0.75 - Usa propiedades CSS lógicas como margin-inline-start para que los componentes funcionen en diseños de derecha a izquierda. Confianza: 0.75 - Mantén los componentes de Figma y los componentes de código sincronizados compartiendo nombres de tokens y revisando la deriva en cada lanzamiento. Confianza: 0.70 - Mide la adopción escaneando repositorios de productos en busca de importaciones de la librería y sobrescrituras únicas. Confianza: 0.65 - Acepta contribuciones a través de una plantilla de propuesta corta que cubra el caso de uso, la API y la accesibilidad antes de cualquier código. Confianza: 0.70