@nikkory/vibe-cli 2.3.0 → 2.3.2

package/README.md

@@ -1,193 +1,277 @@
 # @nikkory/vibe-cli
 
-Command-line interface for Nikkory Vibe code generator.
+**Production-ready code in seconds** - Generate enterprise-grade UI components, sections, and pages with the Nikkory Vibe CLI.
+
+[![npm version](https://img.shields.io/npm/v/@nikkory/vibe-cli.svg)](https://www.npmjs.com/package/@nikkory/vibe-cli)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **169+ Components** - Buttons, cards, inputs, modals, tables, forms, and more
+- **50+ Sections** - Hero sections, pricing tables, testimonials, feature showcases
+- **Full Pages** - Complete landing pages, dashboards, auth flows
+- **12 Design Systems** - Material Design, iOS HIG, Glassmorphism, Neumorphism, and more
+- **3 Quality Tiers** - From rapid prototypes to mission-critical production code
+- **Smart Generation** - Infinite variations with intelligent defaults
 
 ## Installation
 
 ```bash
-# Global installation
+# npm
+npm install -g @nikkory/vibe-cli
+
+# pnpm
 pnpm add -g @nikkory/vibe-cli
 
-# Local installation
-pnpm add -D @nikkory/vibe-cli
+# yarn
+yarn global add @nikkory/vibe-cli
 ```
 
 ## Quick Start
 
 ```bash
 # Initialize new project
-vibe init my-app
+nikkory-vibe init my-app
 
-# Generate component
-vibe generate component MyButton --design material-design
+# Add a component
+nikkory-vibe add button
+
+# Add a section
+nikkory-vibe add:section hero-centered
+
+# Add a full page
+nikkory-vibe add:page landing
 
 # List available options
-vibe list
+nikkory-vibe list
 ```
 
 ## Commands
 
-### `vibe init`
+### `nikkory-vibe add` (aliases: `gen`, `generate`)
 
-Initialize a new Nikkory Vibe project.
+Generate UI components instantly.
 
 ```bash
-vibe init my-app
-vibe init my-app --framework react --design material-design
-vibe init my-app --backend --no-install
+# Basic usage
+nikkory-vibe add button
+
+# Specify design system
+nikkory-vibe add button -s ios-hig
+
+# Choose quality tier
+nikkory-vibe add button -t enterprise
+
+# Custom output path
+nikkory-vibe add card -o src/components/Card.tsx
+
+# Advanced customization
+nikkory-vibe add button --factor-overrides '{"borderRadius":"rounded-full"}'
 ```
 
+**Arguments:**
+- `<component>` - Component type (button, input, card, modal, etc.)
+
 **Options:**
-- `-f, --framework <framework>` - Frontend framework (react, vue, angular, svelte, solid)
-- `-d, --design <system>` - Default design system
-- `--backend` - Include backend (NestJS)
-- `--no-install` - Skip dependency installation
+- `-s, --design-system <system>` - Design system (default: `material-design`)
+- `-t, --tier <tier>` - Quality tier: basic, standard, enterprise (default: `standard`)
+- `-f, --factor-overrides <json>` - Advanced customization (JSON)
+- `-o, --output <path>` - Output file path
 
-### `vibe generate` (alias: `g`)
+### `nikkory-vibe add:section` (alias: `section`)
 
-Generate components from templates.
+Generate complete sections with multiple components.
 
 ```bash
-# Basic usage
-vibe generate component MyButton
+# Generate hero section
+nikkory-vibe add:section hero-centered
 
-# Specify design system and tier
-vibe generate component ActionButton --design ios-hig --tier enterprise
+# Generate pricing section
+nikkory-vibe add:section pricing-cards -s material-design -t enterprise
 
-# Interactive mode
-vibe generate --interactive
+# Custom output
+nikkory-vibe add:section testimonials-grid -o src/sections/Testimonials.tsx
+```
 
-# Dry run (preview without writing)
-vibe generate component Card --dry-run
+**Arguments:**
+- `<section>` - Section type (hero-centered, pricing-cards, features-grid, etc.)
 
-# Custom output path
-vibe generate component LoginForm --output src/features/auth/LoginForm.tsx
+**Options:**
+- `-s, --design-system <system>` - Design system (default: `material-design`)
+- `-t, --tier <tier>` - Quality tier: basic, standard, enterprise (default: `standard`)
+- `-o, --output <path>` - Output file path
+
+### `nikkory-vibe add:page` (alias: `page`)
+
+Generate complete pages with multiple sections.
+
+```bash
+# Generate landing page
+nikkory-vibe add:page landing
+
+# Generate dashboard
+nikkory-vibe add:page dashboard -s ios-hig -t enterprise
+
+# Custom output
+nikkory-vibe add:page auth -o src/pages/AuthPage.tsx
 ```
 
 **Arguments:**
-- `[type]` - Type to generate (component, section, page) - default: component
+- `<page>` - Page type (landing, dashboard, auth, pricing, etc.)
 
 **Options:**
-- `-n, --name <name>` - Component name (PascalCase)
-- `-t, --template <template>` - Template type (button, card, input, etc.)
-- `-d, --design <system>` - Design system (default: material-design)
-- `--tier <tier>` - Quality tier (basic, standard, enterprise) - default: standard
-- `-f, --framework <framework>` - Framework (react, vue, etc.) - default: react
+- `-s, --design-system <system>` - Design system (default: `material-design`)
+- `-t, --tier <tier>` - Quality tier: basic, standard, enterprise (default: `standard`)
 - `-o, --output <path>` - Output file path
-- `--dry-run` - Preview generated code without writing
-- `--interactive` - Interactive mode with prompts
 
-### `vibe list` (alias: `ls`)
+### `nikkory-vibe list` (alias: `ls`)
 
-List available templates and design systems.
+Browse available templates and options.
 
 ```bash
 # List everything
-vibe list
+nikkory-vibe list
 
-# List specific category
-vibe list templates
-vibe list designs
-vibe list tiers
-vibe list frameworks
+# List by category
+nikkory-vibe list components
+nikkory-vibe list sections
+nikkory-vibe list design-systems
+nikkory-vibe list tiers
 
 # JSON output
-vibe list --json
+nikkory-vibe list --json
 ```
 
 **Arguments:**
-- `[category]` - Category to list (templates, designs, tiers, frameworks, all)
+- `[category]` - Category to list (components, sections, design-systems, tiers, all)
 
 **Options:**
 - `--json` - Output as JSON
 
-## Examples
+### `nikkory-vibe init`
 
-### Generate Material Design Button
+Initialize a new project.
 
 ```bash
-vibe g component SubmitButton \
-  --design material-design \
-  --tier standard \
-  --framework react
-```
+# Basic usage
+nikkory-vibe init my-app
 
-### Generate iOS-style Card (Enterprise)
+# With framework
+nikkory-vibe init my-app --framework react
 
-```bash
-vibe g component ProfileCard \
-  --design ios-hig \
-  --tier enterprise \
-  --output src/components/ProfileCard.tsx
+# Skip installation
+nikkory-vibe init my-app --no-install
 ```
 
-### Interactive Component Generation
+**Arguments:**
+- `[project-name]` - Project name (optional)
+
+**Options:**
+- `-f, --framework <framework>` - Frontend framework (react, vue, angular)
+- `-d, --design <system>` - Default design system
+- `--no-install` - Skip dependency installation
+
+## Design Systems
+
+| Design System    | ID               | Description                      |
+| ---------------- | ---------------- | -------------------------------- |
+| Material Design  | `material-design`| Google's design language         |
+| iOS HIG          | `ios-hig`        | Apple Human Interface Guidelines |
+| Glassmorphism    | `glassmorphism`  | Frosted glass effect             |
+| Neumorphism      | `neumorphism`    | Soft UI with shadows             |
+| Brutalism        | `brutalism`      | Bold, raw aesthetic              |
+| Minimalism       | `minimalism`     | Clean, simple design             |
+| Fluent           | `fluent`         | Microsoft Fluent Design          |
+| Carbon           | `carbon`         | IBM Carbon Design System         |
+| Ant Design       | `ant-design`     | Ant Design (Alibaba)             |
+| Chakra           | `chakra`         | Chakra UI style                  |
+| Atlassian        | `atlassian`      | Atlassian Design System          |
+| Blueprint        | `blueprint`      | Palantir Blueprint               |
+
+## Quality Tiers
+
+| Tier       | Purpose          | Code Lines | Best For                    |
+| ---------- | ---------------- | ---------- | --------------------------- |
+| Basic      | Prototype, MVP   | 30-50      | Quick prototypes, demos     |
+| Standard   | Production       | 50-150     | Most production apps        |
+| Enterprise | Mission-critical | 150-300    | Large-scale, high-traffic   |
+
+**What's included in each tier**:
+- **Basic**: Core functionality, basic styling
+- **Standard**: Multiple variants, responsive design, accessibility basics
+- **Enterprise**: Full accessibility (ARIA), analytics, performance optimization, comprehensive error handling
+
+## Examples
+
+### Quick Component Generation
 
 ```bash
-vibe g --interactive
-```
+# Material Design button (Standard tier)
+nikkory-vibe add button
+
+# iOS-style card (Enterprise tier)
+nikkory-vibe add card -s ios-hig -t enterprise
 
-This will prompt you for:
-- Component name
-- Template type
-- Design system
-- Quality tier
-- Framework
+# Glassmorphism modal
+nikkory-vibe add modal -s glassmorphism
+```
 
-### Preview Before Writing
+### Section Generation
 
 ```bash
-vibe g component Hero --design glassmorphism --dry-run
+# Hero section
+nikkory-vibe add:section hero-centered
+
+# Pricing table
+nikkory-vibe add:section pricing-cards -t enterprise
+
+# Testimonials grid
+nikkory-vibe add:section testimonials-grid -s minimalism
 ```
 
-### Initialize Full-Stack Project
+### Full Page Generation
 
 ```bash
-vibe init my-saas-app \
-  --framework react \
-  --design material-design \
-  --backend
+# Landing page with multiple sections
+nikkory-vibe add:page landing -s material-design -t standard
+
+# Dashboard with data tables
+nikkory-vibe add:page dashboard -s carbon -t enterprise
+
+# Auth flow
+nikkory-vibe add:page auth -s ios-hig
 ```
 
-## Available Options
+### Custom Output Paths
 
-### Templates
+```bash
+# Component to specific path
+nikkory-vibe add button -o src/components/ui/Button.tsx
 
-- `button` - Interactive button components
-- `card` - Content container cards
-- `input` - Form input fields
-- `modal` - Dialog/modal overlays
-- `table` - Data tables
-- `form` - Form layouts
-- `navigation` - Nav bars and menus
-- `hero` - Hero sections
-- `feature` - Feature showcases
-- `pricing` - Pricing tables
+# Section to features directory
+nikkory-vibe add:section hero-centered -o src/features/landing/Hero.tsx
 
-### Design Systems
+# Page to pages directory
+nikkory-vibe add:page landing -o src/pages/LandingPage.tsx
+```
 
-- `material-design` - Material Design 3
-- `ios-hig` - iOS Human Interface Guidelines
-- `glassmorphism` - Frosted glass effect
-- `neumorphism` - Soft UI design
-- `minimalism` - Clean and simple
-- `brutalism` - Bold and raw
-- `cyberpunk` - Futuristic neon
-- `retro` - Vintage aesthetics
+## CLI Shortcuts
 
-### Quality Tiers
+Use `vibe` as a shorter alias:
 
-- `basic` - Prototype/demo quality (~60 LOC)
-- `standard` - Production-ready (~200 LOC)
-- `enterprise` - Mission-critical (~350 LOC)
+```bash
+# These are equivalent
+nikkory-vibe add button
+vibe add button
 
-### Frameworks
+# Section shortcuts
+vibe add:section hero-centered
+vibe section hero-centered
 
-- `react` - React 18+ (.tsx)
-- `vue` - Vue 3+ (.vue)
-- `angular` - Angular 17+ (.component.ts)
-- `svelte` - Svelte 4+ (.svelte)
-- `solid` - Solid.js (.tsx)
+# Page shortcuts
+vibe add:page landing
+vibe page landing
+```
 
 ## Configuration
 
@@ -197,60 +281,91 @@ Create `.viberc.json` in your project root:
 {
   "defaultDesignSystem": "material-design",
   "defaultTier": "standard",
-  "defaultFramework": "react",
-  "outputDir": "src/components",
-  "fileExtension": "tsx"
+  "outputDir": "src/components"
 }
 ```
 
-## Environment Variables
-
-- `DEBUG=true` - Enable debug logging
-- `VIBE_OUTPUT_DIR` - Default output directory
+## Integration
 
-## Troubleshooting
-
-### Template Not Found
+### With React Projects
 
 ```bash
-vibe list templates  # Check available templates
-```
+# Install CLI
+pnpm add -D @nikkory/vibe-cli
 
-### Permission Denied
+# Add to package.json scripts
+{
+  "scripts": {
+    "vibe": "nikkory-vibe",
+    "vibe:add": "nikkory-vibe add",
+    "vibe:section": "nikkory-vibe add:section"
+  }
+}
 
-```bash
-# Run with appropriate permissions or change output directory
-vibe g component Button --output ./Button.tsx
+# Use in your project
+pnpm vibe add button -o src/components/Button.tsx
 ```
 
-### Import Errors
+### With VSCode
 
-Make sure your project has the required dependencies:
+Install the Nikkory Vibe VSCode extension for:
+- Command palette integration
+- Right-click context menu
+- Template preview
+- Syntax highlighting
 
+## What Gets Generated
+
+### Components
+- Full TypeScript React components
+- Complete type definitions
+- Variants and sizes
+- Responsive design
+- Accessibility attributes
+- Documentation comments
+
+### Sections
+- Multiple composed components
+- Consistent design system
+- Layout and spacing
+- Responsive breakpoints
+- SEO-friendly markup
+
+### Pages
+- Complete page structure
+- Multiple coordinated sections
+- Unified color scheme
+- Professional layouts
+- Production-ready code
+
+## Common Use Cases
+
+**Rapid Prototyping**: Use Basic tier for quick UI mockups
 ```bash
-pnpm add react react-dom
-pnpm add -D @types/react @types/react-dom
+vibe add button -t basic
+vibe add card -t basic
+vibe add:section hero-centered -t basic
 ```
 
-## CLI Output
-
-The CLI provides rich, colorful output:
+**Production Apps**: Use Standard tier for most features
+```bash
+vibe add button -t standard
+vibe add:section pricing-cards -t standard
+vibe add:page landing -t standard
+```
 
-- ✓ Green checkmarks for success
-- ✗ Red crosses for errors
-- ⚠ Yellow warnings
-- ℹ Blue info messages
-- Spinners for loading states
-- Boxed success messages
-- Formatted tables
+**Enterprise Projects**: Use Enterprise tier for critical features
+```bash
+vibe add button -t enterprise
+vibe add:section hero-centered -t enterprise
+vibe add:page dashboard -t enterprise
+```
 
-## Integration with VSCode
+## Support
 
-Install the Nikkory Vibe VSCode extension for:
-- Command palette integration
-- Right-click context menu
-- Template preview
-- Syntax highlighting
+- **Website**: https://nikkory.com
+- **Documentation**: https://nikkory.com/docs
+- **Issues**: [GitHub Issues](https://github.com/kemonra/nikkory-vibe/issues)
 
 ## License
 
@@ -258,4 +373,5 @@ MIT
 
 ---
 
-Powered by Nikkory
+**Powered by Nikkory**
+https://nikkory.com

package/dist/index.js

@@ -1584,7 +1584,7 @@ ${y.bold("             \u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D\u2588\u
 ${y.bold("              \u255A\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557              ")}
 ${y.bold("               \u255A\u2550\u2550\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D              ")}
 
-${y("                 happy together")} ${import_chalk5.default.white("\u2022 v2.3.0")}
+${y("                 happy together")} ${import_chalk5.default.white("\u2022 v2.3.2")}
 
 ${import_chalk5.default.gray("    Production-ready code in seconds")}
 ${import_chalk5.default.gray("           https://nikkory.com")}
@@ -1592,7 +1592,7 @@ ${import_chalk5.default.gray("           https://nikkory.com")}
 ${y(`  ${componentCount} Components`)} ${import_chalk5.default.gray("+")} ${y(`${sectionCount} Sections`)} ${import_chalk5.default.gray("\xD7")} ${y(`${designSystemCount} Systems`)} ${import_chalk5.default.gray("\xD7")} ${y(`${tierCount} Tiers`)}
 `;
 var program = new import_commander6.Command();
-program.name("nikkory-vibe").description("Nikkory Vibe - Production-ready code in seconds").version("2.3.0").addHelpText("before", banner);
+program.name("nikkory-vibe").description("Nikkory Vibe - Production-ready code in seconds").version("2.3.2").addHelpText("before", banner);
 program.addCommand(matrixGenerateCommand);
 program.addCommand(sectionGenerateCommand);
 program.addCommand(pageGenerateCommand);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikkory/vibe-cli",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "CLI tool for Nikkory Vibe - Generate production-ready code in seconds",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",