create-zen 1.7.1 → 1.8.0

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm publish:*)"
+    ]
+  }
+}

package/README.md

@@ -1,193 +1,193 @@
-<div align="center">
-
-[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&weight=700&size=25&duration=4000&pause=500&color=05F7C3&center=true&vCenter=true&width=700&lines=Zen+Starter;Stop+worrying+about+setup,+just+code)](https://git.io/typing-svg)
-
-</div>
-
-A premium Vite starter kit for rapid web development, designed to streamline your development process. It comes pre-configured with essential tools like TypeScript, Vite, SCSS, and modern UI components.
-
-<p align="center">
-  <img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite"/>
-  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
-  <img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white" alt="Sass"/>
-  <img src="https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white" alt="PostCSS"/>
-  <img src="https://img.shields.io/badge/Handlebars.js-f0772b?style=for-the-badge&logo=handlebars.js&logoColor=white" alt="Handlebars"/>
-  <img src="https://img.shields.io/badge/Lenis-000000?style=for-the-badge&logo=lenis&logoColor=white" alt="Lenis"/>
-</p>
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## ✨ Features
-
-- **🚀 Vite**: Next-generation frontend tooling for a blazing fast development experience
-- **🛡️ TypeScript**: Strong typing for more robust and maintainable code
-- **🎨 SCSS**: CSS with superpowers, enabling variables, nesting, and mixins
-- **🔧 ESLint & Prettier**: Code quality and formatting tools
-- **⚡ PostCSS**: Advanced CSS processing with plugins
-- **📝 Handlebars**: Templating engine for clean HTML organization
-- **🌀 Lenis**: Buttery smooth scrolling experience
-- **🎭 Ready-to-use Components**: Tabs, Modals, Accordions, Theme Switcher
-- **📱 Responsive Design**: Mobile-first approach with modern breakpoints
-- **🌙 Dark/Light Theme**: Built-in theme switching with persistence
-- **📦 Modern Build**: Optimized for production with tree-shaking
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-- [Node.js](https://nodejs.org/) (version 18.x or higher)
-- [npm](https://www.npmjs.com/)
-
-### Installation
-
-You can create a new project using `npm create`:
-```bash
-npm create zen@latest
-```
-
-**Why `@latest`?** This ensures you always get the most recent version of the ZEN starter kit. Without it, npm might use a cached or outdated version.
-
-The tool will interactively prompt you to:
-1. **Enter your project name** (with a default fallback)
-2. **Choose between two versions**:
-   - **Standard Version**: Full-featured with all components
-   - **Lite Version**: Lightweight for static sites
-
-This makes it easy to get started without remembering command line arguments and gives you flexibility to choose the right version for your needs.
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## 🛠️ Available Scripts
-
-- `npm run dev` - Starts the development server
-- `npm run host` - Starts the development server, accessible on your local network
-- `npm run build` - Builds the project for production
-- `npm run preview` - Serves the production build locally for preview
-- `npm run lint` - Lints the TypeScript files in the project
-- `npm run lint:fix` - Lints and automatically fixes problems in TypeScript files
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## 📁 Project Structure
-
-```
-zen-starter/
-├── components/                    # Reusable HTML partials
-│   ├── accordion.html            # Accordion component template
-│   ├── footer.html               # Footer component template
-│   ├── header.html               # Header component template
-│   ├── modal.html                # Modal component template
-│   └── tabs.html                 # Tabs component template
-├── pages/                        # Project pages
-│   ├── 404.html                  # 404 error page
-│   └── index.html                # Main application page
-├── public/                       # Static assets
-│   ├── fonts/                    # Font files
-│   └── images/                   # Image assets
-├── src/
-│   ├── scripts/                  # TypeScript source code
-│   │   ├── components/           # UI component classes
-│   │   │   ├── Accordion.ts      # Accordion component logic
-│   │   │   ├── BackTopButton.ts  # Back to top button
-│   │   │   ├── Header.ts         # Header component logic
-│   │   │   ├── Tabs.ts           # Tabs component logic
-│   │   │   ├── Theme.ts          # Theme switcher
-│   │   │   └── index.ts          # Component exports
-│   │   ├── services/             # Service layer
-│   │   │   ├── api.ts            # API utilities
-│   │   │   ├── scroll.ts         # Smooth scroll service
-│   │   │   ├── storage.ts        # Local storage wrapper
-│   │   │   └── index.ts          # Service exports
-│   │   ├── types/                # TypeScript type definitions
-│   │   │   └── global.d.ts       # Global type definitions
-│   │   ├── utils/                # Utility functions
-│   │   │   └── modal.ts          # Modal utilities
-│   │   └── main.ts               # Main entry point
-│   └── styles/                   # SCSS stylesheets
-│       ├── core/                 # Core styles
-│       │   ├── components/       # Component styles
-│       │   │   ├── back-top-button.scss
-│       │   │   ├── footer.scss
-│       │   │   ├── header.scss
-│       │   │   ├── modal.scss
-│       │   │   └── index.scss
-│       │   ├── helpers/          # SCSS helpers
-│       │   │   ├── functions.scss
-│       │   │   ├── media.scss
-│       │   │   ├── mixins.scss
-│       │   │   └── index.scss
-│       │   ├── fonts.scss        # Font definitions
-│       │   ├── globals.scss      # Global styles
-│       │   ├── reset.scss        # CSS reset
-│       │   ├── typography.scss   # Typography styles
-│       │   ├── utils.scss        # Utility classes
-│       │   ├── variables.scss    # SCSS variables
-│       │   └── index.scss        # Core styles index
-│       └── main.scss             # Main stylesheet
-├── .eslintrc.js                  # ESLint configuration
-├── .prettierrc                   # Prettier configuration
-├── index.html                    # Landing page
-├── package.json                  # Project dependencies
-├── postcss.config.js             # PostCSS configuration
-├── tsconfig.json                 # TypeScript configuration
-└── vite.config.js                # Vite configuration
-```
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## 🎯 Key Components
-
-### UI Components
-- **Accordion**: Collapsible content sections with smooth animations
-- **Tabs**: Tabbed interface with keyboard navigation
-- **Modal**: Lightweight modal system with backdrop
-- **Header**: Responsive navigation with mobile menu
-- **BackTopButton**: Smooth scroll-to-top functionality
-- **ThemeToggle**: Dark/light theme switcher
-
-### Services
-- **Scroll**: Lenis-powered smooth scrolling
-- **Storage**: Type-safe local storage wrapper
-- **API**: HTTP request utilities
-
-### Utilities
-- **Modal Management**: Easy modal initialization and control
-- **Type Definitions**: Comprehensive TypeScript types
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## 🎨 Styling
-
-The project uses a well-organized SCSS structure:
-
-- **Variables**: Centralized design tokens
-- **Mixins**: Reusable style patterns
-- **Functions**: SCSS utility functions
-- **Media Queries**: Responsive breakpoint helpers
-- **Component Styles**: Modular component styling
-- **Utility Classes**: Helper classes for common patterns
-
-<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
-
-## 🔧 Configuration
-
-### Vite Configuration
-- Multi-page application support
-- SCSS preprocessing with modern compiler API
-- PostCSS integration with autoprefixer
-- Handlebars templating support
-- Optimized build output
-
-### TypeScript Configuration
-- Strict type checking
-- Modern ES modules
-- Path mapping for clean imports
-
-### Code Quality
-- ESLint with TypeScript support
-- Prettier for consistent formatting
-- Pre-commit hooks ready
-
+<div align="center">
+
+[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&weight=700&size=25&duration=4000&pause=500&color=05F7C3&center=true&vCenter=true&width=700&lines=Zen+Starter;Stop+worrying+about+setup,+just+code)](https://git.io/typing-svg)
+
+</div>
+
+A premium Vite starter kit for rapid web development, designed to streamline your development process. It comes pre-configured with essential tools like TypeScript, Vite, SCSS, and modern UI components.
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite"/>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
+  <img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white" alt="Sass"/>
+  <img src="https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white" alt="PostCSS"/>
+  <img src="https://img.shields.io/badge/Handlebars.js-f0772b?style=for-the-badge&logo=handlebars.js&logoColor=white" alt="Handlebars"/>
+  <img src="https://img.shields.io/badge/Lenis-000000?style=for-the-badge&logo=lenis&logoColor=white" alt="Lenis"/>
+</p>
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## ✨ Features
+
+- **🚀 Vite**: Next-generation frontend tooling for a blazing fast development experience
+- **🛡️ TypeScript**: Strong typing for more robust and maintainable code
+- **🎨 SCSS**: CSS with superpowers, enabling variables, nesting, and mixins
+- **🔧 ESLint & Prettier**: Code quality and formatting tools
+- **⚡ PostCSS**: Advanced CSS processing with plugins
+- **📝 Handlebars**: Templating engine for clean HTML organization
+- **🌀 Lenis**: Buttery smooth scrolling experience
+- **🎭 Ready-to-use Components**: Tabs, Modals, Accordions, Theme Switcher
+- **📱 Responsive Design**: Mobile-first approach with modern breakpoints
+- **🌙 Dark/Light Theme**: Built-in theme switching with persistence
+- **📦 Modern Build**: Optimized for production with tree-shaking
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (version 18.x or higher)
+- [npm](https://www.npmjs.com/)
+
+### Installation
+
+You can create a new project using `npm create`:
+```bash
+npm create zen@latest -- --yes
+```
+
+**Why `@latest`?** This ensures you always get the most recent version of the ZEN starter kit. Without it, npm might use a cached or outdated version.
+
+**Why `--yes`?** This skips the initial "install create-zen" confirmation and starts the setup immediately.
+
+The tool will interactively prompt you to:
+1. **Enter your project name** (with a default fallback)
+2. **Choose a starter variant**:
+   - **Standard**: BEM + SCSS + TypeScript (`zen-starter`)
+   - **Express**: Tailwind CSS + Alpine.js (`zen-express`)
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## 🛠️ Available Scripts
+
+- `npm run dev` - Starts the development server
+- `npm run host` - Starts the development server, accessible on your local network
+- `npm run build` - Builds the project for production
+- `npm run preview` - Serves the production build locally for preview
+- `npm run lint` - Lints the TypeScript files in the project
+- `npm run lint:fix` - Lints and automatically fixes problems in TypeScript files
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## 📁 Project Structure
+
+```
+zen-starter/
+├── components/                    # Reusable HTML partials
+│   ├── accordion.html            # Accordion component template
+│   ├── footer.html               # Footer component template
+│   ├── header.html               # Header component template
+│   ├── modal.html                # Modal component template
+│   └── tabs.html                 # Tabs component template
+├── pages/                        # Project pages
+│   ├── 404.html                  # 404 error page
+│   └── index.html                # Main application page
+├── public/                       # Static assets
+│   ├── fonts/                    # Font files
+│   └── images/                   # Image assets
+├── src/
+│   ├── scripts/                  # TypeScript source code
+│   │   ├── components/           # UI component classes
+│   │   │   ├── Accordion.ts      # Accordion component logic
+│   │   │   ├── BackTopButton.ts  # Back to top button
+│   │   │   ├── Header.ts         # Header component logic
+│   │   │   ├── Tabs.ts           # Tabs component logic
+│   │   │   ├── Theme.ts          # Theme switcher
+│   │   │   └── index.ts          # Component exports
+│   │   ├── services/             # Service layer
+│   │   │   ├── api.ts            # API utilities
+│   │   │   ├── scroll.ts         # Smooth scroll service
+│   │   │   ├── storage.ts        # Local storage wrapper
+│   │   │   └── index.ts          # Service exports
+│   │   ├── types/                # TypeScript type definitions
+│   │   │   └── global.d.ts       # Global type definitions
+│   │   ├── utils/                # Utility functions
+│   │   │   └── modal.ts          # Modal utilities
+│   │   └── main.ts               # Main entry point
+│   └── styles/                   # SCSS stylesheets
+│       ├── core/                 # Core styles
+│       │   ├── components/       # Component styles
+│       │   │   ├── back-top-button.scss
+│       │   │   ├── footer.scss
+│       │   │   ├── header.scss
+│       │   │   ├── modal.scss
+│       │   │   └── index.scss
+│       │   ├── helpers/          # SCSS helpers
+│       │   │   ├── functions.scss
+│       │   │   ├── media.scss
+│       │   │   ├── mixins.scss
+│       │   │   └── index.scss
+│       │   ├── fonts.scss        # Font definitions
+│       │   ├── globals.scss      # Global styles
+│       │   ├── reset.scss        # CSS reset
+│       │   ├── typography.scss   # Typography styles
+│       │   ├── utils.scss        # Utility classes
+│       │   ├── variables.scss    # SCSS variables
+│       │   └── index.scss        # Core styles index
+│       └── main.scss             # Main stylesheet
+├── .eslintrc.js                  # ESLint configuration
+├── .prettierrc                   # Prettier configuration
+├── index.html                    # Landing page
+├── package.json                  # Project dependencies
+├── postcss.config.js             # PostCSS configuration
+├── tsconfig.json                 # TypeScript configuration
+└── vite.config.js                # Vite configuration
+```
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## 🎯 Key Components
+
+### UI Components
+- **Accordion**: Collapsible content sections with smooth animations
+- **Tabs**: Tabbed interface with keyboard navigation
+- **Modal**: Lightweight modal system with backdrop
+- **Header**: Responsive navigation with mobile menu
+- **BackTopButton**: Smooth scroll-to-top functionality
+- **ThemeToggle**: Dark/light theme switcher
+
+### Services
+- **Scroll**: Lenis-powered smooth scrolling
+- **Storage**: Type-safe local storage wrapper
+- **API**: HTTP request utilities
+
+### Utilities
+- **Modal Management**: Easy modal initialization and control
+- **Type Definitions**: Comprehensive TypeScript types
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## 🎨 Styling
+
+The project uses a well-organized SCSS structure:
+
+- **Variables**: Centralized design tokens
+- **Mixins**: Reusable style patterns
+- **Functions**: SCSS utility functions
+- **Media Queries**: Responsive breakpoint helpers
+- **Component Styles**: Modular component styling
+- **Utility Classes**: Helper classes for common patterns
+
+<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
+
+## 🔧 Configuration
+
+### Vite Configuration
+- Multi-page application support
+- SCSS preprocessing with modern compiler API
+- PostCSS integration with autoprefixer
+- Handlebars templating support
+- Optimized build output
+
+### TypeScript Configuration
+- Strict type checking
+- Modern ES modules
+- Path mapping for clean imports
+
+### Code Quality
+- ESLint with TypeScript support
+- Prettier for consistent formatting
+- Pre-commit hooks ready
+
 <img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />

package/index.js

@@ -1,110 +1,177 @@
-#!/usr/bin/env node
-
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import prompts from 'prompts';
-import chalk from 'chalk';
-import ora from 'ora';
-
-// Color palette inspired by the ZEN website
-const colors = {
-  green: '#00D4AA',      // Less acidic, more blue-green
-  lightGreen: '#00B894', // Darker blue-green
-  purple: '#8B5CF6',     // Purple accent
-  darkPurple: '#7C3AED', // Darker purple
-  lightPurple: '#A78BFA', // Light purple
-  white: '#FFFFFF',      // Pure white
-  lightGrey: '#9CA3AF',  // Light grey
-  darkGrey: '#374151',   // Dark grey
-  bgDark: '#1F2937'      // Background dark
-};
-
-// Enhanced text styling with chalk
-const zen = (text) => chalk.hex(colors.green).bold(text);
-const accent = (text) => chalk.hex(colors.purple).bold(text);
-const title = (text) => chalk.hex(colors.white).bold(text);
-const subtitle = (text) => chalk.hex(colors.lightGrey)(text);
-const highlight = (text) => chalk.hex(colors.lightGreen)(text);
-const error = (text) => chalk.red.bold(text);
-const success = (text) => chalk.green.bold(text);
-const info = (text) => chalk.blue(text);
-
-// Display minimalistic header
-const displayHeader = () => {
-  console.clear();
-  console.log();
-  console.log(`  ${zen('ZEN')} - ${title('The Professional Web Development Starter')}`);
-  console.log();
-};
-
-// Get project name with enhanced styling
-const getProjectName = async () => {
-  const { projectName } = await prompts({
-    type: 'text',
-    name: 'projectName',
-    message: 'Project name:',
-    initial: 'zen-starter-app',
-    validate: (value) => {
-      if (!value.trim()) return 'Project name is required';
-      if (fs.existsSync(value.trim())) return 'Directory already exists';
-      return true;
-    }
-  });
-  
-  return projectName;
-};
-
-// Get repository URL
-const getRepositoryUrl = () => 'https://github.com/dmitry-conquer/zen-starter.git';
-
-// Main function with enhanced UX
-const main = async () => {
-  try {
-    displayHeader();
-    
-    const PROJECT_NAME = await getProjectName();
-    const REPO_URL = getRepositoryUrl();
-    
-    // Cloning with spinner
-    const spinner = ora({
-      text: `${chalk.hex(colors.green)('◇')} ${title('Preparing your ZEN project...')}`,
-      color: 'green'
-    }).start();
-    
-    try {
-      execSync(`git clone --depth=1 "${REPO_URL}" "${PROJECT_NAME}"`, { stdio: 'pipe' });
-      spinner.stop();
-    } catch (err) {
-      spinner.fail(`${error('Setup failed!')}`);
-      console.log(`  ${subtitle('Please check your internet connection, permissions, and try again.')}`);
-      process.exit(1);
-    }
-    
-    // Remove .git
-    fs.rmSync(path.join(PROJECT_NAME, '.git'), { recursive: true, force: true });
-    
-    // Success message
-    console.log();
-    console.log(`  ${chalk.hex(colors.darkPurple)('✅ SUCCESS! Your project is ready to go!')} ${chalk.hex(colors.lightPurple)('🎉')}`);
-    console.log();
-    
-    // Next steps
-    console.log(`  ${chalk.hex(colors.green)('◇')} ${title('Next steps')}`);
-    console.log(`    ${chalk.hex(colors.purple)('📁')} ${highlight(`cd ${PROJECT_NAME}`)}`);
-    console.log(`    ${chalk.hex(colors.purple)('📦')} ${highlight('npm install')}`);
-    console.log(`    ${chalk.hex(colors.purple)('🧑‍💻')} ${highlight('npm run dev')}`);
-    console.log();
-    
-    // Final message
-    console.log(`  ${zen('Happy coding with ZEN!')} ${chalk.hex(colors.lightPurple)('✨')}`);
-    console.log();
-    
-  } catch (err) {
-    console.log(`  ${error('❌ An error occurred:')} ${err.message}`);
-    process.exit(1);
-  }
-};
-
-// Run the main function
-main();
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+
+const c = {
+  teal:       (t) => chalk.hex('#2DD4BF').bold(t),
+  tealDim:    (t) => chalk.hex('#2DD4BF')(t),
+  violet:     (t) => chalk.hex('#A78BFA').bold(t),
+  violetDim:  (t) => chalk.hex('#A78BFA')(t),
+  amber:      (t) => chalk.hex('#FCD34D').bold(t),
+  amberDim:   (t) => chalk.hex('#FCD34D')(t),
+  white:      (t) => chalk.hex('#F9FAFB').bold(t),
+  muted:      (t) => chalk.hex('#6B7280')(t),
+  dim:        (t) => chalk.hex('#374151')(t),
+  green:      (t) => chalk.hex('#34D399')(t),
+  red:        (t) => chalk.hex('#F87171')(t),
+};
+
+const line = () => c.dim('  ' + '─'.repeat(44));
+
+const displayHeader = () => {
+  console.clear();
+  console.log();
+  console.log(`  ${c.teal('ZEN')}  ${c.muted('·')}  ${c.white('Web Development Starters')}`);
+  console.log(line());
+  console.log();
+};
+
+const getProjectName = async () => {
+  const { projectName } = await prompts({
+    type: 'text',
+    name: 'projectName',
+    message: c.white('Project name'),
+    initial: 'my-project',
+    validate: (value) => {
+      if (!value.trim()) return 'Project name is required';
+      if (fs.existsSync(value.trim())) return `"${value.trim()}" already exists`;
+      return true;
+    }
+  });
+
+  if (!projectName) process.exit(0);
+  return projectName;
+};
+
+const getStarterVariant = async () => {
+  console.log();
+  const { variant } = await prompts({
+    type: 'select',
+    name: 'variant',
+    message: c.white('Choose a starter'),
+    choices: [
+      {
+        title: `${c.teal('Express')}   ${c.muted('Tailwind CSS + Alpine.js')}`,
+        description: 'Fast, utility-first setup for modern projects',
+        value: 'express'
+      },
+      {
+        title: `${c.violet('AI')}        ${c.muted('Tailwind CSS + Alpine.js + Claude Code')}`,
+        description: 'AI-powered automatic site builder using Claude Code',
+        value: 'ai'
+      },
+      {
+        title: `${c.muted('Standard')}  ${c.muted('BEM + SCSS + TypeScript')}`,
+        description: 'Classic setup · not actively maintained',
+        value: 'standard'
+      }
+    ],
+    initial: 0,
+    hint: ' '
+  });
+
+  if (!variant) process.exit(0);
+  console.log();
+  return variant;
+};
+
+const getRepositoryUrl = (variant) => {
+  const repos = {
+    express:  'https://github.com/dmitry-conquer/zen-express.git',
+    ai:       'https://github.com/dmitry-conquer/zen-ai.git',
+    standard: 'https://github.com/dmitry-conquer/zen-starter.git',
+  };
+  return repos[variant];
+};
+
+const getNextSteps = (variant, name) => {
+  const steps = [
+    { cmd: `cd ${name}`,    label: 'enter project' },
+    { cmd: 'npm install',   label: 'install deps'  },
+  ];
+
+  if (variant === 'ai') {
+    steps.push({ cmd: 'claude',       label: 'open claude code' });
+    steps.push({ cmd: 'npm run dev',  label: 'start dev server' });
+  } else {
+    steps.push({ cmd: 'npm run dev',  label: 'start dev server' });
+  }
+
+  return steps;
+};
+
+const main = async () => {
+  try {
+    displayHeader();
+
+    const PROJECT_NAME = await getProjectName();
+    const variant = await getStarterVariant();
+    const REPO_URL = getRepositoryUrl(variant);
+
+    const spinner = ora({
+      text: `  ${c.muted('Cloning repository...')}`,
+      spinner: 'dots',
+      color: 'cyan'
+    }).start();
+
+    try {
+      execSync(`git clone --depth=1 "${REPO_URL}" "${PROJECT_NAME}"`, { stdio: 'pipe' });
+      spinner.stop();
+    } catch (err) {
+      spinner.stop();
+      console.log();
+      console.log(`  ${c.red('✗')} ${c.white('Clone failed.')}  ${c.muted('Check your connection and try again.')}`);
+      console.log();
+      process.exit(1);
+    }
+
+    fs.rmSync(path.join(PROJECT_NAME, '.git'), { recursive: true, force: true });
+
+    // Success
+    console.log(`  ${c.green('✓')} ${c.white('Project ready')}  ${c.tealDim(PROJECT_NAME)}`);
+    console.log();
+    console.log(line());
+    console.log();
+
+    // Next steps
+    const steps = getNextSteps(variant, PROJECT_NAME);
+    console.log(`  ${c.muted('Next steps')}`);
+    console.log();
+    steps.forEach(({ cmd, label }, i) => {
+      const num = c.dim(`${i + 1}.`);
+      console.log(`  ${num}  ${c.tealDim(cmd)}  ${c.muted(label)}`);
+    });
+
+    if (variant === 'ai') {
+      console.log();
+      console.log(`  ${c.muted('─'.repeat(44))}`);
+      console.log(`  ${c.violetDim('tip')}  ${c.muted('Open Claude Code and let the AI build your site')}`);
+      console.log(`       ${c.muted('automatically from your project description.')}`);
+    }
+
+    if (variant === 'standard') {
+      console.log();
+      console.log(`  ${c.muted('note')}  ${c.muted('Standard starter is not actively maintained.')}`);
+      console.log(`         ${c.muted('Consider using Express for new projects.')}`);
+    }
+
+    console.log();
+    console.log(line());
+    console.log();
+    console.log(`  ${c.teal('ZEN')}  ${c.muted('Happy building.')}`);
+    console.log();
+
+  } catch (err) {
+    console.log();
+    console.log(`  ${c.red('✗')} ${err.message}`);
+    console.log();
+    process.exit(1);
+  }
+};
+
+main();

package/package.json

@@ -1,15 +1,15 @@
-{
-  "name": "create-zen",
-  "version": "1.7.1",
-  "type": "module",
-  "description": "✨ Create a new web development project with modern setup powered by Vite 🚀",
-  "bin": {
-    "create-zen": "index.js"
-  },
-  "dependencies": {
-    "fs-extra": "^11.1.1",
-    "prompts": "^2.4.2",
-    "chalk": "^5.3.0",
-    "ora": "^7.0.1"
-  }
-}
+{
+  "name": "create-zen",
+  "version": "1.8.0",
+  "type": "module",
+  "description": "✨ Create a new web development project with modern setup powered by Vite 🚀",
+  "bin": {
+    "create-zen": "index.js"
+  },
+  "dependencies": {
+    "fs-extra": "^11.1.1",
+    "prompts": "^2.4.2",
+    "chalk": "^5.3.0",
+    "ora": "^7.0.1"
+  }
+}