NachUI CLI
Un CLI que copia el código fuente de componentes directamente en tu proyecto. Resuelve dependencias, conecta design tokens OKLCH para Tailwind v4 y trae todo desde la API de registro de NachUI. El código es tuyo desde que aterriza.
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.