Problema
Instalar sistemas de diseño suele implicar configuraciones manuales tediosas, inconsistencias en las rutas de archivos y una gestión de dependencias propensa a errores. Los desarrolladores pierden tiempo configurando el entorno en lugar de construir el producto.
Solución
Desarrollé una herramienta CLI que actúa como un puente inteligente entre un Registry centralizado (NestJS) y el entorno local del desarrollador. El CLI automatiza el setup inicial, detecta el framework utilizado y permite la inyección quirúrgica de componentes y estilos.
Cómo funciona
- Inicialización: El usuario ejecuta nachui init. El CLI detecta si el proyecto es Next.js o Vite.
- Personalización: Se consulta a la API los temas disponibles y el usuario elige uno mediante una interfaz interactiva.
- Configuración Dinámica: El CLI descarga e inyecta los tokens de CSS, crea el archivo de configuración nachui.json y genera utilidades esenciales (como la función cn).
- Instalación de Componentes: Con nachui add <slug>, el CLI resuelve las dependencias necesarias, las instala y escribe el código fuente en la carpeta correspondiente según los alias definidos.
Stack Tecnológico
- Runtime: Node.js
- Lenguaje: TypeScript
- CLI Engine: Commander.js
- UI/UX Terminal: Clack Prompts + Kleur
- Build Tool: Tsup (Rollup-based)
- Validación: Zod
Decisiones Técnicas
- Uso de Clack Prompts: Para ofrecer una experiencia de terminal moderna, intuitiva y visualmente pulida (Spinners, Selects, Notes).
- Arquitectura Basada en Configuración: El uso de un archivo nachui.json permite que el CLI sea agnóstico a la estructura de carpetas del usuario.
- Tsup para el Bundling: Elegido por su capacidad de generar builds ligeros y rápidos con soporte nativo para TypeScript y ESM.
- Commander.js: Provee una estructura robusta para el manejo de comandos, argumentos y versiones de forma estandarizada.
Desafíos y Aprendizajes
- Detección de Entorno: Implementación de lógica para identificar frameworks y estructuras de carpetas dinámicamente.
- Manejo de File System: Manipulación segura de archivos (lectura/escritura) para inyectar código sin romper archivos existentes del usuario.
- Gestión de Ciclo de Vida: Diseño de comandos de actualización (update) que balancean la integridad del código remoto con los cambios locales del usuario.
- Distribución en NPM: Optimización del paquete para asegurar que sea ligero y ejecutable vía npx o pnpm dlx.