create-ng-tailwind 2.0.2 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,126 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.0] - 2025-11-30
+
+### 💥 Breaking Changes
+
+- **Angular CLI Alignment**: Now fully relies on Angular CLI for project configuration
+  - Removed custom `ensureZoneJs()` method - Angular CLI handles zone.js natively
+  - Explicitly passes `--zoneless=false` or `--zoneless=true` to Angular CLI in non-interactive mode
+  - Projects now match exactly what `ng new` produces interactively
+
+### 🐛 Bug Fixes
+
+- **zone.js Configuration**: Fixed issue where zone.js was not being properly configured when selecting "No" for zoneless application
+  - Fixes runtime error `NG0908: In this configuration Angular requires Zone.js`
+
+## [2.2.0] - 2025-11-01
+
+### ✨ New Features - Comprehensive Tailwind v4 Theming System
+
+- **Complete Theme System using Tailwind v4 @theme directive**:
+  - Added comprehensive color theming with 7 semantic color scales (primary, secondary, accent, success, danger, warning, info)
+  - Each color includes full 50-950 scale for maximum flexibility
+  - All colors defined using modern `@theme` directive in `styles.css`
+  - Automatic utility class generation (bg-*, text-*, border-*, ring-*, etc.)
+
+- **Theme Customization**:
+  - Easy customization by editing CSS custom properties in `styles.css`
+  - Clear documentation and usage examples in theme configuration
+  - All components automatically update when theme colors change
+  - No JavaScript configuration needed - pure CSS approach
+
+- **Updated All Components to Use Theme Colors**:
+  - ButtonComponent: Uses primary, secondary, and danger theme colors
+  - ToastComponent: Uses success, danger, warning, and info colors
+  - LoadingSpinnerComponent: Supports all theme color variants
+  - Contact page: Gradient backgrounds using primary, secondary, and accent
+  - Header component: Navigation and active states use primary theme
+  - Home & About pages: Hero sections and feature cards use theme colors
+  - Auth pages: Login, Register, Forgot Password use primary theme
+  - Footer: Links use primary theme colors
+
+- **Developer Experience**:
+  - Comprehensive inline documentation in `styles.css`
+  - Usage examples for all theme colors
+  - Clear instructions for customization
+  - Consistent color usage across all generated components
+
+### 🎨 Design Improvements
+
+- Replaced all hardcoded blue, cyan, red, green colors with semantic theme colors
+- Updated gradients to use primary-secondary-accent combinations
+- Error states now use danger theme color instead of hardcoded red
+- Success states use success theme color instead of hardcoded green
+- Info messages use info theme color
+- Warning states use warning theme color
+
+## [2.1.1] - 2025-10-30
+
+### 🐛 Fixed
+
+- **SSR Hydration Error in Contact Form**: Fixed NG0500 hydration mismatch in contact component textarea
+  - Removed whitespace between textarea opening and closing tags
+  - Prevents "Angular expected a text node but the node was not found" error
+  - Ensures proper SSR hydration when Server-Side Rendering is enabled
+
+- **AI Config Prettier Formatting**: All AI configuration templates (CLAUDE.md, .cursorrules, .windsurfrules) now pass Prettier formatting checks automatically
+  - Added empty lines before code blocks for proper markdown formatting
+  - Added parentheses around arrow function parameters (arrowParens: "always")
+  - Reordered Tailwind CSS classes according to prettier-plugin-tailwindcss
+  - Added trailing commas in objects and arrays per Prettier config
+  - Fixed HTML example indentation and structure
+  - Renamed Claude file to CLAUDE.md (uppercase) to match Angular CLI convention
+  - Scaffolded projects now pass `npm run format:check` without manual fixes
+
+## [2.1.0] - 2025-10-28
+
+### ✨ New Features - Simple SEO Solution
+
+- **Simple SEO Service** (Easy to use, easy to extend):
+  - ✅ Dynamic meta tags (title, description, keywords)
+  - ✅ Open Graph tags for social sharing (Facebook, LinkedIn)
+  - ✅ Twitter Card tags for optimized sharing
+  - ✅ Canonical URL management (auto-updated on route changes)
+  - ✅ Structured data (JSON-LD) support
+  - 🎯 **Only 2 methods**: `updateMeta()` and `addStructuredData()` - that's it!
+  - 📝 Well-documented with clear examples
+  - 🔧 Developers can easily extend with more features as needed
+
+- **Essential Structured Data**:
+  - ✅ Organization schema (company info, logo, social profiles)
+  - ✅ WebSite schema (site name, description)
+  - 💡 Comment in code shows how to add more schemas (Article, Product, FAQ, etc.)
+  - 🎯 Keep it simple - only what's actually being used
+
+- **SEO Assets**:
+  - `robots.txt` - Properly configured for Angular apps with sitemap reference
+  - Default Open Graph image (1200x630px SVG placeholder)
+  - Complete favicon set (SVG with project initial)
+  - Apple Touch Icon for iOS devices
+  - Android Chrome icons (192x192 and 512x512)
+  - Logo SVG with project branding
+  - All placeholders include clear instructions for replacement
+
+- **Pre-Integrated & Ready to Use**:
+  - ✅ All page components (Home, About, Contact) have SEO meta tags configured
+  - ✅ App component includes Organization and WebSite structured data
+  - ✅ SEO service auto-updates canonical URLs on navigation
+  - ✅ Works seamlessly with existing i18n system
+  - ✅ SSR-compatible for server-side rendering
+  - ✅ TypeScript interfaces for type safety
+  - ✅ Well-documented with JSDoc comments and usage examples
+
+### 🧹 Maintenance
+
+- **Package Cleanup**: Removed CLAUDE.md from published package (internal development file)
+
+### 🐛 Fixed
+
+- **LICENSE Link**: Fixed LICENSE link in README to work properly on npmjs.com (changed from relative link to descriptive text)
+- **Directory Overwrite Flow**: Ensured consistent behavior between local and npx usage. Directory existence check now always happens AFTER configuration questions in both cases.
+
 ## [2.0.2] - 2025-10-24
 
 ### 📝 Documentation

package/README.md

@@ -7,9 +7,7 @@
 [![Node.js Version](https://img.shields.io/node/v/create-ng-tailwind.svg)](https://nodejs.org/)
 [![Downloads](https://img.shields.io/npm/dm/create-ng-tailwind.svg)](https://www.npmjs.com/package/create-ng-tailwind)
 
-**🚀 Create Angular projects with Tailwind CSS in seconds**
-
-_Zero configuration • Modern setup • Beautiful starter templates_
+**🚀 A CLI tool to give starter template for angular project with tailwind css**
 
 </div>
 
@@ -19,219 +17,99 @@ _Zero configuration • Modern setup • Beautiful starter templates_
 
 - 🎯 **Angular 20+** - Latest version with standalone components and signals
 - 🎨 **Tailwind CSS v4** - Utility-first CSS framework preconfigured
+- 🚀 **SEO Optimized** - Meta tags, Open Graph, Twitter Cards, structured data, robots.txt
 - 🌍 **i18n Translation** - English & Arabic with RTL support
 - 🎮 **Interactive UI** - Toast notifications, Modal dialogs, and components
 - 🏗️ **Zero Configuration** - Everything set up and ready to go
-- 💨 **Fast Setup** - Get started in seconds, not minutes
 
 ## Quick Start
 
 ### Using npx (Recommended)
 
+Run the following command and follow the prompts:
+
 ```bash
 npx create-ng-tailwind my-awesome-app
-cd my-awesome-app
-ng serve
 ```
 
 ### Using npm
 
+Install globally and use:
+
 ```bash
 npm install -g create-ng-tailwind
 create-ng-tailwind my-awesome-app
-cd my-awesome-app
-ng serve
-```
-
-## Usage
-
-```bash
-create-ng-tailwind [project-name] [options]
 ```
 
-### Options
-
-| Option                      | Description                                 | Default                            |
-| --------------------------- | ------------------------------------------- | ---------------------------------- |
-| `-t, --template <template>` | Template to use (minimal, starter)          | **Prompted** (mandatory selection) |
-| `--routing`                 | Enable Angular routing                      | true (routing enabled by default)  |
-| `--no-routing`              | Disable Angular routing                     | false                              |
-| `--ssr`                     | Enable Server-Side Rendering                | **Prompted** (default: false)      |
-| `--zoneless`                | Create zoneless application without zone.js | **Prompted** (default: false)      |
-| `--ai-config <tools>`       | AI tools to configure                       | **Prompted** (default: none)       |
-| `--skip-install`            | Skip npm install                            | false                              |
-| `-h, --help`                | Display help for command                    | -                                  |
-| `-V, --version`             | Display version number                      | -                                  |
-
-#### Template Options:
-
-- `minimal` - Just Angular + Tailwind (minimal setup with basic example)
-- `starter` - Professional foundation with essential components, routing, services, and best practices
-
-**Note:** If you don't provide the `--template` flag, you will be prompted to choose a template during setup.
-
-#### AI Tools Options:
-
-When you select AI tools during setup, Angular CLI will automatically create configuration folders and files:
-
-- `none` (default) - No AI tools configured
-- `claude` - Configure Claude integration
-- `cursor` - Configure Cursor integration
-- `gemini` - Configure Gemini integration
-- `copilot` - Configure GitHub Copilot integration
-- `jetbrains` - Configure JetBrains AI Assistant
-- `windsurf` - Configure Windsurf integration
+### What happens next?
 
-**Note:** You can select multiple AI tools (checkbox selection). Each selected tool will have its configuration folder created by Angular CLI (`ng new --ai-config`). Our CLI focuses on Tailwind CSS setup and template application.
+The CLI will guide you through:
+1. Choosing a template (Minimal or Starter)
+2. Configuring Server-Side Rendering (optional)
+3. Setting up zoneless application (optional)
+4. Selecting AI tools integration (optional)
 
-### Examples
-
-#### Default Interactive Mode (Like `ng new`)
-
-```bash
-# Run the CLI - it will prompt you for all options
-npx create-ng-tailwind my-app
-
-# You'll be asked:
-# ✔ What is your project name? (my-angular-app)
-# ✔ Which template would you like to use?
-#   ❯ Minimal     - Just Angular + Tailwind (minimal setup)
-#     Starter     - Professional foundation with essential components
-# ✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
-# ✔ Do you want to create a 'zoneless' application without zone.js? (y/N)
-# ✔ Which AI tools do you want to configure? (Press <space> to select, <a> to toggle all)
-#   ❯◉ None
-#    ◯ Claude
-#    ◯ Cursor
-#    ◯ Gemini
-#    ◯ GitHub Copilot
-#    ◯ JetBrains AI
-#    ◯ Windsurf
-```
-
-#### Quick Start with CLI Flags (Skip Prompts)
+After setup completes:
 
 ```bash
-# Skip all prompts by providing all options via CLI flags
-npx create-ng-tailwind my-app --template=starter
-
-# With more options
-npx create-ng-tailwind my-app --template=starter --ssr --zoneless --ai-config=cursor
-
-# Or use short flag for template
-npx create-ng-tailwind my-app -t starter
+cd my-awesome-app
+npm install
+ng serve
 ```
 
-#### Other Options
+Your app will be running at `http://localhost:4200` 🎉
 
-```bash
-# Skip npm install (for CI/CD or manual installation later)
-npx create-ng-tailwind my-app --template=starter --skip-install
-
-# Disable routing
-npx create-ng-tailwind my-app --template=starter --no-routing
-
-# Combine multiple flags
-npx create-ng-tailwind my-app --template=starter --ssr --zoneless --skip-install
-```
-
-## What's Included
-
-### 📦 Dependencies
-
-- **Angular 20** - Latest Angular framework
-- **Tailwind CSS** - Utility-first CSS framework
-- **@tailwindcss/postcss** - Modern PostCSS plugin for Tailwind
-- **PostCSS** - CSS processing tool
-
-### 🎨 Preconfigured Setup
-
-- Modern PostCSS configuration (`.postcssrc.json`)
-- Tailwind CSS import in styles file
-- Example components with Tailwind classes
-- Responsive design examples
-- Zero configuration required
-
-### 🎯 CSS-Only Approach (Tailwind v4 Official)
-
-**We use CSS exclusively for Tailwind v4 compatibility:**
-
-- **✅ Official Tailwind v4 Approach** - Tailwind v4 no longer supports preprocessors (SCSS/Sass/Less)
-- **🚀 Simpler Build Process** - No preprocessor compilation needed
-- **⚡ Faster Builds** - Direct PostCSS processing with LightningCSS
-- **🎨 Modern CSS Features** - CSS nesting, variables, and modern features built-in
-- **🛠️ Full Tailwind Support** - All Tailwind directives work seamlessly
-- **📦 Smaller Bundle Size** - No preprocessor runtime needed
-- **🔧 Zero Configuration** - Works out of the box with Angular CLI
-
-**Note:** Tailwind CSS v4 uses LightningCSS internally and does not support SCSS, Sass, or Less preprocessors. Modern CSS provides nesting and other features previously requiring preprocessors.
-
-### 🏗️ Project Structure (Starter Template)
+## 🏗️ Project Structure
 
 ```
 my-app/
 ├── src/
 │   ├── app/
 │   │   ├── core/                  # Core services and interceptors
-│   │   │   ├── services/          # Auth, API, Toast, Modal, etc.
+│   │   │   ├── services/          # Auth, API, SEO, Toast, Modal, etc.
 │   │   │   ├── interceptors/      # HTTP interceptors
-│   │   │   ├── guards/           # Route guards
-│   │   │   └── i18n/             # Translation service
-│   │   ├── shared/               # Shared components and utilities
-│   │   │   ├── components/       # Button, Card, Toast, Modal
-│   │   │   ├── pipes/           # Truncate, TimeAgo
-│   │   │   ├── directives/      # ClickOutside, Tooltip
-│   │   │   └── models/          # TypeScript interfaces
-│   │   ├── features/            # Feature modules
-│   │   │   ├── home/            # Home page
-│   │   │   ├── about/           # About page
-│   │   │   ├── contact/         # Contact page
-│   │   │   └── auth/            # Authentication pages
-│   │   ├── layout/              # Layout components
-│   │   │   ├── header/          # Navigation header
-│   │   │   └── footer/          # Footer component
-│   │   ├── app.config.ts        # App configuration
-│   │   ├── app.routes.ts        # Routing configuration
-│   │   └── app.ts               # Main app component
-│   ├── styles.css               # Tailwind CSS imports
-│   └── main.ts                  # Bootstrap
+│   │   │   ├── guards/            # Route guards
+│   │   │   ├── i18n/              # Translation service
+│   │   │   └── utils/             # Structured data utilities
+│   │   ├── shared/                # Shared components and utilities
+│   │   │   ├── components/        # Button, Card, Toast, Modal
+│   │   │   ├── pipes/             # Truncate, TimeAgo
+│   │   │   ├── directives/        # ClickOutside, Tooltip
+│   │   │   └── models/            # TypeScript interfaces
+│   │   ├── features/              # Feature modules
+│   │   │   ├── home/              # Home page
+│   │   │   ├── about/             # About page
+│   │   │   ├── contact/           # Contact page
+│   │   │   └── auth/              # Authentication pages
+│   │   ├── layout/                # Layout components
+│   │   │   ├── header/            # Navigation header
+│   │   │   └── footer/            # Footer component
+│   │   ├── app.config.ts          # App configuration
+│   │   ├── app.routes.ts          # Routing configuration
+│   │   └── app.ts                 # Main app component
+│   ├── styles.css                 # Tailwind CSS imports
+│   └── main.ts                    # Bootstrap
 ├── public/
-│   └── assets/
-│       └── i18n/                # Translation files (en.json, ar.json)
-├── .postcssrc.json              # PostCSS configuration
+│   ├── assets/
+│   │   ├── i18n/                  # Translation files (en.json, ar.json)
+│   │   └── images/                # OG images, logos
+│   ├── robots.txt                 # SEO robots file
+│   ├── favicon.svg                # Favicon
+│   └── android-chrome-*.svg       # PWA icons
+├── .postcssrc.json                # PostCSS configuration
 ├── package.json
 └── ...
 ```
 
-## 🚀 Interactive Mode
-
-By default, the CLI works like `ng new` with interactive prompts:
-
-```bash
-npx create-ng-tailwind my-app
-
-? Which template would you like to use? › Starter
-? Enable Server-Side Rendering (SSR)? › No
-? Create zoneless application? › No
-? Configure AI tools? › None
-
-✅ Project created successfully!
-```
-
-**Fast Mode**: Skip prompts by providing flags:
-
-```bash
-npx create-ng-tailwind my-app --template=starter
-```
-
 ## 🎯 Starter Template Features
 
-The **Starter Template** includes 20+ production-ready features:
+The **Starter Template** includes 25+ production-ready features:
 
 ### Core Services
 
 - **AuthService** - Authentication & user management
 - **ApiService** - Centralized HTTP request handling
+- **SeoService** - Comprehensive SEO management (meta tags, Open Graph, Twitter Cards, structured data)
 - **ToastService** - Notification system (success, error, warning, info)
 - **ModalService** - Dialog system with confirm & alert
 - **LoadingService** - Global loading state with signals
@@ -239,6 +117,16 @@ The **Starter Template** includes 20+ production-ready features:
 - **StorageService** - LocalStorage wrapper with type safety
 - **i18nService** - Internationalization management
 
+### SEO Optimization (Simple & Ready to Use)
+
+- **SEO Service** - Just 2 methods: `updateMeta()` and `addStructuredData()`
+- **Meta Tags** - Title, description, keywords (auto-configured on all pages)
+- **Social Sharing** - Open Graph & Twitter Cards (pre-configured)
+- **Structured Data** - Organization & WebSite schemas (included)
+- **Canonical URLs** - Auto-updated on route changes
+- **Assets** - robots.txt, favicon set, OG image placeholder
+- **Extensible** - Easy to add more schemas as needed
+
 ### UI Components
 
 - **ButtonComponent** - Variants: primary, secondary, danger
@@ -249,7 +137,7 @@ The **Starter Template** includes 20+ production-ready features:
 
 ### Utilities
 
-- **Pipes** - Truncate, TimeAgo, FileSize, SafeHtml
+- **Pipes** - Truncate, TimeAgo
 - **Directives** - ClickOutside, Tooltip
 - **HTTP Interceptors** - Auth, Error handling, Loading, Caching
 - **TypeScript Path Aliases** - Clean imports with `@core/*`, `@shared/*`, `@features/*`
@@ -260,9 +148,63 @@ The **Starter Template** includes 20+ production-ready features:
 - **Language Switcher** - Built-in header component
 - **Translation Files** - JSON-based translation system
 
+### Additional Features
+
+- **Routing** - Pre-configured with lazy loading
+- **Authentication Pages** - Login, Register, Forgot Password
+- **Example Pages** - Home, About, Contact with reactive forms
+- **PWA Support** - Service worker configuration
+- **Linting & Formatting** - ESLint + Prettier + Husky pre-commit hooks (all files pass formatting checks out of the box)
+- **Modern Stack** - Tailwind v4, TypeScript, Signals
+
+## 🎨 Tailwind CSS v4
+
+This tool uses **Tailwind CSS v4** with the official PostCSS approach:
+
+- ✅ **Modern PostCSS Plugin** - `@tailwindcss/postcss`
+- ⚡ **LightningCSS** - Fast CSS processing
+- 🎨 **Modern CSS Features** - Nesting, variables, and more built-in
+- 🚀 **Simplified Build** - No preprocessors needed
+
+**Note:** Tailwind v4 does not support SCSS, Sass, or Less. Modern CSS provides all the features you need!
+
+### 🎨 Comprehensive Theming System
+
+The starter template includes a **powerful Tailwind v4 theming system** using the `@theme` directive:
+
+**Theme Colors:**
+- `primary` - Main brand color (with full 50-950 scale)
+- `secondary` - Secondary brand color (with full 50-950 scale)
+- `accent` - Accent/highlight color (with full 50-950 scale)
+- `success` - Success states (green)
+- `danger` - Error/danger states (red)
+- `warning` - Warning states (yellow/orange)
+- `info` - Informational states (blue)
+
+**Customization:**
+Simply edit `src/styles.css` and change the color values in the `@theme` block. All components automatically update!
+
+```css
+@theme {
+  --color-primary-500: #3b82f6;  /* Change this to your brand color */
+  --color-secondary-500: #06b6d4;
+  --color-accent-500: #a855f7;
+  /* ... complete color scales included */
+}
+```
+
+**Usage in templates:**
+```html
+<div class="bg-primary-600 text-white">Primary button</div>
+<div class="bg-secondary-500">Secondary element</div>
+<p class="text-danger-600">Error message</p>
+```
+
+All UI components, pages, and layouts use these theme colors, making it easy to rebrand your entire application by changing a few color values!
+
 ## 📄 License
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+MIT License - see the LICENSE file included in the package.
 
 ## 🙏 Support & Community
 
@@ -278,8 +220,4 @@ If you find this tool helpful, please consider:
 
 [![NPM](https://nodei.co/npm/create-ng-tailwind.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/create-ng-tailwind)
 
-**🚀 Happy coding with Angular and Tailwind CSS!**
-
-_Built with ❤️ by developers, for developers_
-
 </div>

package/lib/managers/ProjectManager.js

@@ -1,9 +1,8 @@
-const fs = require("fs-extra");
-const path = require("path");
-const execa = require("execa");
-const TailwindManager = require("./TailwindManager");
-const TemplateManager = require("./TemplateManager");
-const { createAIConfigs } = require("../utils/ai-config");
+const fs = require('fs-extra');
+const execa = require('execa');
+const TailwindManager = require('./TailwindManager');
+const TemplateManager = require('./TemplateManager');
+const { createAIConfigs } = require('../utils/ai-config');
 
 class ProjectManager {
   constructor(config, logger) {
@@ -14,19 +13,19 @@ class ProjectManager {
   }
 
   async create() {
-    // Check if directory exists
+    // Check if directory exists (after all configuration questions)
     if (await fs.pathExists(this.config.fullPath)) {
       const { overwrite } = await this.logger.prompt([
         {
-          type: "confirm",
-          name: "overwrite",
-          message: `Directory ${this.config.projectName} already exists. Overwrite?`,
+          type: 'confirm',
+          name: 'overwrite',
+          message: `Directory ${this.config.projectName} already exists. Do you want to overwrite it?`,
           default: false,
         },
       ]);
 
       if (!overwrite) {
-        this.logger.warn("Operation cancelled");
+        this.logger.warn('Operation cancelled');
         process.exit(0);
       }
 
@@ -43,37 +42,30 @@ class ProjectManager {
     await this.templateManager.apply();
 
     // Create AI configuration files (CLAUDE.md + tool-specific)
-    await createAIConfigs(
-      this.config.fullPath,
-      this.config.projectName,
-      this.config.aiConfig,
-    );
+    await createAIConfigs(this.config.fullPath, this.config.projectName, this.config.aiConfig);
   }
 
   async createAngularProject() {
-    const spinner = this.logger.spinner("Creating Angular project...");
+    const spinner = this.logger.spinner('Creating Angular project...');
 
     try {
       // Build ng new command with user's choices
       const routing = this.config.routing !== false;
       const ssr = this.config.ssr || false;
       const zoneless = this.config.zoneless || false;
-      const aiConfig = this.config.aiConfig || ["none"];
+      const aiConfig = this.config.aiConfig || ['none'];
 
       let cmd = `npx @angular/cli@latest new ${this.config.projectName}`;
       cmd += ` --routing=${routing}`;
       cmd += ` --style=css`; // Always use CSS (Tailwind v4 official approach)
       cmd += ` --ssr=${ssr}`;
-
-      if (zoneless) {
-        cmd += ` --zoneless`;
-      }
+      cmd += ` --zoneless=${zoneless}`;
 
       // Add AI config - Angular CLI supports multiple --ai-config flags
-      if (aiConfig.length > 0 && !aiConfig.includes("none")) {
+      if (aiConfig.length > 0 && !aiConfig.includes('none')) {
         // Add each AI tool as a separate --ai-config flag
         aiConfig.forEach((tool) => {
-          if (tool !== "none") {
+          if (tool !== 'none') {
             cmd += ` --ai-config=${tool}`;
           }
         });
@@ -83,12 +75,12 @@ class ProjectManager {
 
       await execa.command(cmd, {
         cwd: process.cwd(),
-        stdio: "pipe",
+        stdio: 'pipe',
       });
 
-      spinner.succeed("Angular project created");
+      spinner.succeed('Angular project created');
     } catch (error) {
-      spinner.fail("Failed to create Angular project");
+      spinner.fail('Failed to create Angular project');
       throw error;
     }
   }

package/lib/templates/starter/advanced-features.js

@@ -284,12 +284,11 @@ export class ToastService {
 
 async function createToastComponent(config) {
   const toastComponent = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ToastService, Toast } from '@core/services/toast.service';
 
 @Component({
   selector: 'app-toast',
-  imports: [CommonModule],
+  imports: [],
   template: \`
     <!-- Toast Container -->
     <div class="fixed top-4 right-4 z-50 space-y-2 max-w-sm w-full">
@@ -302,22 +301,22 @@ import { ToastService, Toast } from '@core/services/toast.service';
           <div class="shrink-0">
             @switch (toast.type) {
               @case ('success') {
-                <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-success-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                 </svg>
               }
               @case ('error') {
-                <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-danger-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                 </svg>
               }
               @case ('warning') {
-                <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                 </svg>
               }
               @case ('info') {
-                <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
               }
@@ -364,10 +363,10 @@ export class ToastComponent {
   getToastClasses(toast: Toast): string {
     const baseClasses = 'border-l-4';
     const typeClasses = {
-      success: 'bg-green-50 border-green-500',
-      error: 'bg-red-50 border-red-500',
-      warning: 'bg-yellow-50 border-yellow-500',
-      info: 'bg-blue-50 border-blue-500'
+      success: 'bg-success-50 border-success-500',
+      error: 'bg-danger-50 border-danger-500',
+      warning: 'bg-warning-50 border-warning-500',
+      info: 'bg-info-50 border-info-500'
     };
 
     return \`\${baseClasses} \${typeClasses[toast.type]}\`;