@nikkory/vibe-cli 2.3.0 → 2.3.1

package/README.md

@@ -1,193 +1,307 @@
 # @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, and more
+- **50 Sections** - Hero sections, pricing tables, testimonials, features
+- **12 Design Systems** - Material Design, iOS HIG, Glassmorphism, and more
+- **3 Quality Tiers** - Basic (prototype), Standard (production), Enterprise (mission-critical)
+- **Smart Generation** - 24-factor matrix system for infinite variations
+- **Section Orchestrator** - Slot-based composition with automatic component generation
+- **Page Builder** - Multi-section composition for complete pages
 
 ## 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
+
+# Add a component
+nikkory-vibe add button
 
-# Generate component
-vibe generate component MyButton --design material-design
+# Add a section
+nikkory-vibe add:section hero-centered
 
-# List available options
-vibe list
+# Add a full page
+nikkory-vibe add:page landing
+
+# List available templates
+nikkory-vibe list
 ```
 
 ## Commands
 
-### `vibe init`
+### `nikkory-vibe add` (aliases: `gen`, `generate`)
 
-Initialize a new Nikkory Vibe project.
+Generate UI components with the 24-factor Matrix system.
 
 ```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
+
+# With design system and tier
+nikkory-vibe add button -s ios-hig -t enterprise
+
+# With custom output path
+nikkory-vibe add card -o src/components/Card.tsx
+
+# With factor overrides (advanced)
+nikkory-vibe add button --factor-overrides '{"borderRadius":"rounded-full"}'
 ```
 
+**Arguments:**
+- `<component>` - Component ID (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>` - Override specific design factors (JSON)
+- `-o, --output <path>` - Output file path
+
+**Available Components (169 total)**:
+- **Forms**: button, input, textarea, checkbox, radio-group, switch, select, slider
+- **Feedback**: alert, badge, chip, progress, spinner, skeleton, tooltip
+- **Navigation**: tabs, menu, breadcrumb, pagination, stepper
+- **Data Display**: card, table, list, accordion, avatar
+- **Overlay**: modal, drawer, popover
+- **Date/Time**: date-picker, calendar
+- **Media**: audio, video, image, file
 
-### `vibe generate` (alias: `g`)
+### `nikkory-vibe add:section` (alias: `section`)
 
-Generate components from templates.
+Generate sections using the Section Orchestrator (composition-based).
 
 ```bash
 # Basic usage
-vibe generate component MyButton
+nikkory-vibe add:section hero-centered
+
+# With design system and tier
+nikkory-vibe add:section pricing-cards -s material-design -t enterprise
+
+# With custom output path
+nikkory-vibe add:section testimonials-grid -o src/sections/Testimonials.tsx
+```
 
-# Specify design system and tier
-vibe generate component ActionButton --design ios-hig --tier enterprise
+**Arguments:**
+- `<section>` - Section ID (hero-centered, pricing-cards, etc.)
 
-# Interactive mode
-vibe generate --interactive
+**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
 
-# Dry run (preview without writing)
-vibe generate component Card --dry-run
+**Available Sections (50 total)**:
+- **Hero** (10): hero-centered, hero-split, hero-video-background, hero-gradient
+- **Features** (8): features-grid, features-alternating, features-tabs
+- **Testimonials** (6): testimonials-grid, testimonials-carousel, testimonials-wall
+- **Pricing** (5): pricing-cards, pricing-table, pricing-toggle
+- **CTA** (4): cta-centered, cta-split, cta-banner, cta-newsletter
+- **FAQ** (3): faq-accordion, faq-two-column, faq-categorized
+- **Team** (3): team-grid, team-carousel, team-leadership
+- **Contact** (3): contact-form, contact-split, contact-info
+- **Gallery** (3): gallery-masonry, gallery-grid, gallery-slider
+- **Stats** (5): stats-numbers, stats-visual, stats-comparison
 
-# Custom output path
-vibe generate component LoginForm --output src/features/auth/LoginForm.tsx
+### `nikkory-vibe add:page` (alias: `page`)
+
+Generate full pages with multi-section composition.
+
+```bash
+# Basic usage
+nikkory-vibe add:page landing
+
+# With design system and tier
+nikkory-vibe add:page dashboard -s ios-hig -t enterprise
+
+# With custom output path
+nikkory-vibe add:page auth -o src/pages/AuthPage.tsx
 ```
 
 **Arguments:**
-- `[type]` - Type to generate (component, section, page) - default: component
+- `<page>` - Page ID (landing, dashboard, auth, 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`)
+**Page Types**:
+- **Marketing**: landing, pricing, about
+- **App**: dashboard, settings, profile
+- **Auth**: login, signup, forgot-password
+- **E-commerce**: product, cart, checkout
+
+### `nikkory-vibe list` (alias: `ls`)
 
-List available templates and design systems.
+List available templates, design systems, and tiers.
 
 ```bash
 # List everything
-vibe list
+nikkory-vibe list
 
 # List specific category
-vibe list templates
-vibe list designs
-vibe list tiers
-vibe list frameworks
+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 Nikkory Vibe project with AI Agent Inspector.
 
 ```bash
-vibe g component SubmitButton \
-  --design material-design \
-  --tier standard \
-  --framework react
+# Basic usage
+nikkory-vibe init my-app
+
+# With options
+nikkory-vibe init my-app --framework react --design material-design
 ```
 
-### Generate iOS-style Card (Enterprise)
+**Arguments:**
+- `[project-name]` - Project name (optional)
 
-```bash
-vibe g component ProfileCard \
-  --design ios-hig \
-  --tier enterprise \
-  --output src/components/ProfileCard.tsx
-```
+**Options:**
+- `-f, --framework <framework>` - Frontend framework (react, vue, angular)
+- `-d, --design <system>` - Default design system
+- `--no-install` - Skip dependency installation
+
+## Design Systems (12 available)
+
+| 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          | Features                                    | LOC     |
+| ---------- | ---------------- | ------------------------------------------- | ------- |
+| Basic      | Prototype, MVP   | Core props, basic styling                   | 30-50   |
+| Standard   | Production apps  | Multiple variants, sizes, forwardRef        | 50-150  |
+| Enterprise | Mission-critical | Analytics, memoization, accessibility, ARIA | 150-300 |
+
+## Examples
 
-### Interactive Component Generation
+### Generate a Material Design Button (Standard Tier)
 
 ```bash
-vibe g --interactive
+nikkory-vibe add button -s material-design -t standard
 ```
 
-This will prompt you for:
-- Component name
-- Template type
-- Design system
-- Quality tier
-- Framework
+**Output**:
+- Full React component with forwardRef, displayName
+- Multiple variants (filled, outlined, text)
+- Sizes (sm, md, lg)
+- TypeScript types
+- ~150 lines of code
 
-### Preview Before Writing
+### Generate a Hero Section (Enterprise Tier)
 
 ```bash
-vibe g component Hero --design glassmorphism --dry-run
+nikkory-vibe add:section hero-centered -s ios-hig -t enterprise
 ```
 
-### Initialize Full-Stack Project
+**Output**:
+- Composed section with multiple components (heading, text, buttons, image)
+- Analytics tracking
+- ARIA attributes
+- Memoized components
+- ~400+ lines of code
+
+### Generate a Complete Landing Page
 
 ```bash
-vibe init my-saas-app \
-  --framework react \
-  --design material-design \
-  --backend
+nikkory-vibe add:page landing -s glassmorphism -t enterprise -o src/pages/Landing.tsx
 ```
 
-## Available Options
-
-### Templates
-
-- `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
+**Output**:
+- Multi-section composition (hero + features + pricing + testimonials + CTA)
+- Consistent design system across all sections
+- All components automatically generated
+- ~1000+ lines of production-ready code
 
-### Design Systems
+### Generate with Custom Factors
 
-- `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
+```bash
+nikkory-vibe add button --factor-overrides '{
+  "borderRadius": "rounded-full",
+  "shadowIntensity": "high",
+  "animation": "enabled"
+}'
+```
 
-### Quality Tiers
+## Architecture
 
-- `basic` - Prototype/demo quality (~60 LOC)
-- `standard` - Production-ready (~200 LOC)
-- `enterprise` - Mission-critical (~350 LOC)
+### 3-Level Generation System
 
-### Frameworks
+```
+Page (7 factors)
+  ↓ Factor Propagation
+Section (13 factors)
+  ↓ Factor Propagation
+Component (24 factors)
+```
 
-- `react` - React 18+ (.tsx)
-- `vue` - Vue 3+ (.vue)
-- `angular` - Angular 17+ (.component.ts)
-- `svelte` - Svelte 4+ (.svelte)
-- `solid` - Solid.js (.tsx)
+**Component Level**: 24-factor matrix system
+- Typography (4): font family, size, weight, line height
+- Colors (3): primary, background, border
+- Spacing (3): padding, margin, gap
+- Effects (3): shadow, border radius, animation
+- Layout (2): alignment, direction
+- Interaction (3): hover, focus, active states
+- Accessibility (2): ARIA, keyboard navigation
+- Performance (2): lazy loading, memoization
+- Analytics (2): tracking, events
+
+**Section Level**: Slot-based composition
+- Section factors (13) + inherited component factors (24)
+- Automatic component generation for each slot
+- CSS variable merging
+- Layout wrapper generation
+
+**Page Level**: Multi-section composition
+- Page factors (7) + propagated section/component factors
+- Parallel section generation
+- Unified design system
+- Complete page structure
 
 ## Configuration
 
@@ -197,54 +311,56 @@ Create `.viberc.json` in your project root:
 {
   "defaultDesignSystem": "material-design",
   "defaultTier": "standard",
-  "defaultFramework": "react",
-  "outputDir": "src/components",
-  "fileExtension": "tsx"
+  "outputDir": "src/components"
 }
 ```
 
-## Environment Variables
+## Statistics
 
-- `DEBUG=true` - Enable debug logging
-- `VIBE_OUTPUT_DIR` - Default output directory
+- **169 Components** × 12 Design Systems × 3 Tiers = **6,084 variations**
+- **50 Sections** × 12 Design Systems × 3 Tiers = **1,800 variations**
+- **∞ Pages** (multi-section composition with infinite possibilities)
 
-## Troubleshooting
+## CLI Shortcuts
 
-### Template Not Found
+You can use `vibe` as a shorter alias for `nikkory-vibe`:
 
 ```bash
-vibe list templates  # Check available templates
-```
+# These are equivalent
+nikkory-vibe add button
+vibe add button
 
-### Permission Denied
+# Section generation
+vibe add:section hero-centered
+vibe section hero-centered
 
-```bash
-# Run with appropriate permissions or change output directory
-vibe g component Button --output ./Button.tsx
+# Page generation
+vibe add:page landing
+vibe page landing
 ```
 
-### Import Errors
+## Integration
 
-Make sure your project has the required dependencies:
+### With React Projects
 
 ```bash
-pnpm add react react-dom
-pnpm add -D @types/react @types/react-dom
-```
-
-## CLI Output
+# Install CLI
+pnpm add -D @nikkory/vibe-cli
 
-The CLI provides rich, colorful output:
+# Add to package.json scripts
+{
+  "scripts": {
+    "vibe": "nikkory-vibe",
+    "vibe:add": "nikkory-vibe add",
+    "vibe:section": "nikkory-vibe add:section"
+  }
+}
 
-- ✓ Green checkmarks for success
-- ✗ Red crosses for errors
-- ⚠ Yellow warnings
-- ℹ Blue info messages
-- Spinners for loading states
-- Boxed success messages
-- Formatted tables
+# Use in your project
+pnpm vibe add button -o src/components/Button.tsx
+```
 
-## Integration with VSCode
+### With VSCode
 
 Install the Nikkory Vibe VSCode extension for:
 - Command palette integration
@@ -252,10 +368,17 @@ Install the Nikkory Vibe VSCode extension for:
 - Template preview
 - Syntax highlighting
 
+## Support
+
+- **Website**: https://nikkory.com
+- **Issues**: [GitHub Issues](https://github.com/kemonra/nikkory-vibe/issues)
+- **Documentation**: [Full Docs](https://nikkory.com/docs)
+
 ## License
 
 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.1")}
 
 ${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.1").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.1",
   "description": "CLI tool for Nikkory Vibe - Generate production-ready code in seconds",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",