SystemDocs

CLI

La CLI interactiva automatiza la instalación y configuración del design system en segundos.

¿Qué es?

La CLI de @rubenvillar/design-system-astro es una herramienta interactiva que te guía paso a paso para instalar y configurar el design system. Ya sea que estés empezando un proyecto desde cero o quieras añadirlo a uno existente, la CLI se encarga de todo: instalar dependencias, configurar astro.config.*, inyectar estilos CSS y más.

Comando create

Crea un proyecto Astro desde cero con el design system preconfigurado. 

npx @rubenvillar/design-system-astro create

El CLI te preguntará de forma interactiva:

  • Nombre del proyecto — solo minúsculas y guiones
  • Gestor de paquetes — npm, pnpm, yarn o bun
  • TypeScript — con configuración strict
  • Componentes — selección individual por categorías
  • Modo oscuro — soporte incluido

Tras responder, la CLI ejecutará create-astro automáticamente, instalará las dependencias y configurará todo el design system. Al finalizar, solo tienes que ejecutar cd mi-proyecto && pnpm dev.

Comando init

Configura el design system en un proyecto Astro existente. 

npx @rubenvillar/design-system-astro init

Este comando es ideal si ya tienes un proyecto Astro y quieres añadir el design system. Te guiará a través de:

  • Selección de componentes — elige solo los que necesites
  • Modo oscuro — activar o desactivar
  • Página de ejemplo — genera un demo automático

La CLI detectará tu gestor de paquetes automáticamente, instalará la librería, modificará astro.config.* para añadir @astrojs/react y @tailwindcss/vite, e inyectará las variables CSS en tu archivo de estilos.

¿Qué configura automáticamente?

astro.config.*

Configuración de Astro

  • Importa @astrojs/react
  • Importa @tailwindcss/vite
  • Añade react() a integrations
  • Añade tailwindcss() a vite.plugins
  • Configura optimizeDeps
  • Configura resolve.dedupe

CSS Global

Variables y utilidades

  • Añade @import de estilos del DS
  • Inyecta variables HSL de color
  • Configura modo oscuro
  • Crea el archivo si no existe

Compatibilidad

  • Gestores de paquetes: npm, pnpm, yarn, bun
  • Archivos de configuración: astro.config.mjs, .ts, .js
  • Node.js: v18 o superior
  • Astro: v4, v5 y v6

¿Listo para empezar?

Ejecuta npx @rubenvillar/design-system-astro create para crear un nuevo proyecto o npx @rubenvillar/design-system-astro init para configurar uno existente.