@nikkory/vibe-cli 2.3.1 → 2.3.2

package/README.md

@@ -7,13 +7,12 @@
 
 ## 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
+- **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
 
@@ -43,7 +42,7 @@ nikkory-vibe add:section hero-centered
 # Add a full page
 nikkory-vibe add:page landing
 
-# List available templates
+# List available options
 nikkory-vibe list
 ```
 
@@ -51,113 +50,89 @@ nikkory-vibe list
 
 ### `nikkory-vibe add` (aliases: `gen`, `generate`)
 
-Generate UI components with the 24-factor Matrix system.
+Generate UI components instantly.
 
 ```bash
 # Basic usage
 nikkory-vibe add button
 
-# With design system and tier
-nikkory-vibe add button -s ios-hig -t enterprise
+# Specify design system
+nikkory-vibe add button -s ios-hig
 
-# With custom output path
+# Choose quality tier
+nikkory-vibe add button -t enterprise
+
+# Custom output path
 nikkory-vibe add card -o src/components/Card.tsx
 
-# With factor overrides (advanced)
+# Advanced customization
 nikkory-vibe add button --factor-overrides '{"borderRadius":"rounded-full"}'
 ```
 
 **Arguments:**
-- `<component>` - Component ID (button, input, card, modal, etc.)
+- `<component>` - Component type (button, input, card, modal, etc.)
 
 **Options:**
 - `-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)
+- `-f, --factor-overrides <json>` - Advanced customization (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
-
 ### `nikkory-vibe add:section` (alias: `section`)
 
-Generate sections using the Section Orchestrator (composition-based).
+Generate complete sections with multiple components.
 
 ```bash
-# Basic usage
+# Generate hero section
 nikkory-vibe add:section hero-centered
 
-# With design system and tier
+# Generate pricing section
 nikkory-vibe add:section pricing-cards -s material-design -t enterprise
 
-# With custom output path
+# Custom output
 nikkory-vibe add:section testimonials-grid -o src/sections/Testimonials.tsx
 ```
 
 **Arguments:**
-- `<section>` - Section ID (hero-centered, pricing-cards, etc.)
+- `<section>` - Section type (hero-centered, pricing-cards, features-grid, etc.)
 
 **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
 
-**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
-
 ### `nikkory-vibe add:page` (alias: `page`)
 
-Generate full pages with multi-section composition.
+Generate complete pages with multiple sections.
 
 ```bash
-# Basic usage
+# Generate landing page
 nikkory-vibe add:page landing
 
-# With design system and tier
+# Generate dashboard
 nikkory-vibe add:page dashboard -s ios-hig -t enterprise
 
-# With custom output path
+# Custom output
 nikkory-vibe add:page auth -o src/pages/AuthPage.tsx
 ```
 
 **Arguments:**
-- `<page>` - Page ID (landing, dashboard, auth, etc.)
+- `<page>` - Page type (landing, dashboard, auth, pricing, etc.)
 
 **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
 
-**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, design systems, and tiers.
+Browse available templates and options.
 
 ```bash
 # List everything
 nikkory-vibe list
 
-# List specific category
+# List by category
 nikkory-vibe list components
 nikkory-vibe list sections
 nikkory-vibe list design-systems
@@ -175,14 +150,17 @@ nikkory-vibe list --json
 
 ### `nikkory-vibe init`
 
-Initialize a new Nikkory Vibe project with AI Agent Inspector.
+Initialize a new project.
 
 ```bash
 # Basic usage
 nikkory-vibe init my-app
 
-# With options
-nikkory-vibe init my-app --framework react --design material-design
+# With framework
+nikkory-vibe init my-app --framework react
+
+# Skip installation
+nikkory-vibe init my-app --no-install
 ```
 
 **Arguments:**
@@ -193,7 +171,7 @@ nikkory-vibe init my-app --framework react --design material-design
 - `-d, --design <system>` - Default design system
 - `--no-install` - Skip dependency installation
 
-## Design Systems (12 available)
+## Design Systems
 
 | Design System    | ID               | Description                      |
 | ---------------- | ---------------- | -------------------------------- |
@@ -212,133 +190,101 @@ nikkory-vibe init my-app --framework react --design material-design
 
 ## 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 |
+| 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
 
-### Generate a Material Design Button (Standard Tier)
+### Quick Component Generation
 
 ```bash
-nikkory-vibe add button -s material-design -t standard
-```
-
-**Output**:
-- Full React component with forwardRef, displayName
-- Multiple variants (filled, outlined, text)
-- Sizes (sm, md, lg)
-- TypeScript types
-- ~150 lines of code
+# Material Design button (Standard tier)
+nikkory-vibe add button
 
-### Generate a Hero Section (Enterprise Tier)
+# iOS-style card (Enterprise tier)
+nikkory-vibe add card -s ios-hig -t enterprise
 
-```bash
-nikkory-vibe add:section hero-centered -s ios-hig -t enterprise
+# Glassmorphism modal
+nikkory-vibe add modal -s glassmorphism
 ```
 
-**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
+### Section Generation
 
 ```bash
-nikkory-vibe add:page landing -s glassmorphism -t enterprise -o src/pages/Landing.tsx
-```
-
-**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
+# Hero section
+nikkory-vibe add:section hero-centered
 
-### Generate with Custom Factors
+# Pricing table
+nikkory-vibe add:section pricing-cards -t enterprise
 
-```bash
-nikkory-vibe add button --factor-overrides '{
-  "borderRadius": "rounded-full",
-  "shadowIntensity": "high",
-  "animation": "enabled"
-}'
+# Testimonials grid
+nikkory-vibe add:section testimonials-grid -s minimalism
 ```
 
-## Architecture
+### Full Page Generation
 
-### 3-Level Generation System
+```bash
+# Landing page with multiple sections
+nikkory-vibe add:page landing -s material-design -t standard
 
-```
-Page (7 factors)
-  ↓ Factor Propagation
-Section (13 factors)
-  ↓ Factor Propagation
-Component (24 factors)
+# Dashboard with data tables
+nikkory-vibe add:page dashboard -s carbon -t enterprise
+
+# Auth flow
+nikkory-vibe add:page auth -s ios-hig
 ```
 
-**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
+### Custom Output Paths
 
-## Configuration
+```bash
+# Component to specific path
+nikkory-vibe add button -o src/components/ui/Button.tsx
 
-Create `.viberc.json` in your project root:
+# Section to features directory
+nikkory-vibe add:section hero-centered -o src/features/landing/Hero.tsx
 
-```json
-{
-  "defaultDesignSystem": "material-design",
-  "defaultTier": "standard",
-  "outputDir": "src/components"
-}
+# Page to pages directory
+nikkory-vibe add:page landing -o src/pages/LandingPage.tsx
 ```
 
-## Statistics
-
-- **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)
-
 ## CLI Shortcuts
 
-You can use `vibe` as a shorter alias for `nikkory-vibe`:
+Use `vibe` as a shorter alias:
 
 ```bash
 # These are equivalent
 nikkory-vibe add button
 vibe add button
 
-# Section generation
+# Section shortcuts
 vibe add:section hero-centered
 vibe section hero-centered
 
-# Page generation
+# Page shortcuts
 vibe add:page landing
 vibe page landing
 ```
 
+## Configuration
+
+Create `.viberc.json` in your project root:
+
+```json
+{
+  "defaultDesignSystem": "material-design",
+  "defaultTier": "standard",
+  "outputDir": "src/components"
+}
+```
+
 ## Integration
 
 ### With React Projects
@@ -368,11 +314,58 @@ Install the Nikkory Vibe VSCode extension for:
 - 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
+vibe add button -t basic
+vibe add card -t basic
+vibe add:section hero-centered -t basic
+```
+
+**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
+```
+
+**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
+```
+
 ## Support
 
 - **Website**: https://nikkory.com
+- **Documentation**: https://nikkory.com/docs
 - **Issues**: [GitHub Issues](https://github.com/kemonra/nikkory-vibe/issues)
-- **Documentation**: [Full Docs](https://nikkory.com/docs)
 
 ## License
 

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.1")}
+${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.1").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.1",
+  "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",