Problem
Installing design systems often involves tedious manual configurations, inconsistent file paths, and error-prone dependency management. Developers waste valuable time setting up environments instead of building actual products.
Solution
I developed a CLI tool that acts as a smart bridge between a centralized Registry (NestJS) and the developer's local environment. The CLI automates the initial setup, detects the framework in use, and allows for the surgical injection of components and styles.
How it Works
- Initialization: The user runs nachui init. The CLI automatically detects whether the project is running on Next.js or Vite.
- Personalization: It queries the API for available themes, allowing the user to select one via an interactive interface.
- Dynamic Configuration: The CLI downloads and injects CSS tokens, creates the nachui.json config file, and generates essential utilities (such as the cn helper).
- Component Installation: Using nachui add <slug>, the CLI resolves required dependencies, installs them, and writes the source code into the correct directory based on defined path aliases.
Technical Stack
- Runtime: Node.js
- Language: TypeScript
- CLI Engine: Commander.js
- Terminal UI/UX: Clack Prompts + Kleur
- Build Tool: Tsup (Rollup-based)
- Validation: Zod
Technical Decisions
- Clack Prompts: Chosen to deliver a modern, intuitive, and visually polished terminal experience (Spinners, Selects, Notes).
- Config-Driven Architecture: Using nachui.json ensures the CLI remains agnostic to the user's specific folder structure.
- Tsup for Bundling: Selected for its ability to generate lightweight, fast builds with native TypeScript and ESM support.
- Commander.js: Provides a robust and standardized structure for handling commands, arguments, and versioning.
Challenges & Learnings
- Environment Detection: Implementing logic to identify frameworks and folder structures dynamically.
- File System Management: Handling safe file manipulation (read/write) to inject code without breaking existing user files.
- Lifecycle Management: Designing update commands that balance remote code integrity with local user modifications.
- NPM Distribution: Optimizing the package to ensure it remains lightweight and executable via npx or pnpm dlx.