grg-kit-cli 0.1.0

package/README.md

@@ -0,0 +1,245 @@
+# @grg-kit/cli
+
+CLI tool for pulling GRG Kit resources into your Angular project with simple, memorable commands.
+
+## Installation
+
+```bash
+npm install -g @grg-kit/cli
+```
+
+## Quick Start
+
+```bash
+# Initialize GRG Kit with a theme
+grg init
+
+# Or choose a specific theme
+grg init --theme claude
+
+# List available resources
+grg list
+
+# Add resources
+grg add theme:claude
+grg add component:stepper
+grg add examples:all
+```
+
+## Commands
+
+### `grg init`
+
+Initialize GRG Kit in your Angular project with themes directory and configuration.
+
+```bash
+grg init [options]
+
+Options:
+  -t, --theme <name>  Theme to install (default: "grg-theme")
+
+Examples:
+  grg init
+  grg init --theme claude
+  grg init -t modern-minimal
+```
+
+**What it does:**
+- Creates `src/themes` directory
+- Downloads the selected theme
+- Updates `src/styles.css` with theme import
+
+**Available themes:**
+- `grg-theme` - Default theme with purple/orange accents
+- `claude` - Claude-inspired warm tones
+- `clean-slate` - Minimal grayscale palette
+- `modern-minimal` - Contemporary minimal design
+- `amber-minimal` - Warm amber accents
+- `mocks` - Theme for mockups and prototypes
+
+### `grg add <resource>`
+
+Add a GRG Kit resource to your project.
+
+```bash
+grg add <category>:<name> [options]
+
+Options:
+  -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
+```
+
+**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.
+
+```bash
+grg list [category]
+
+Examples:
+  grg list           # Show all categories
+  grg list themes    # List all themes
+  grg list components
+  grg list layouts
+  grg list examples
+```
+
+### `grg metadata`
+
+Output structured metadata about all available commands and resources (for MCP servers and LLMs).
+
+```bash
+grg metadata [options]
+
+Options:
+  -f, --format <type>  Output format: json, yaml (default: "json")
+
+Examples:
+  grg metadata
+  grg metadata --format json
+```
+
+**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:
+
+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
+
+### Metadata Structure
+
+```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": [...]
+    }
+  ],
+  "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
+
+# See all examples
+grg list examples
+```
+
+## Comparison with degit
+
+### 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
+```
+
+### After (with @grg-kit/cli):
+```bash
+grg add theme:grg-theme
+grg add examples:all
+```
+
+**Benefits:**
+- ✅ Shorter, memorable commands
+- ✅ Built-in resource discovery
+- ✅ Automatic path management
+- ✅ Helpful error messages
+- ✅ MCP server integration
+- ✅ Structured metadata for LLMs
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Link for local development
+npm link
+
+# Test commands
+grg --help
+grg list
+grg metadata
+```
+
+## License
+
+MIT

package/bin/grg.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+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 program = new Command();
+
+program
+  .name('grg')
+  .description('GRG Kit CLI - Pull themes, components, and examples into your Angular project')
+  .version('0.1.0');
+
+// Init command
+program
+  .command('init')
+  .description('Initialize GRG Kit in your Angular project with themes directory and configuration')
+  .option('-t, --theme <name>', 'Theme to install (grg-theme, claude, clean-slate, modern-minimal, amber-minimal, mocks)', 'grg-theme')
+  .action(init);
+
+// Add command
+program
+  .command('add <resource>')
+  .description('Add a GRG Kit resource to your project')
+  .option('-o, --output <path>', 'Output directory for the resource')
+  .action(add);
+
+// List command
+program
+  .command('list [category]')
+  .description('List available GRG Kit resources (themes, components, layouts, examples)')
+  .action(list);
+
+// Metadata command (for MCP server integration)
+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);
+
+program.parse();

package/commands/add.js

@@ -0,0 +1,125 @@
+const degit = require('degit');
+const chalk = require('chalk');
+const ora = require('ora');
+const { RESOURCES, REPO } = require('../config/resources');
+
+/**
+ * Add command - downloads a specific resource
+ * Format: grg add <category>:<name>
+ * Examples:
+ *   grg add theme:claude
+ *   grg add component:stepper
+ *   grg add examples:button
+ *   grg add examples:all
+ */
+async function add(resource, options) {
+  const [category, name] = resource.split(':');
+
+  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');
+    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);
+  }
+
+  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);
+  }
+
+  // Download the resource
+  const spinner = ora(`Downloading ${resourceData.title}...`).start();
+
+  try {
+    const emitter = degit(`${REPO}/${sourcePath}`, {
+      cache: false,
+      force: true,
+      verbose: false,
+    });
+
+    await emitter.clone(outputPath);
+
+    spinner.succeed(chalk.green(`✓ ${resourceData.title} added successfully!`));
+    console.log(chalk.gray(`  Location: ${outputPath}`));
+    
+    if (resourceData.description) {
+      console.log(chalk.gray(`  ${resourceData.description}`));
+    }
+
+    // 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/', '')}';`));
+    }
+
+    // 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 resource'));
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+}
+
+module.exports = { add };

package/commands/init.js

@@ -0,0 +1,102 @@
+const fs = require('fs').promises;
+const path = require('path');
+const degit = require('degit');
+const chalk = require('chalk');
+const ora = require('ora');
+const { RESOURCES, REPO } = require('../config/resources');
+
+/**
+ * Init command - initializes GRG Kit in the project
+ * Creates themes directory and downloads a theme
+ */
+async function init(options) {
+  const themeName = options.theme || 'grg-theme';
+  const theme = RESOURCES.themes.find(t => t.name === themeName);
+
+  if (!theme) {
+    console.error(chalk.red(`Error: Theme "${themeName}" not found`));
+    console.log(chalk.yellow('Available themes:'));
+    RESOURCES.themes.forEach(t => console.log(chalk.gray(`  - ${t.name}`)));
+    process.exit(1);
+  }
+
+  console.log(chalk.bold.cyan('\n🚀 Initializing GRG Kit\n'));
+
+  // Step 1: Create themes directory
+  const spinner = ora('Creating themes directory...').start();
+  try {
+    await fs.mkdir('src/themes', { recursive: true });
+    spinner.succeed(chalk.green('✓ Created src/themes directory'));
+  } catch (error) {
+    spinner.fail(chalk.red('Failed to create themes directory'));
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+
+  // Step 2: Download theme
+  spinner.start(`Downloading ${theme.title}...`);
+  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}`));
+  } 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...');
+  try {
+    const stylesPath = 'src/styles.css';
+    let stylesContent = '';
+    
+    try {
+      stylesContent = await fs.readFile(stylesPath, 'utf-8');
+    } catch (error) {
+      // File doesn't exist, create it
+      stylesContent = '';
+    }
+
+    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";',
+        '@import "@spartan-ng/brain/hlm-tailwind-preset.css";',
+        '',
+        themeImport
+      ];
+
+      const newContent = requiredImports.join('\n') + '\n';
+      await fs.writeFile(stylesPath, newContent);
+      spinner.succeed(chalk.green('✓ Updated src/styles.css with theme import'));
+    } else {
+      spinner.succeed(chalk.green('✓ Theme already imported in src/styles.css'));
+    }
+  } catch (error) {
+    spinner.warn(chalk.yellow('Could not update src/styles.css automatically'));
+    console.log(chalk.gray('\nPlease add the following to your src/styles.css:'));
+    console.log(chalk.cyan(`  @import './themes/${theme.file}';`));
+  }
+
+  // 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.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();
+}
+
+module.exports = { init };

package/commands/list.js

@@ -0,0 +1,94 @@
+const chalk = require('chalk');
+const { RESOURCES } = require('../config/resources');
+
+/**
+ * List command - displays available resources
+ * Usage: grg list [category]
+ */
+async function list(category) {
+  if (!category) {
+    // Show all categories
+    console.log(chalk.bold.cyan('\n📦 GRG Kit Resources\n'));
+    
+    console.log(chalk.bold('Themes') + chalk.gray(` (${RESOURCES.themes.length} available)`));
+    console.log(chalk.gray('  Run: grg list themes\n'));
+    
+    console.log(chalk.bold('Components') + chalk.gray(` (${RESOURCES.components.length} available)`));
+    console.log(chalk.gray('  Run: grg list components\n'));
+    
+    console.log(chalk.bold('Layouts') + chalk.gray(` (${RESOURCES.layouts.length} available)`));
+    console.log(chalk.gray('  Run: grg list layouts\n'));
+    
+    console.log(chalk.bold('Spartan-NG Examples') + chalk.gray(` (${RESOURCES.examples.components.length}+ available)`));
+    console.log(chalk.gray('  Run: grg list examples\n'));
+    
+    return;
+  }
+
+  switch (category) {
+    case 'themes':
+      console.log(chalk.bold.cyan('\n🎨 Available Themes\n'));
+      RESOURCES.themes.forEach(theme => {
+        console.log(chalk.bold(`  ${theme.name}`));
+        console.log(chalk.gray(`    ${theme.description}`));
+        console.log(chalk.yellow(`    grg add theme:${theme.name}`));
+        if (theme.tags.length > 0) {
+          console.log(chalk.gray(`    Tags: ${theme.tags.join(', ')}`));
+        }
+        console.log();
+      });
+      break;
+
+    case 'components':
+      console.log(chalk.bold.cyan('\n🧩 Available Components\n'));
+      RESOURCES.components.forEach(component => {
+        console.log(chalk.bold(`  ${component.name}`));
+        console.log(chalk.gray(`    ${component.description}`));
+        console.log(chalk.yellow(`    grg add component:${component.name}`));
+        if (component.tags.length > 0) {
+          console.log(chalk.gray(`    Tags: ${component.tags.join(', ')}`));
+        }
+        console.log();
+      });
+      break;
+
+    case 'layouts':
+      console.log(chalk.bold.cyan('\n📐 Available Layouts\n'));
+      RESOURCES.layouts.forEach(layout => {
+        console.log(chalk.bold(`  ${layout.name}`));
+        console.log(chalk.gray(`    ${layout.description}`));
+        console.log(chalk.yellow(`    grg add layout:${layout.name}`));
+        if (layout.tags.length > 0) {
+          console.log(chalk.gray(`    Tags: ${layout.tags.join(', ')}`));
+        }
+        console.log();
+      });
+      break;
+
+    case 'examples':
+      console.log(chalk.bold.cyan('\n📚 Available Spartan-NG Examples\n'));
+      
+      // Show "all" option first
+      console.log(chalk.bold(`  all`) + chalk.gray(' (recommended)'));
+      console.log(chalk.gray(`    ${RESOURCES.examples.all.description}`));
+      console.log(chalk.yellow(`    grg add examples:all`));
+      console.log();
+      
+      console.log(chalk.gray('  Or add individual component examples:\n'));
+      
+      RESOURCES.examples.components.forEach(example => {
+        console.log(chalk.bold(`  ${example.name}`));
+        console.log(chalk.gray(`    ${example.description}`));
+        console.log(chalk.yellow(`    grg add examples:${example.name}`));
+        console.log();
+      });
+      break;
+
+    default:
+      console.error(chalk.red(`Error: Unknown category "${category}"`));
+      console.log(chalk.yellow('Valid categories: themes, components, layouts, examples'));
+      process.exit(1);
+  }
+}
+
+module.exports = { list };

package/commands/metadata.js

@@ -0,0 +1,122 @@
+const chalk = require('chalk');
+const { RESOURCES } = require('../config/resources');
+
+/**
+ * Metadata command - outputs structured information about all commands and resources
+ * This is designed to be consumed by MCP servers and LLMs
+ */
+async function metadata(options) {
+  const format = options.format || 'json';
+
+  const commandMetadata = {
+    version: '0.1.0',
+    name: 'grg-kit-cli',
+    description: 'CLI tool for pulling GRG Kit resources into Angular projects',
+    repository: 'https://github.com/Genesis-Research/grg-kit',
+    commands: [
+      {
+        name: 'init',
+        description: 'Initialize GRG Kit in your Angular project with themes directory and configuration',
+        usage: 'grg init [options]',
+        options: [
+          {
+            flag: '-t, --theme <name>',
+            description: 'Theme to install',
+            default: 'grg-theme',
+            choices: ['grg-theme', 'claude', 'clean-slate', 'modern-minimal', 'amber-minimal', 'mocks']
+          }
+        ],
+        examples: [
+          'grg init',
+          'grg init --theme claude',
+          'grg init -t modern-minimal'
+        ],
+        effects: [
+          'Creates src/themes directory',
+          'Downloads selected theme file',
+          'Updates src/styles.css with theme import'
+        ]
+      },
+      {
+        name: 'add',
+        description: 'Add a GRG Kit resource to your project',
+        usage: 'grg add <resource> [options]',
+        options: [
+          {
+            flag: '-o, --output <path>',
+            description: 'Output directory for the resource',
+            default: 'Auto-determined based on resource type'
+          }
+        ],
+        examples: [
+          'grg add theme:claude',
+          'grg add component:stepper',
+          'grg add layout:dashboard',
+          'grg add examples:button',
+          'grg add examples:all'
+        ],
+        resourceFormat: '<category>:<name>',
+        categories: ['theme', 'component', 'layout', 'examples'],
+        effects: [
+          'Downloads the specified resource',
+          'Places it in the appropriate directory'
+        ]
+      },
+      {
+        name: 'list',
+        description: 'List available GRG Kit resources',
+        usage: 'grg list [category]',
+        examples: [
+          'grg list',
+          'grg list themes',
+          'grg list components',
+          'grg list layouts',
+          'grg list examples'
+        ],
+        categories: ['themes', 'components', 'layouts', 'examples'],
+        effects: [
+          'Displays available resources in the specified category'
+        ]
+      },
+      {
+        name: 'metadata',
+        description: 'Output structured metadata about all available commands and resources (for MCP servers)',
+        usage: 'grg metadata [options]',
+        options: [
+          {
+            flag: '-f, --format <type>',
+            description: 'Output format',
+            default: 'json',
+            choices: ['json', 'yaml']
+          }
+        ],
+        examples: [
+          'grg metadata',
+          'grg metadata --format json'
+        ],
+        effects: [
+          'Outputs structured metadata in specified format'
+        ]
+      }
+    ],
+    resources: RESOURCES
+  };
+
+  if (format === 'json') {
+    console.log(JSON.stringify(commandMetadata, null, 2));
+  } else if (format === 'yaml') {
+    // Simple YAML output (could use a library for more complex cases)
+    console.log('# GRG Kit CLI Metadata');
+    console.log(`version: ${commandMetadata.version}`);
+    console.log(`name: ${commandMetadata.name}`);
+    console.log(`description: ${commandMetadata.description}`);
+    console.log('\ncommands:');
+    commandMetadata.commands.forEach(cmd => {
+      console.log(`  - name: ${cmd.name}`);
+      console.log(`    description: ${cmd.description}`);
+      console.log(`    usage: ${cmd.usage}`);
+    });
+  }
+}
+
+module.exports = { metadata };

package/config/resources.js

@@ -0,0 +1,208 @@
+/**
+ * Resource definitions for GRG Kit
+ * This structure is designed to be easily consumed by MCP servers and LLMs
+ */
+
+const RESOURCES = {
+  themes: [
+    {
+      name: 'grg-theme',
+      title: 'GRG Theme',
+      description: 'Default theme with purple/orange accents',
+      file: 'grg-theme.css',
+      path: 'templates/ui/themes/grg-theme.css',
+      defaultOutput: 'src/themes/grg-theme.css',
+      tags: ['default', 'purple', 'orange', 'colorful'],
+      features: ['dark-mode', 'tailwind-v4', 'spartan-ng', 'oklch']
+    },
+    {
+      name: 'claude',
+      title: 'Claude Theme',
+      description: 'Claude-inspired warm tones',
+      file: 'claude.css',
+      path: 'templates/ui/themes/claude.css',
+      defaultOutput: 'src/themes/claude.css',
+      tags: ['warm', 'orange', 'brown', 'claude'],
+      features: ['dark-mode', 'tailwind-v4', 'spartan-ng', 'oklch']
+    },
+    {
+      name: 'clean-slate',
+      title: 'Clean Slate',
+      description: 'Minimal grayscale palette',
+      file: 'clean-slate.css',
+      path: 'templates/ui/themes/clean-slate.css',
+      defaultOutput: 'src/themes/clean-slate.css',
+      tags: ['minimal', 'grayscale', 'neutral', 'clean'],
+      features: ['dark-mode', 'tailwind-v4', 'spartan-ng', 'oklch']
+    },
+    {
+      name: 'modern-minimal',
+      title: 'Modern Minimal',
+      description: 'Contemporary minimal design',
+      file: 'modern-minimal.css',
+      path: 'templates/ui/themes/modern-minimal.css',
+      defaultOutput: 'src/themes/modern-minimal.css',
+      tags: ['minimal', 'modern', 'contemporary', 'clean'],
+      features: ['dark-mode', 'tailwind-v4', 'spartan-ng', 'oklch']
+    },
+    {
+      name: 'amber-minimal',
+      title: 'Amber Minimal',
+      description: 'Warm amber accents',
+      file: 'amber-minimal.css',
+      path: 'templates/ui/themes/amber-minimal.css',
+      defaultOutput: 'src/themes/amber-minimal.css',
+      tags: ['minimal', 'warm', 'amber', 'orange'],
+      features: ['dark-mode', 'tailwind-v4', 'spartan-ng', 'oklch']
+    },
+    {
+      name: 'mocks',
+      title: 'Mocks Theme',
+      description: 'Theme for mockups and prototypes',
+      file: 'mocks.css',
+      path: 'templates/ui/themes/mocks.css',
+      defaultOutput: 'src/themes/mocks.css',
+      tags: ['mockup', 'prototype', 'design'],
+      features: ['dark-mode', 'tailwind-v4', 'spartan-ng', 'oklch']
+    }
+  ],
+  components: [
+    {
+      name: 'stepper',
+      title: 'Stepper Component',
+      description: 'Multi-step form component with progress indicator',
+      path: 'templates/ui/components/stepper',
+      defaultOutput: 'src/app/components/stepper',
+      tags: ['form', 'wizard', 'multi-step', 'progress'],
+      dependencies: ['@spartan-ng/helm/button', '@spartan-ng/helm/card'],
+      type: 'grg-component',
+      prefix: 'grg'
+    }
+  ],
+  layouts: [
+    {
+      name: 'dashboard',
+      title: 'Dashboard Layout',
+      description: 'Full dashboard layout with sidebar and header',
+      path: 'templates/ui/layouts/dashboard',
+      defaultOutput: 'src/app/layouts/dashboard',
+      tags: ['dashboard', 'admin', 'sidebar', 'navigation'],
+      dependencies: ['@spartan-ng/helm/button', '@spartan-ng/helm/card', '@spartan-ng/helm/navigation-menu']
+    },
+    {
+      name: 'auth',
+      title: 'Authentication Layout',
+      description: 'Authentication pages layout (login, signup, forgot password)',
+      path: 'templates/ui/layouts/auth',
+      defaultOutput: 'src/app/layouts/auth',
+      tags: ['auth', 'login', 'signup', 'authentication'],
+      dependencies: ['@spartan-ng/helm/button', '@spartan-ng/helm/card', '@spartan-ng/helm/form-field']
+    }
+  ],
+  examples: {
+    all: {
+      name: 'all',
+      title: 'All Spartan-NG Examples',
+      description: 'Complete collection of 50+ Spartan-NG component examples with usage patterns and variants',
+      path: 'templates/spartan-examples',
+      defaultOutput: 'src/app/spartan-examples',
+      tags: ['examples', 'spartan-ng', 'all', 'reference'],
+      count: '50+',
+      purpose: 'Learning and reference for developers and LLMs'
+    },
+    components: [
+      {
+        name: 'accordion',
+        title: 'Accordion Examples',
+        description: 'Collapsible content sections examples',
+        path: 'templates/spartan-examples/components/(accordion)',
+        defaultOutput: 'src/app/examples/accordion',
+        tags: ['accordion', 'collapsible', 'expand']
+      },
+      {
+        name: 'alert',
+        title: 'Alert Examples',
+        description: 'Status messages and notifications examples',
+        path: 'templates/spartan-examples/components/(alert)',
+        defaultOutput: 'src/app/examples/alert',
+        tags: ['alert', 'notification', 'message']
+      },
+      {
+        name: 'alert-dialog',
+        title: 'Alert Dialog Examples',
+        description: 'Confirmation and alert dialogs examples',
+        path: 'templates/spartan-examples/components/(alert-dialog)',
+        defaultOutput: 'src/app/examples/alert-dialog',
+        tags: ['dialog', 'alert', 'confirmation', 'modal']
+      },
+      {
+        name: 'button',
+        title: 'Button Examples',
+        description: 'Interactive buttons with multiple variants examples',
+        path: 'templates/spartan-examples/components/(button)',
+        defaultOutput: 'src/app/examples/button',
+        tags: ['button', 'action', 'interactive']
+      },
+      {
+        name: 'card',
+        title: 'Card Examples',
+        description: 'Content containers with header, content, and footer examples',
+        path: 'templates/spartan-examples/components/(card)',
+        defaultOutput: 'src/app/examples/card',
+        tags: ['card', 'container', 'layout']
+      },
+      {
+        name: 'dialog',
+        title: 'Dialog Examples',
+        description: 'Modal dialogs and popups examples',
+        path: 'templates/spartan-examples/components/(dialog)',
+        defaultOutput: 'src/app/examples/dialog',
+        tags: ['dialog', 'modal', 'popup', 'overlay']
+      },
+      {
+        name: 'form-field',
+        title: 'Form Field Examples',
+        description: 'Complete form fields with validation examples',
+        path: 'templates/spartan-examples/components/(form-field)',
+        defaultOutput: 'src/app/examples/form-field',
+        tags: ['form', 'input', 'validation']
+      },
+      {
+        name: 'input',
+        title: 'Input Examples',
+        description: 'Form input fields examples',
+        path: 'templates/spartan-examples/components/(input)',
+        defaultOutput: 'src/app/examples/input',
+        tags: ['input', 'form', 'text']
+      },
+      {
+        name: 'select',
+        title: 'Select Examples',
+        description: 'Dropdown selection controls examples',
+        path: 'templates/spartan-examples/components/(select)',
+        defaultOutput: 'src/app/examples/select',
+        tags: ['select', 'dropdown', 'form']
+      },
+      {
+        name: 'table',
+        title: 'Table Examples',
+        description: 'Data tables examples',
+        path: 'templates/spartan-examples/components/(table)',
+        defaultOutput: 'src/app/examples/table',
+        tags: ['table', 'data', 'grid']
+      },
+      {
+        name: 'data-table',
+        title: 'Data Table Examples',
+        description: 'Advanced data tables with sorting and filtering examples',
+        path: 'templates/spartan-examples/components/(data-table)',
+        defaultOutput: 'src/app/examples/data-table',
+        tags: ['table', 'data', 'sorting', 'filtering', 'advanced']
+      }
+    ]
+  }
+};
+
+const REPO = 'gh:Genesis-Research/grg-kit';
+
+module.exports = { RESOURCES, REPO };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "grg-kit-cli",
+  "version": "0.1.0",
+  "description": "CLI tool for pulling GRG Kit resources into your Angular project",
+  "main": "index.js",
+  "bin": {
+    "grg": "./bin/grg.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "tailwind",
+    "spartan-ng",
+    "cli"
+  ],
+  "author": "Genesis Research",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Genesis-Research/grg-kit.git",
+    "directory": "cli"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "degit": "^2.8.4",
+    "chalk": "^4.1.2",
+    "ora": "^5.4.1"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}