grg-kit-cli 0.1.2 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # grg-kit-cli
 
-CLI tool for pulling GRG Kit resources into your Angular project with simple, memorable commands.
+CLI tool for initializing Angular projects with GRG Kit and adding blocks.
 
 ## Installation
 
@@ -11,26 +11,28 @@ npm install -g grg-kit-cli
 ## Quick Start
 
 ```bash
-# Initialize GRG Kit with a theme
+# Initialize GRG Kit (theme + all components + spartan-ng examples)
 grg init
 
-# Or choose a specific theme
+# Initialize with a specific theme
 grg init --theme claude
 
+# Add blocks
+grg add block --auth
+grg add block --shell
+grg add block --all
+
 # List available resources
 grg list
-
-# Add resources
-grg add theme:claude
-grg add component:stepper
-grg add examples:all
+grg list blocks
+grg list themes
 ```
 
 ## Commands
 
 ### `grg init`
 
-Initialize GRG Kit in your Angular project with themes directory and configuration.
+Initialize GRG Kit in your Angular project. Downloads theme, all components, and all spartan-ng examples in one shot.
 
 ```bash
 grg init [options]
@@ -45,8 +47,10 @@ Examples:
 ```
 
 **What it does:**
-- Creates `src/themes` directory
+- Creates `src/themes`, `src/app/components`, `src/app/spartan-examples` directories
 - Downloads the selected theme
+- Downloads all GRG Kit components
+- Downloads all spartan-ng examples (56+)
 - Updates `src/styles.css` with theme import
 
 **Available themes:**
@@ -57,187 +61,126 @@ Examples:
 - `amber-minimal` - Warm amber accents
 - `mocks` - Theme for mockups and prototypes
 
-### `grg add <resource>`
+### `grg add block`
 
-Add a GRG Kit resource to your project.
+Add blocks to your project.
 
 ```bash
-grg add <category>:<name> [options]
+grg add block [options]
 
 Options:
+  --all       Add all blocks
+  --auth      Add authentication block (login, signup, forgot password)
+  --shell     Add app shell block (sidebar, header, content area)
+  --settings  Add settings block (settings page with sidebar navigation)
   -o, --output <path>  Custom output directory
 
 Examples:
-  grg add theme:claude
-  grg add component:stepper
-  grg add layout:dashboard
-  grg add examples:button
-  grg add examples:all
+  grg add block --auth
+  grg add block --shell --settings
+  grg add block --all
 ```
 
-**Resource format:** `<category>:<name>`
-
-**Categories:**
-- `theme` - Pre-built theme files
-- `component` - Reusable components
-- `layout` - Page layouts
-- `examples` - Spartan-NG component examples
-
 ### `grg list [category]`
 
-List available GRG Kit resources.
+List available blocks and themes.
 
 ```bash
 grg list [category]
 
 Examples:
-  grg list           # Show all categories
+  grg list           # Show overview
+  grg list blocks    # List all blocks
   grg list themes    # List all themes
-  grg list components
-  grg list layouts
-  grg list examples
 ```
 
-### `grg metadata`
+### `grg llm-prompts`
 
-Output structured metadata about all available commands and resources (for MCP servers and LLMs).
+Generate LLM-specific prompts and rules for AI assistants (Windsurf, Cursor, etc.).
 
 ```bash
-grg metadata [options]
+grg llm-prompts [options]
 
 Options:
-  -f, --format <type>  Output format: json, yaml (default: "json")
+  -o, --output <path>  Output directory for rules (default: ".windsurf/rules")
 
 Examples:
-  grg metadata
-  grg metadata --format json
+  grg llm-prompts
+  grg llm-prompts --output .cursor/rules
 ```
 
-**Purpose:**
-This command outputs structured JSON/YAML metadata that can be consumed by:
-- MCP (Model Context Protocol) servers
-- LLMs for automated resource discovery
-- CI/CD pipelines
-- Documentation generators
-
 ## MCP Server Integration
 
-The CLI is designed to work seamlessly with MCP servers. The `metadata` command provides structured information that LLMs can use to:
+For AI assistants to automatically discover and use GRG Kit resources:
 
-1. **Discover available resources** - Themes, components, layouts, examples
-2. **Understand command usage** - Syntax, options, examples
-3. **Execute commands automatically** - Based on user intent
-4. **Provide contextual help** - Descriptions, tags, dependencies
+### 1. Install the MCP Server
 
-### Metadata Structure
+```bash
+npm install -g @grg-kit/mcp-server
+```
+
+### 2. Configure Your AI Assistant
+
+**Windsurf** (`~/.codeium/windsurf/mcp_config.json`):
 
 ```json
 {
-  "version": "0.1.0",
-  "name": "grg-kit-cli",
-  "description": "CLI tool for pulling GRG Kit resources into Angular projects",
-  "commands": [
-    {
-      "name": "init",
-      "description": "Initialize GRG Kit in your Angular project",
-      "usage": "grg init [options]",
-      "options": [...],
-      "examples": [...],
-      "effects": [...]
+  "mcpServers": {
+    "grg-kit": {
+      "command": "grg-mcp-server"
     }
-  ],
-  "resources": {
-    "themes": [...],
-    "components": [...],
-    "layouts": [...],
-    "examples": {...}
   }
 }
 ```
 
-## Examples
-
-### Initialize a new project
-
-```bash
-# Initialize with default theme
-grg init
-
-# Initialize with Claude theme
-grg init --theme claude
-```
-
-### Add resources
-
-```bash
-# Add a different theme
-grg add theme:modern-minimal
-
-# Add a component
-grg add component:stepper
-
-# Add a layout
-grg add layout:dashboard
-
-# Add all Spartan-NG examples
-grg add examples:all
-
-# Add specific component examples
-grg add examples:button
-grg add examples:dialog
-```
-
-### Browse resources
-
-```bash
-# See all categories
-grg list
-
-# See all themes
-grg list themes
-
-# See all components
-grg list components
+**Cursor** (`~/.cursor/mcp_config.json`):
 
-# See all examples
-grg list examples
+```json
+{
+  "mcpServers": {
+    "grg-kit": {
+      "command": "grg-mcp-server"
+    }
+  }
+}
 ```
 
-## Comparison with degit
+### 3. Generate AI Rules
 
-### Before (with degit):
 ```bash
-npx degit gh:Genesis-Research/grg-kit/templates/ui/themes/grg-theme.css src/themes/grg-theme.css
-npx degit gh:Genesis-Research/grg-kit/templates/spartan-examples src/app/spartan-examples
+cd your-angular-project
+grg llm-prompts
 ```
 
-### After (with @grg-kit/cli):
-```bash
-grg add theme:grg-theme
-grg add examples:all
-```
+### 4. Restart Your IDE
 
-**Benefits:**
-- ✅ Shorter, memorable commands
-- ✅ Built-in resource discovery
-- ✅ Automatic path management
-- ✅ Helpful error messages
-- ✅ MCP server integration
-- ✅ Structured metadata for LLMs
+**What this enables:**
+- ✅ AI automatically searches GRG Kit before writing custom code
+- ✅ AI knows about themes, components, blocks, and examples
+- ✅ AI follows GRG Kit design system patterns
+- ✅ AI can install blocks directly via MCP tools
 
-## Development
+## Quick Reference
 
 ```bash
-# Install dependencies
-npm install
-
-# Link for local development
-npm link
-
-# Test commands
-grg --help
-grg list
-grg metadata
+# Initialize project
+grg init                        # Default theme
+grg init --theme claude         # Custom theme
+
+# Add blocks
+grg add block --auth            # Auth pages
+grg add block --shell           # App shell
+grg add block --settings        # Settings page
+grg add block --auth --shell    # Multiple blocks
+grg add block --all             # All blocks
+
+# List resources
+grg list                        # Overview
+grg list blocks                 # Available blocks
+grg list themes                 # Available themes
+
+# AI setup
+grg llm-prompts                 # Generate AI rules
 ```
 
 ## License

package/bin/grg.js

@@ -4,40 +4,44 @@ const { Command } = require('commander');
 const { add } = require('../commands/add');
 const { list } = require('../commands/list');
 const { init } = require('../commands/init');
-const { metadata } = require('../commands/metadata');
+const { llmPrompts } = require('../commands/llm-prompts');
 
 const program = new Command();
 
 program
   .name('grg')
-  .description('GRG Kit CLI - Pull themes, components, and examples into your Angular project')
-  .version('0.1.0');
+  .description('GRG Kit CLI - Initialize your Angular project with GRG Kit components and add blocks')
+  .version('0.3.0');
 
-// Init command
+// Init command - sets up everything in one shot
 program
   .command('init')
-  .description('Initialize GRG Kit in your Angular project with themes directory and configuration')
+  .description('Initialize GRG Kit: sets up styles.css with theme, adds all components and spartan-ng examples')
   .option('-t, --theme <name>', 'Theme to install (grg-theme, claude, clean-slate, modern-minimal, amber-minimal, mocks)', 'grg-theme')
   .action(init);
 
-// Add command
+// Add block command
 program
-  .command('add <resource>')
-  .description('Add a GRG Kit resource to your project')
-  .option('-o, --output <path>', 'Output directory for the resource')
+  .command('add block')
+  .description('Add blocks to your project')
+  .option('--all', 'Add all blocks')
+  .option('--auth', 'Add authentication block (login, signup, forgot password)')
+  .option('--shell', 'Add app shell block (sidebar, header, content area)')
+  .option('--settings', 'Add settings block (settings page with sidebar navigation)')
+  .option('-o, --output <path>', 'Custom output directory')
   .action(add);
 
 // List command
 program
   .command('list [category]')
-  .description('List available GRG Kit resources (themes, components, layouts, examples)')
+  .description('List available blocks and components')
   .action(list);
 
-// Metadata command (for MCP server integration)
+// LLM Prompts command
 program
-  .command('metadata')
-  .description('Output structured metadata about all available commands and resources (JSON format for MCP servers)')
-  .option('-f, --format <type>', 'Output format (json, yaml)', 'json')
-  .action(metadata);
+  .command('llm-prompts')
+  .description('Generate LLM-specific prompts and rules for AI assistants (Windsurf, Cursor, etc.)')
+  .option('-o, --output <path>', 'Output directory for rules', '.windsurf/rules')
+  .action(llmPrompts);
 
 program.parse();

package/commands/add.js

@@ -4,122 +4,80 @@ const ora = require('ora');
 const { RESOURCES, REPO } = require('../config/resources');
 
 /**
- * Add command - downloads a specific resource
- * Format: grg add <category>:<name>
+ * Add command - downloads blocks
+ * Format: grg add block [options]
  * Examples:
- *   grg add theme:claude
- *   grg add component:stepper
- *   grg add examples:button
- *   grg add examples:all
+ *   grg add block --auth
+ *   grg add block --shell --settings
+ *   grg add block --all
  */
-async function add(resource, options) {
-  const [category, name] = resource.split(':');
+async function add(options) {
+  // Determine which blocks to add
+  const blocksToAdd = [];
+  
+  if (options.all) {
+    blocksToAdd.push(...RESOURCES.blocks);
+  } else {
+    if (options.auth) {
+      const block = RESOURCES.blocks.find(b => b.name === 'auth');
+      if (block) blocksToAdd.push(block);
+    }
+    if (options.shell) {
+      const block = RESOURCES.blocks.find(b => b.name === 'shell');
+      if (block) blocksToAdd.push(block);
+    }
+    if (options.settings) {
+      const block = RESOURCES.blocks.find(b => b.name === 'settings');
+      if (block) blocksToAdd.push(block);
+    }
+  }
 
-  if (!category || !name) {
-    console.error(chalk.red('Error: Invalid resource format. Use <category>:<name>'));
-    console.log(chalk.yellow('Examples:'));
-    console.log('  grg add theme:claude');
-    console.log('  grg add component:stepper');
-    console.log('  grg add examples:button');
-    console.log('  grg add examples:all');
+  if (blocksToAdd.length === 0) {
+    console.log(chalk.yellow('\nNo blocks specified. Use one of the following options:\n'));
+    console.log(chalk.cyan('  grg add block --all'), chalk.gray('       Add all blocks'));
+    console.log(chalk.cyan('  grg add block --auth'), chalk.gray('      Add authentication block'));
+    console.log(chalk.cyan('  grg add block --shell'), chalk.gray('     Add app shell block'));
+    console.log(chalk.cyan('  grg add block --settings'), chalk.gray('  Add settings block'));
+    console.log(chalk.gray('\nRun'), chalk.cyan('grg list blocks'), chalk.gray('for more details'));
     process.exit(1);
   }
 
-  let resourceData;
-  let sourcePath;
-  let outputPath;
-
-  // Find the resource
-  switch (category) {
-    case 'theme':
-      resourceData = RESOURCES.themes.find(t => t.name === name);
-      if (resourceData) {
-        sourcePath = resourceData.path;
-        outputPath = options.output || resourceData.defaultOutput;
-      }
-      break;
-
-    case 'component':
-      resourceData = RESOURCES.components.find(c => c.name === name);
-      if (resourceData) {
-        sourcePath = resourceData.path;
-        outputPath = options.output || resourceData.defaultOutput;
-      }
-      break;
-
-    case 'layout':
-      resourceData = RESOURCES.layouts.find(l => l.name === name);
-      if (resourceData) {
-        sourcePath = resourceData.path;
-        outputPath = options.output || resourceData.defaultOutput;
-      }
-      break;
-
-    case 'examples':
-      if (name === 'all') {
-        resourceData = RESOURCES.examples.all;
-        sourcePath = resourceData.path;
-        outputPath = options.output || resourceData.defaultOutput;
-      } else {
-        resourceData = RESOURCES.examples.components.find(e => e.name === name);
-        if (resourceData) {
-          sourcePath = resourceData.path;
-          outputPath = options.output || resourceData.defaultOutput;
-        }
-      }
-      break;
-
-    default:
-      console.error(chalk.red(`Error: Unknown category "${category}"`));
-      console.log(chalk.yellow('Valid categories: theme, component, layout, examples'));
-      process.exit(1);
-  }
+  console.log(chalk.bold.cyan(`\n📦 Adding ${blocksToAdd.length} block(s)\n`));
 
-  if (!resourceData) {
-    console.error(chalk.red(`Error: Resource "${name}" not found in category "${category}"`));
-    console.log(chalk.yellow(`\nRun ${chalk.cyan('grg list ' + category + 's')} to see available resources`));
-    process.exit(1);
-  }
+  const spinner = ora();
 
-  // Download the resource
-  const spinner = ora(`Downloading ${resourceData.title}...`).start();
+  for (const block of blocksToAdd) {
+    const outputPath = options.output 
+      ? `${options.output}/${block.name}` 
+      : block.defaultOutput;
 
-  try {
-    const emitter = degit(`${REPO}/${sourcePath}`, {
-      cache: false,
-      force: true,
-      verbose: false,
-    });
+    spinner.start(`Downloading ${block.title}...`);
 
-    await emitter.clone(outputPath);
+    try {
+      const emitter = degit(`${REPO}/${block.path}`, {
+        cache: false,
+        force: true,
+        verbose: false,
+      });
 
-    spinner.succeed(chalk.green(`✓ ${resourceData.title} added successfully!`));
-    console.log(chalk.gray(`  Location: ${outputPath}`));
-    
-    if (resourceData.description) {
-      console.log(chalk.gray(`  ${resourceData.description}`));
-    }
+      await emitter.clone(outputPath);
 
-    // Show next steps for themes
-    if (category === 'theme') {
-      console.log(chalk.yellow('\nNext steps:'));
-      console.log(chalk.gray(`  1. Import the theme in your src/styles.css:`));
-      console.log(chalk.cyan(`     @import './${outputPath.replace('src/', '')}';`));
-    }
+      spinner.succeed(chalk.green(`✓ ${block.title} added`));
+      console.log(chalk.gray(`  Location: ${outputPath}`));
+      
+      // Show dependencies if any
+      if (block.dependencies && block.dependencies.length > 0) {
+        console.log(chalk.gray(`  Dependencies: ${block.dependencies.join(', ')}`));
+      }
+      console.log();
 
-    // Show dependencies if any
-    if (resourceData.dependencies && resourceData.dependencies.length > 0) {
-      console.log(chalk.yellow('\nRequired dependencies:'));
-      resourceData.dependencies.forEach(dep => {
-        console.log(chalk.gray(`  - ${dep}`));
-      });
+    } catch (error) {
+      spinner.fail(chalk.red(`Failed to download ${block.title}`));
+      console.error(chalk.red(error.message));
     }
-
-  } catch (error) {
-    spinner.fail(chalk.red('Failed to download resource'));
-    console.error(chalk.red(error.message));
-    process.exit(1);
   }
+
+  console.log(chalk.bold.green('✨ Done!'));
 }
 
 module.exports = { add };

package/commands/init.js

@@ -7,7 +7,7 @@ const { RESOURCES, REPO } = require('../config/resources');
 
 /**
  * Init command - initializes GRG Kit in the project
- * Creates themes directory and downloads a theme
+ * Downloads theme, all components, and all spartan-ng examples in one shot
  */
 async function init(options) {
   const themeName = options.theme || 'grg-theme';
@@ -22,36 +22,74 @@ async function init(options) {
 
   console.log(chalk.bold.cyan('\n🚀 Initializing GRG Kit\n'));
 
-  // Step 1: Create themes directory
-  const spinner = ora('Creating themes directory...').start();
+  const spinner = ora();
+
+  // Step 1: Create directories
+  spinner.start('Creating directories...');
   try {
     await fs.mkdir('src/themes', { recursive: true });
-    spinner.succeed(chalk.green('✓ Created src/themes directory'));
+    await fs.mkdir('src/app/components', { recursive: true });
+    await fs.mkdir('src/app/spartan-examples', { recursive: true });
+    spinner.succeed(chalk.green('✓ Created directories'));
   } catch (error) {
-    spinner.fail(chalk.red('Failed to create themes directory'));
+    spinner.fail(chalk.red('Failed to create directories'));
     console.error(chalk.red(error.message));
     process.exit(1);
   }
 
   // Step 2: Download theme
-  spinner.start(`Downloading ${theme.title}...`);
+  spinner.start(`Downloading ${theme.title} theme...`);
   try {
     const emitter = degit(`${REPO}/${theme.path}`, {
       cache: false,
       force: true,
       verbose: false,
     });
-
     await emitter.clone(theme.defaultOutput);
-    spinner.succeed(chalk.green(`✓ Downloaded ${theme.title}`));
+    spinner.succeed(chalk.green(`✓ Downloaded ${theme.title} theme`));
   } catch (error) {
     spinner.fail(chalk.red('Failed to download theme'));
     console.error(chalk.red(error.message));
     process.exit(1);
   }
 
-  // Step 3: Check and update styles.css
-  spinner.start('Checking src/styles.css...');
+  // Step 3: Download all components
+  spinner.start(`Downloading ${RESOURCES.components.length} components...`);
+  try {
+    for (const component of RESOURCES.components) {
+      const emitter = degit(`${REPO}/${component.path}`, {
+        cache: false,
+        force: true,
+        verbose: false,
+      });
+      await emitter.clone(component.defaultOutput);
+    }
+    spinner.succeed(chalk.green(`✓ Downloaded ${RESOURCES.components.length} components`));
+  } catch (error) {
+    spinner.fail(chalk.red('Failed to download components'));
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+
+  // Step 4: Download all spartan-ng examples
+  const examplesAll = RESOURCES.examples.all;
+  spinner.start(`Downloading spartan-ng examples (${examplesAll.count})...`);
+  try {
+    const emitter = degit(`${REPO}/${examplesAll.path}`, {
+      cache: false,
+      force: true,
+      verbose: false,
+    });
+    await emitter.clone(examplesAll.defaultOutput);
+    spinner.succeed(chalk.green(`✓ Downloaded spartan-ng examples (${examplesAll.count})`));
+  } catch (error) {
+    spinner.fail(chalk.red('Failed to download spartan-ng examples'));
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+
+  // Step 5: Update styles.css
+  spinner.start('Updating src/styles.css...');
   try {
     const stylesPath = 'src/styles.css';
     let stylesContent = '';
@@ -66,7 +104,6 @@ async function init(options) {
     const themeImport = `@import './themes/${theme.file}';`;
     
     if (!stylesContent.includes(themeImport)) {
-      // Add required imports if not present
       const requiredImports = [
         '@import "@angular/cdk/overlay-prebuilt.css";',
         '@import "tailwindcss";',
@@ -89,13 +126,15 @@ async function init(options) {
 
   // Success message
   console.log(chalk.bold.green('\n✨ GRG Kit initialized successfully!\n'));
-  console.log(chalk.gray('Theme installed:'), chalk.cyan(theme.title));
-  console.log(chalk.gray('Description:'), theme.description);
+  
+  console.log(chalk.bold('Installed:'));
+  console.log(chalk.gray('  Theme:'), chalk.cyan(theme.title));
+  console.log(chalk.gray('  Components:'), chalk.cyan(`${RESOURCES.components.length} components`));
+  console.log(chalk.gray('  Examples:'), chalk.cyan(`${examplesAll.count} spartan-ng examples`));
   
   console.log(chalk.yellow('\nNext steps:'));
-  console.log(chalk.gray('  1. Run'), chalk.cyan('grg list'), chalk.gray('to see available resources'));
-  console.log(chalk.gray('  2. Add components with'), chalk.cyan('grg add component:<name>'));
-  console.log(chalk.gray('  3. Add examples with'), chalk.cyan('grg add examples:all'));
+  console.log(chalk.gray('  1. Run'), chalk.cyan('grg list'), chalk.gray('to see available blocks'));
+  console.log(chalk.gray('  2. Add blocks with'), chalk.cyan('grg add <block-name>'));
   console.log();
 }