grg-kit-cli 0.2.0 → 0.3.1

package/README.md

@@ -1,69 +1,59 @@
 # 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
 
 ```bash
-npm install -g grg-kit-cli
+pnpm install -g grg-kit-cli
 ```
 
 ## Quick Start
 
 ```bash
-# Interactive mode (easiest way to get started)
-grg
-# or
-grg interactive
-grg i
-
-# Or use direct commands
-grg init                    # Initialize with theme
-grg add theme:claude        # Add specific resources
-grg list                    # Browse available resources
-```
-
-## Commands
+# Initialize a new Angular project with GRG Kit
+grg init my-app
 
-### `grg` or `grg interactive` or `grg i`
+# Initialize with a specific theme
+grg init my-app --theme claude
 
-Interactive mode - browse and add resources with a guided interface.
+# Add blocks (inside project directory)
+cd my-app
+grg add block --auth
+grg add block --shell
+grg add block --all
 
-```bash
-grg
-grg interactive
-grg i
+# List available resources
+grg list
+grg list blocks
+grg list themes
 ```
 
-**What it does:**
-- Presents a simple menu to choose actions
-- Browse resources with descriptions
-- Select multiple examples at once
-- Minimal surface area, focused experience
-
-**Perfect for:**
-- First-time users
-- Exploring available resources
-- Quick resource selection
+## Commands
 
-### `grg init`
+### `grg init <project-name>`
 
-Initialize GRG Kit in your Angular project with themes directory and configuration.
+Create a new Angular project with GRG Kit fully configured. One command to set up everything.
 
 ```bash
-grg init [options]
+grg init <project-name> [options]
 
 Options:
   -t, --theme <name>  Theme to install (default: "grg-theme")
 
 Examples:
-  grg init
-  grg init --theme claude
-  grg init -t modern-minimal
+  grg init my-app
+  grg init my-app --theme claude
+  grg init dashboard -t modern-minimal
 ```
 
 **What it does:**
-- Creates `src/themes` directory
+- Creates Angular project with CSS styling
+- Installs Tailwind CSS v4 (`tailwindcss @tailwindcss/postcss postcss`)
+- Creates `.postcssrc.json` with PostCSS configuration
+- Installs and configures Spartan-NG CLI
+- Runs `ng g @spartan-ng/cli:ui all` to install all Spartan-NG UI components
+- Downloads 56+ Spartan-NG examples to `libs/examples`
 - Downloads the selected theme
 - Updates `src/styles.css` with theme import
 
@@ -75,187 +65,127 @@ 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
+pnpm 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
+**Cursor** (`~/.cursor/mcp_config.json`):
 
-# See all components
-grg list components
-
-# 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 my-app                        # Default theme
+grg init my-app --theme claude         # Custom theme
+
+# Add blocks (inside project directory)
+cd my-app
+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,53 +4,46 @@ 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 { interactive } = require('../commands/interactive');
+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.2');
+  .description('GRG Kit CLI - Initialize your Angular project with GRG Kit components and add blocks')
+  .version('0.3.0');
 
-// Interactive command (default if no args)
+// Init command - sets up everything in one shot
 program
-  .command('interactive', { isDefault: false })
-  .alias('i')
-  .description('Interactive mode - browse and add resources with a guided interface')
-  .action(interactive);
-
-// Init command
-program
-  .command('init')
-  .description('Initialize GRG Kit in your Angular project with themes directory and configuration')
+  .command('init <project-name>')
+  .description('Initialize GRG Kit: creates Angular project with zoneless, sets up styles.css with theme, adds all components')
   .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')
+// Add command with block subcommand
+const addCommand = program.command('add').description('Add resources to your project');
+
+addCommand
+  .command('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);
-
-// If no command provided, run interactive mode
-if (process.argv.length === 2) {
-  interactive();
-} else {
-  program.parse();
-}
+  .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 };