initkit 1.2.0 → 1.2.2

package/README.md

@@ -23,7 +23,7 @@ Built with ES Modules | TypeScript Ready | Zero Config Required | Fully Document
 
 ![InitKit Demo](https://raw.githubusercontent.com/shirishshrestha/initkit/main/assets/demo.gif)
 
-_Creating a full-stack Next.js + Express application with InitKit_
+_Creating a production-ready React application with InitKit_
 
 </div>
 
@@ -35,11 +35,11 @@ InitKit eliminates the tedious project setup process by providing intelligent sc
 
 **Key Benefits:**
 
-- **Live Version Fetching** - Automatically fetches latest package versions from npm registry (no hardcoded versions!)
+- **CLI-First Architecture** - Uses official framework CLIs (create-next-app, create-vite, create-vue, express-generator)
 - **Smart Validation** - Real-time npm package name validation with helpful suggestions and colored feedback
 - **Enhanced CLI UX** - Beautiful formatted help text with colors, boxes, and comprehensive examples
-- **Monorepo Support** - Full-stack monorepo architecture with Turborepo and shared packages
-- **Multiple Stacks** - MERN, PERN, T3 Stack, Next.js + Express, and more
+- **Always Up-to-Date** - Leverages official CLIs to ensure latest best practices and configurations
+- **Non-Interactive Mode** - Properly configured for CI/CD with no hanging prompts
 - **Flexible Architecture** - Feature-based, type-based, domain-driven, clean architecture structures
 - **Docker Ready** - Complete Docker orchestration with multi-stage builds and docker-compose
 - **API Integration** - Seamless frontend-backend communication with axios interceptors
@@ -110,32 +110,30 @@ Want to contribute or add a custom template?
 
 ### 🎯 Project Types
 
-| Type                | Description                | Use Case                           |
-| ------------------- | -------------------------- | ---------------------------------- |
-| **Frontend Only**   | Single-page applications   | React, Vue, Angular, Svelte apps   |
-| **Backend Only**    | REST APIs and services     | Express, Fastify, NestJS servers   |
-| **Full Stack**      | Integrated client + server | Monorepo with frontend and backend |
-| **Node.js Library** | Publishable npm packages   | Reusable modules and utilities     |
+| Type                | Description              | Use Case                         |
+| ------------------- | ------------------------ | -------------------------------- |
+| **Frontend Only**   | Single-page applications | React, Vue, Next.js apps         |
+| **Backend Only**    | REST APIs and services   | Express, NestJS, Fastify servers |
+| **Node.js Library** | Publishable npm packages | Reusable modules and utilities   |
 
 ### 🎨 Framework Support
 
 **Frontend Frameworks:**
 
-- React (with Create React App or Vite)
-- Vue.js (Vue CLI or Vite)
-- Angular (Angular CLI)
-- Svelte (SvelteKit)
-- Next.js (App Router & Pages Router)
-- Nuxt.js (Vue 3)
-- Vanilla JavaScript (Modern ES6+)
+- React + Vite (Fast HMR, modern build tool)
+- Next.js (App Router with TypeScript)
+- Vue.js + Vite (Progressive framework)
 
 **Backend Frameworks:**
 
 - Express.js (Minimalist & flexible)
-- Fastify (High performance)
-- Koa (Next-gen Express)
-- NestJS (Enterprise TypeScript)
-- Hapi (Configuration-centric)
+
+**Coming Soon:**
+
+- NestJS (Enterprise TypeScript) - Code ready, testing in progress
+- Fastify (High performance) - Code ready, testing in progress
+- Nuxt.js (Vue 3) - Code ready, testing in progress
+- Svelte (Modern reactivity) - Code ready, testing in progress
 
 **Databases:**
 
@@ -168,31 +166,7 @@ Want to contribute or add a custom template?
 - Environment variables (.env setup)
 - Turborepo (monorepo build system)
 
-### 🏗️ Full-Stack Architectures
-
-**Monorepo (Turborepo):**
-
-- Shared packages (types, UI components)
-- Unified workspace management
-- Optimized build pipeline
-- Consistent tooling across apps
-
-**Traditional Stack Options:**
-
-- **MERN** - MongoDB + Express + React + Node
-- **PERN** - PostgreSQL + Express + React + Node
-- **Next.js + Express** - Full-stack React with API
-- **Laravel + React** - PHP backend with React frontend
-
-**Features:**
-
-- API integration (Vite proxy, Next.js rewrites)
-- Docker orchestration (frontend + backend + database)
-- Environment configuration
-- Shared TypeScript types
-- Reusable UI components
-
-### 🎨 Styling Solutions
+### Styling Solutions
 
 | Solution              | Description                     | Best For                       |
 | --------------------- | ------------------------------- | ------------------------------ |
@@ -341,90 +315,98 @@ my-react-app/
 └── package.json
 ```
 
-### Example 2: Full Stack MERN with Docker
+### Example 2: Next.js with TypeScript
 
 ```bash
-initkit fullstack-app
-# Select: Full Stack → Traditional → MERN
+initkit nextjs-app
+# Select: Frontend Only → Next.js → TypeScript → Tailwind CSS
 ```
 
 **Generated Structure:**
 
 ```
-fullstack-app/
-├── client/              # React + Vite frontend
-│   ├── src/
-│   │   ├── features/
-│   │   ├── components/
-│   │   └── lib/api.js
-│   ├── Dockerfile
-│   └── package.json
-├── server/              # Express backend
-│   ├── src/
-│   │   ├── controllers/
-│   │   ├── models/
-│   │   └── routes/
-│   ├── Dockerfile
-│   └── package.json
-├── docker-compose.yml   # MongoDB + Frontend + Backend
-└── README.md
+nextjs-app/
+├── src/
+│   ├── app/
+│   │   ├── page.tsx
+│   │   └── layout.tsx
+│   ├── components/
+│   ├── features/
+│   └── lib/
+├── public/
+├── .eslintrc.json
+├── next.config.js
+├── tsconfig.json
+├── tailwind.config.js
+└── package.json
 ```
 
-### Example 3: Monorepo with Turborepo
+### Example 3: Vue with TypeScript
 
 ```bash
-initkit my-monorepo
-# Select: Full Stack → Monorepo → Next.js + Express + PostgreSQL
+initkit vue-app
+# Select: Frontend Only → Vue → TypeScript → Tailwind CSS
 ```
 
 **Generated Structure:**
 
 ```
-my-monorepo/
-├── apps/
-│   ├── frontend/        # Next.js app
-│   └── backend/         # Express API
-├── packages/
-│   ├── shared-types/    # Shared TypeScript interfaces
-│   └── ui-components/   # Shared React components
-├── turbo.json          # Turborepo config
-├── docker-compose.yml
+vue-app/
+├── src/
+│   ├── components/
+│   ├── features/
+│   ├── composables/
+│   ├── stores/
+│   ├── router/
+│   ├── App.vue
+│   └── main.ts
+├── public/
+├── vite.config.ts
+├── tsconfig.json
 └── package.json
 ```
 
-### Example 4: Express API with Docker
+### Example 4: Express Backend API
 
 ```bash
 initkit api-server
-# Select: Backend Only → Express → MongoDB → TypeScript → Docker + GitHub Actions
+# Select: Backend Only → Express → JavaScript → MVC structure
 ```
 
-**Features:**
+**Generated Structure:**
 
-- RESTful API structure
-- MongoDB connection setup
-- Docker multi-stage build
-- GitHub Actions CI/CD
-- Environment variable management
+```
+api-server/
+├── models/
+├── controllers/
+├── routes/
+│   ├── index.js
+│   └── users.js
+├── middlewares/
+├── services/
+├── .env.example
+├── app.js
+└── package.json
+```
 
 ### Example 5: Quick Start with Defaults
 
 ```bash
 initkit quick-app --yes
-# Creates a full-stack app with React + Express + TypeScript
+# Creates a React + Vite app with TypeScript + Tailwind CSS
 ```
 
 ---
 
 ## Interactive Prompt Flow
 
-InitKit uses an intelligent 13-question flow that adapts based on your project type:
+InitKit uses an intelligent question flow that adapts based on your project type:
 
-1. **Project Type** - Frontend, Backend, Full Stack, or Library
+1. **Project Type** - Frontend, Backend, or Library
 2. **Project Name** - With real-time validation and suggestions
-3. **Frontend Framework** - Shown for Frontend/Full Stack projects
-4. **Backend Framework** - Shown for Backend/Full Stack projects
-5. **Database** - Shown for Backend/Full Stack projects
+3. **Frontend Framework** - Shown for Frontend projects
+4. **Backend Framework** - Shown for Backend projects
+5. **Database/ORM** - Shown for Backend projects
 6. **Language** - TypeScript (recommended) or JavaScript
 7. **Folder Structure** - Feature-based, Type-based, Domain-driven, or Flat
 8. **TypeScript Strictness** - Strict, Moderate, or Relaxed (if TS selected)
@@ -444,12 +426,12 @@ See [QUESTION_FLOW.md](./QUESTION_FLOW.md) for the complete decision tree.
 
 Unlike other scaffolding tools, InitKit generates **truly production-ready** projects:
 
-- **Latest Dependencies** - Fetches actual latest versions from npm registry (not hardcoded)
-- **No Manual Setup Required** - Everything configured and ready to deploy
-- **Best Practices Built-in** - Error boundaries, loading states, proper TypeScript types
-- **Security First** - Environment variables, input validation, secure authentication patterns
-- **Performance Optimized** - Code splitting, lazy loading, optimized bundle sizes
-- **Deployment Ready** - Docker files, CI/CD pipelines, health checks included
+- **Official CLIs** - Uses create-next-app, create-vite, create-vue, express-generator for best practices
+- **Always Current** - Leverages framework maintainers' latest configurations
+- **No Hanging** - Properly configured non-interactive mode for CI/CD pipelines
+- **TypeScript First** - Full TypeScript support with proper configurations
+- **Best Practices Built-in** - ESLint, Prettier, proper folder structures
+- **Package Manager Choice** - Full support for npm, yarn, pnpm, and bun
 
 ### 🚀 Developer Experience
 
@@ -729,33 +711,71 @@ initkit my-app --verbose
 
 ## Recent Updates
 
-### Version 1.1.0 (Latest)
+### Version 1.2.0 (Latest) 🚀
+
+**🎉 BREAKING CHANGES:**
+
+- **Removed fullstack project type** - Simplified to focus on stable frontend and backend options
+- **Migrated to CLI-first architecture** - Now uses official framework CLIs exclusively
 
-**🎉 Major Features:**
+**✨ Major Features:**
 
-- ✨ **Live NPM Version Fetching** - Automatically fetches latest package versions from npm registry
-- 🎯 **New Libraries Added**:
-  - Redux Toolkit & React Redux (state management)
-  - Jotai (atomic state)
-  - React Router (routing)
-  - React Icons (icon library)
-  - Radix UI (headless components)
-  - ShadCN UI (component library)
-- 📦 **Bun Support** - Added bun as a package manager option
+- **CLI-First Architecture** - Uses official CLIs for all frameworks:
+  - `create-next-app` for Next.js projects
+  - `create-vite@5.1.0` for React (pinned for stability)
+  - `create-vue` with `--typescript --default` for Vue
+  - `express-generator` for Express backends
+- **Enhanced Logging** - Emoji-based progress indicators (📦) with detailed command visibility
+- **Non-Interactive Mode** - All frameworks properly configured for CI/CD (no hanging prompts)
 
 **🐛 Bug Fixes:**
 
-- Fixed TypeScript config errors (Next.js, Vue, Express)
-- Fixed Express backend feature-based structure directory errors
-- Fixed package manager selection for yarn, pnpm, and bun
-- Fixed Next.js tsconfig to properly include `src/**/*.ts` patterns
+- Fixed package manager override bug (CLI default removed)
+- Fixed create-vite@8.x hanging (pinned to stable v5.1.0)
+- Fixed create-vue prompting (added --default flag)
+- Fixed CI environment variable for non-interactive execution
 
 **🔧 Improvements:**
 
-- All templates now fetch actual latest versions from npm (React 19+, Vite 7+, Next.js 16+)
-- Enhanced error messages with better troubleshooting suggestions
-- Improved directory structure handling across all architecture patterns
-- Better fallback handling when npm registry is unreachable
+- Always uses latest framework configurations from official CLIs
+- Better error messages and rollback handling
+- Cleaner codebase with removed legacy template files
+- All tests passing (48/48)
+
+**📊 Test Results:**
+
+- React + Vite: ✅ 16.5s (218 packages)
+- Next.js: ✅ 26.9s (347 packages)
+- Vue: ✅ 16.2s (153 packages)
+- Express: ✅ 12.3s (53 packages)
+
+---
+
+## Recent Updates
+
+### Version 1.2.2 (January 2026)
+
+**Critical Bug Fixes:**
+
+- ✅ **Fixed Tailwind CSS installation** - Resolved issue where styling was not installed if no other addons were selected
+- ✅ **Fixed package manager compatibility** - All 4 package managers (npm, yarn, pnpm, bun) now work correctly with Tailwind CSS
+- ✅ **Fixed Next.js duplicate configs** - Prevents duplicate Tailwind config files in Next.js projects
+- ✅ **Improved file creation** - Uses proper fs-extra methods for reliable config file generation
+
+**What's Fixed:**
+
+- `hasAddons()` function now properly checks for styling configuration
+- Changed from unreliable `npx tailwindcss init` to direct config file creation
+- All package managers tested and verified working
+- Next.js now uses built-in Tailwind setup (no duplicates)
+
+**Testing:**
+
+- ✅ 4/4 package managers passing tests (npm, yarn, pnpm, bun)
+- ✅ Verified across React+Vite, Next.js, and Vue.js
+- ✅ No duplicate configuration files
+
+[View Full Changelog](./docs/CHANGELOG.md)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "initkit",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "description": "A modern CLI tool for scaffolding production-ready web projects with live npm version fetching, multiple frameworks, and best practices built-in",
   "main": "src/index.js",
@@ -61,16 +61,17 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
+    "ejs": "^3.1.9",
+    "fs-extra": "^11.2.0",
+    "initkit": "^1.2.1",
     "inquirer": "^9.2.15",
     "ora": "^8.0.1",
-    "fs-extra": "^11.2.0",
-    "ejs": "^3.1.9",
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {
+    "@types/node": "^20.11.5",
     "eslint": "^8.56.0",
-    "prettier": "^3.2.4",
     "jest": "^29.7.0",
-    "@types/node": "^20.11.5"
+    "prettier": "^3.2.4"
   }
 }

package/src/commands/create.js

@@ -239,115 +239,4 @@ function getInstallCommand(packageManager) {
   return commands[packageManager] || 'npm install';
 }
 
-/** * Display comprehensive success summary after project creation (LEGACY - DEPRECATED)
- * This function is kept for backward compatibility but is no longer used
- * @deprecated Use displaySuccessMessage instead
- */
-function displaySuccessSummary(answers, projectPath, _verbose = false) {
-  console.log('');
-  console.log(chalk.green('╔════════════════════════════════════════════════════════════╗'));
-  console.log(
-    chalk.green('║') +
-      chalk.green.bold('              ✨ Project Created Successfully! ✨           ') +
-      chalk.green('║')
-  );
-  console.log(chalk.green('╚════════════════════════════════════════════════════════════╝'));
-  console.log('');
-
-  // Project info section
-  console.log(chalk.cyan.bold('  📦 Project Information'));
-  console.log(chalk.white(`     ${chalk.gray('Name:')}        ${chalk.bold(answers.projectName)}`));
-  console.log(chalk.white(`     ${chalk.gray('Type:')}        ${answers.projectType}`));
-  console.log(
-    chalk.white(`     ${chalk.gray('Language:')}    ${answers.language || 'JavaScript'}`)
-  );
-
-  if (answers.frontend) {
-    console.log(chalk.white(`     ${chalk.gray('Frontend:')}    ${answers.frontend}`));
-  }
-
-  if (answers.backend) {
-    console.log(chalk.white(`     ${chalk.gray('Backend:')}     ${answers.backend}`));
-  }
-
-  if (answers.database && answers.database !== 'none') {
-    console.log(chalk.white(`     ${chalk.gray('Database:')}    ${answers.database}`));
-  }
-  console.log('');
-
-  // Location section
-  console.log(chalk.cyan.bold('  📁 Project Location'));
-  console.log(chalk.white(`     ${projectPath}`));
-  console.log('');
-
-  // Features section
-  if (answers.features && answers.features.length > 0) {
-    console.log(chalk.cyan.bold('  ⚙️  Configured Features'));
-    answers.features.forEach((feature) => {
-      console.log(chalk.white(`     ${chalk.green('✓')} ${feature}`));
-    });
-    console.log('');
-  }
-
-  // Additional libraries
-  if (answers.additionalLibraries && answers.additionalLibraries.length > 0) {
-    console.log(chalk.cyan.bold('  📚 Additional Libraries'));
-    answers.additionalLibraries.slice(0, 5).forEach((lib) => {
-      console.log(chalk.white(`     ${chalk.green('✓')} ${lib}`));
-    });
-    if (answers.additionalLibraries.length > 5) {
-      console.log(chalk.gray(`     ... and ${answers.additionalLibraries.length - 5} more`));
-    }
-    console.log('');
-  }
-
-  // Package manager info
-  const packagesInstalled = answers.installDependencies !== false;
-  if (packagesInstalled) {
-    console.log(chalk.cyan.bold('  📦 Dependencies'));
-    console.log(chalk.white(`     ${chalk.green('✓')} Installed with ${answers.packageManager}`));
-    console.log('');
-  }
-
-  // Next steps
-  console.log(chalk.cyan.bold('  🚀 Next Steps'));
-  console.log('');
-  console.log(chalk.white(`     ${chalk.yellow('1.')} Navigate to your project:`));
-  console.log(chalk.gray(`        cd ${answers.projectName}`));
-  console.log('');
-
-  if (!packagesInstalled) {
-    console.log(chalk.white(`     ${chalk.yellow('2.')} Install dependencies:`));
-    console.log(chalk.gray(`        ${answers.packageManager} install`));
-    console.log('');
-  }
-
-  const stepNum = packagesInstalled ? 2 : 3;
-  console.log(chalk.white(`     ${chalk.yellow(stepNum + '.')} Start development server:`));
-  console.log(
-    chalk.gray(
-      `        ${answers.packageManager} ${answers.packageManager === 'npm' ? 'run ' : ''}dev`
-    )
-  );
-  console.log('');
-
-  console.log(
-    chalk.white(`     ${chalk.yellow(stepNum + 1 + '.')} Read the README for more info:`)
-  );
-  console.log(chalk.gray(`        cat README.md`));
-  console.log('');
-
-  // Documentation link
-  console.log(chalk.cyan.bold('  📚 Documentation'));
-  console.log(chalk.white(`     Check out the README.md in your project folder`));
-  console.log(chalk.white(`     for setup instructions and best practices.`));
-  console.log('');
-
-  // Footer
-  console.log(chalk.green('  ─────────────────────────────────────────────────────────────'));
-  console.log(chalk.green.bold('           🎉 Happy coding! Your project is ready! 🎉'));
-  console.log(chalk.green('  ─────────────────────────────────────────────────────────────'));
-  console.log('');
-}
-
 export { createProject };

package/src/prompts/questions.js

@@ -1,5 +1,4 @@
 import chalk from 'chalk';
-import validateNpmName from 'validate-npm-package-name';
 import {
   validateProjectName,
   checkDirectoryExists,

package/src/utils/addonInstaller.js

@@ -24,13 +24,19 @@ export async function installAddons(projectPath, config) {
     additionalLibraries = [],
   } = config;
 
+  // Styling (MUST be installed before UI libraries like shadcn)
+  if (styling && styling !== 'none' && styling !== 'css') {
+    console.log(chalk.cyan('\n🎨 Installing styling solution...'));
+    await installStyling(projectPath, styling, config);
+  }
+
   // State Management
   if (stateManagement && stateManagement !== 'none') {
     console.log(chalk.cyan('\n📦 Installing state management...'));
     await installStateManagement(projectPath, stateManagement, config);
   }
 
-  // UI Library
+  // UI Library (must come AFTER styling, especially for shadcn which needs Tailwind)
   if (uiLibrary && uiLibrary !== 'none') {
     console.log(chalk.cyan('\n🎨 Installing UI library...'));
     await installUILibrary(projectPath, uiLibrary, config);
@@ -104,20 +110,143 @@ async function installStateManagement(projectPath, library, config) {
   }
 }
 
+/**
+ * Install styling solution
+ */
+async function installStyling(projectPath, styling, config) {
+  const { packageManager, frontend } = config;
+  const installCmd = getInstallCommand(packageManager);
+
+  switch (styling) {
+    case 'tailwind': {
+      // Next.js already includes Tailwind CSS when --tailwind flag is used
+      if (frontend === 'nextjs') {
+        console.log(chalk.dim('  Tailwind CSS already configured by Next.js'));
+        return;
+      }
+
+      console.log(chalk.dim('  Installing Tailwind CSS...'));
+      await execCommand(`${installCmd} -D tailwindcss postcss autoprefixer`, {
+        cwd: projectPath,
+      });
+
+      // Create Tailwind config files directly (more reliable than running init command)
+      console.log(chalk.dim('  Initializing Tailwind configuration...'));
+      const fs = await import('fs-extra');
+      const path = await import('path');
+
+      // Create tailwind.config.js with proper content paths
+      const tailwindConfigPath = path.join(projectPath, 'tailwind.config.js');
+      const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`;
+      await fs.outputFile(tailwindConfigPath, tailwindConfig);
+
+      // Create postcss.config.js
+      const postcssConfigPath = path.join(projectPath, 'postcss.config.js');
+      const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+      await fs.outputFile(postcssConfigPath, postcssConfig);
+
+      // For Vite projects, update the main CSS file
+      if (frontend === 'react' || frontend === 'vue') {
+        // Create/update main CSS file with Tailwind directives
+        const cssPath = path.join(projectPath, 'src', 'index.css');
+        const tailwindDirectives = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+        await fs.outputFile(cssPath, tailwindDirectives);
+      }
+      break;
+    }
+
+    case 'scss':
+    case 'sass':
+      console.log(chalk.dim('  Installing Sass...'));
+      await execCommand(`${installCmd} -D sass`, { cwd: projectPath });
+      break;
+
+    case 'styled-components':
+      console.log(chalk.dim('  Installing Styled Components...'));
+      await execCommand(`${installCmd} styled-components`, { cwd: projectPath });
+      if (config.language === 'typescript') {
+        await execCommand(`${installCmd} -D @types/styled-components`, {
+          cwd: projectPath,
+        });
+      }
+      break;
+
+    case 'emotion':
+      console.log(chalk.dim('  Installing Emotion...'));
+      await execCommand(`${installCmd} @emotion/react @emotion/styled`, {
+        cwd: projectPath,
+      });
+      break;
+
+    case 'css-modules':
+      // CSS Modules are built into Vite and Next.js, no installation needed
+      console.log(chalk.dim('  CSS Modules are built-in, no installation needed'));
+      break;
+
+    default:
+      console.log(chalk.yellow(`  Unknown styling solution: ${styling}`));
+  }
+}
+
 /**
  * Install UI library (some have their own CLIs!)
  */
 async function installUILibrary(projectPath, library, config) {
-  const { packageManager, language } = config;
+  const { packageManager } = config;
   const installCmd = getInstallCommand(packageManager);
 
   switch (library) {
     case 'shadcn':
-    case 'shadcn-ui':
+    case 'shadcn-ui': {
       console.log(chalk.dim('  Running shadcn-ui init...'));
-      // shadcn has its own CLI!
-      await execCommand(`npx shadcn@latest init -y`, { cwd: projectPath });
+
+      // Ensure tsconfig has path aliases for shadcn
+      const fs = await import('fs-extra');
+      const path = await import('path');
+      const tsconfigPath = path.join(projectPath, 'tsconfig.json');
+
+      if (await fs.pathExists(tsconfigPath)) {
+        const tsconfig = await fs.readJson(tsconfigPath);
+        if (!tsconfig.compilerOptions) tsconfig.compilerOptions = {};
+        if (!tsconfig.compilerOptions.baseUrl) tsconfig.compilerOptions.baseUrl = '.';
+        if (!tsconfig.compilerOptions.paths) tsconfig.compilerOptions.paths = {};
+        tsconfig.compilerOptions.paths['@/*'] = ['./src/*'];
+        await fs.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+      }
+
+      // shadcn has its own CLI! Use package manager's binary runner
+      const { packageManager } = config;
+      const execCmd =
+        packageManager === 'npm'
+          ? 'npx'
+          : packageManager === 'yarn'
+            ? 'yarn dlx'
+            : packageManager === 'pnpm'
+              ? 'pnpm dlx'
+              : packageManager === 'bun'
+                ? 'bunx'
+                : 'npx';
+      await execCommand(`${execCmd} shadcn@latest init -y`, { cwd: projectPath });
       break;
+    }
 
     case 'mui':
     case 'material-ui':
@@ -175,10 +304,20 @@ async function installORM(projectPath, orm, database, config) {
       await execCommand(`${installCmd} -D prisma`, { cwd: projectPath });
       await execCommand(`${installCmd} @prisma/client`, { cwd: projectPath });
 
-      // Initialize Prisma with database
+      // Initialize Prisma with database using package manager's binary runner
       const datasource = getDatasourceForPrisma(database);
       console.log(chalk.dim(`  Initializing Prisma with ${datasource}...`));
-      await execCommand(`npx prisma init --datasource-provider ${datasource}`, {
+      const execCmd =
+        packageManager === 'npm'
+          ? 'npx'
+          : packageManager === 'yarn'
+            ? 'yarn'
+            : packageManager === 'pnpm'
+              ? 'pnpm exec'
+              : packageManager === 'bun'
+                ? 'bunx'
+                : 'npx';
+      await execCommand(`${execCmd} prisma init --datasource-provider ${datasource}`, {
         cwd: projectPath,
       });
       break;
@@ -295,11 +434,22 @@ async function installTesting(projectPath, testingLibs, config) {
         });
         break;
 
-      case 'playwright':
+      case 'playwright': {
         console.log(chalk.dim('  Installing Playwright...'));
-        // Playwright has its own init CLI!
-        await execCommand(`npm init playwright@latest`, { cwd: projectPath });
+        // Playwright has its own init CLI! Use package manager's create command
+        const initCmd =
+          packageManager === 'npm'
+            ? 'npm init'
+            : packageManager === 'yarn'
+              ? 'yarn create'
+              : packageManager === 'pnpm'
+                ? 'pnpm create'
+                : packageManager === 'bun'
+                  ? 'bun create'
+                  : 'npm init';
+        await execCommand(`${initCmd} playwright@latest`, { cwd: projectPath });
         break;
+      }
 
       case 'cypress':
         console.log(chalk.dim('  Installing Cypress...'));
@@ -392,6 +542,7 @@ function getDriverForTypeORM(database) {
  */
 export function hasAddons(config) {
   return !!(
+    (config.styling && config.styling !== 'none' && config.styling !== 'css') ||
     (config.stateManagement && config.stateManagement !== 'none') ||
     (config.uiLibrary && config.uiLibrary !== 'none') ||
     (config.orm && config.orm !== 'none') ||

package/src/utils/frameworkBootstrap.js

@@ -14,7 +14,7 @@ import chalk from 'chalk';
  * @returns {Promise<void>}
  */
 export async function bootstrapWithOfficialCLI(projectPath, config) {
-  const { projectType, frontend, backend } = config;
+  const { projectType, frontend: _frontend, backend: _backend } = config;
 
   switch (projectType) {
     case 'frontend':
@@ -239,7 +239,7 @@ export async function bootstrapSvelte(projectPath, config) {
  * @param {Object} config - Configuration object
  */
 export async function bootstrapExpress(projectPath, config) {
-  const { language, packageManager = 'npm' } = config;
+  const { language } = config;
   const projectName = path.basename(projectPath);
   const parentDir = path.dirname(projectPath);
 

package/src/utils/templateGenerator.js

@@ -109,7 +109,7 @@ async function createFeatureBasedStructure(srcPath, config) {
 /**
  * Create component-based folder structure
  */
-async function createComponentBasedStructure(srcPath, config) {
+async function createComponentBasedStructure(srcPath, _config) {
   await fs.ensureDir(path.join(srcPath, 'components', 'ui'));
   await fs.ensureDir(path.join(srcPath, 'components', 'layout'));
   await fs.ensureDir(path.join(srcPath, 'components', 'forms'));

package/src/utils/versionFetcher.js

@@ -6,7 +6,7 @@ import https from 'https';
  * @returns {Promise<string>} Latest version number
  */
 export async function getLatestVersion(packageName) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const url = `https://registry.npmjs.org/${packageName}/latest`;
 
     https
@@ -21,13 +21,13 @@ export async function getLatestVersion(packageName) {
           try {
             const json = JSON.parse(data);
             resolve(json.version || 'latest');
-          } catch (error) {
+          } catch (_error) {
             // If parsing fails, return 'latest' as fallback
             resolve('latest');
           }
         });
       })
-      .on('error', (error) => {
+      .on('error', () => {
         // On network error, return 'latest' as fallback
         console.warn(`Warning: Could not fetch version for ${packageName}, using 'latest'`);
         resolve('latest');