Astro Design System: @rubenvillar/design-system-astro

Sobre el Proyecto

En este proyecto, asumí el liderazgo integral desde la concepción visual hasta la arquitectura de software. Mis responsabilidades clave fueron:

Arquitectura de Software: Diseñé una infraestructura híbrida que optimiza el Core Web Vitals al priorizar componentes estáticos en Astro y delegar interactividad a React 19 solo cuando es estrictamente necesario.
Diseño de Sistema (UX/UI): Creé un lenguaje visual coherente utilizando una metodología de tokens de diseño, permitiendo que marcas y aplicaciones cambien su identidad visual simplemente ajustando variables CSS.
Desarrollo Core: Implementé una librería de componentes atómicos siguiendo estándares de accesibilidad WCAG 2.2 y garantizando una experiencia de desarrollador (DX) superior con TypeScript.
Estrategia de Distribución: Gestioné el ciclo de vida del paquete en NPM, asegurando un sistema de exportaciones eficiente y compatibilidad con las últimas versiones de Tailwind y Astro.

El Desafío: Coherencia y Rendimiento en Escala

En el ecosistema actual, los desarrolladores a menudo se enfrentan a una difícil elección: velocidad de desarrollo o rendimiento final. Muchas librerías de componentes añaden un peso excesivo de JavaScript (bloat), degradando la experiencia del usuario final.

Astro Design System nace para romper esta dicotomía. Mi visión fue crear una herramienta que permitiera a los equipos construir interfaces premium en tiempo récord, sin sacrificar ni un milisegundo de tiempo de carga.

1. La Filosofía de Diseño Atómico

El sistema no es solo una colección de botones; es una jerarquía lógica de componentes.

Átomos: Tipografías, colores y espaciados puros.
Moléculas: Inputs con validación, botones con estados de carga.
Organismos: Navbars complejos, footers dinámicos y sistemas de grids responsivos. Esta estructura permite una escalabilidad infinita, donde cada pieza encaja perfectamente con la siguiente.

2. Rendimiento por Diseño (Performance by Default)

Gracias a la arquitectura de Astro, el sistema genera HTML estático por defecto. Esto significa que componentes como el Footer o la Typography no envían ni una sola línea de JavaScript al navegador, resultando en puntuaciones de 100/100 en Google Lighthouse de manera nativa.

3. Experiencia de Usuario sin Fricción

Implementé un sistema de gestión de temas (Dark/Light mode) que utiliza una técnica de inyección de scripts previa al renderizado. Esto elimina el molesto "flash" de luz blanca al cargar la página en modo oscuro, una de las quejas más comunes en aplicaciones modernas.

Desafíos Técnicos

1. Eliminación del "Theme Flicker"

Uno de los retos principales fue evitar el parpadeo de luz blanca cuando un usuario con modo oscuro activado recarga la página. Se resolvió mediante un ThemeScript inyectado directamente en el <head> que ejecuta una lógica de bloqueo antes de que el navegador renderice el cuerpo de la página.

2. Composición Multi-Framework

Mantener la coherencia de estilos entre componentes puramente estáticos (Astro) y componentes interactivos (React) requirió una arquitectura de Tailwind muy rigurosa. Se implementó una estrategia de "variables CSS dinámicas" que permite que ambos frameworks consuman los mismos tokens de diseño sin duplicar código.

3. Distribución como Paquete NPM

Configurar la librería para ser consumida externamente implicó optimizar el sistema de exportaciones (exports en package.json) para que los proyectos cliente pudieran importar solo lo necesario, manteniendo un bundle size reducido y permitiendo que Tailwind CSS detectara las clases utilizadas dentro del paquete.

Mi Rol