grg-kit-cli 0.4.0 → 0.6.0

package/README.md

@@ -11,14 +11,17 @@ pnpm install -g grg-kit-cli
 ## Quick Start
 
 ```bash
-# Initialize a new Angular project with GRG Kit
-grg init my-app
+# Create Angular project first
+ng new my-app --style=css
+cd my-app
 
-# Initialize with a specific theme
-grg init my-app --theme claude
+# Initialize GRG Kit in the project
+grg init
 
-# Add blocks (inside project directory)
-cd my-app
+# Or with a specific theme
+grg init --theme claude
+
+# Add blocks
 grg add block --auth
 grg add block --shell
 grg add block --all
@@ -31,24 +34,27 @@ grg list themes
 
 ## Commands
 
-### `grg init <project-name>`
+### `grg init`
 
-Create a new Angular project with GRG Kit fully configured. One command to set up everything.
+Initialize GRG Kit in an existing Angular project.
 
 ```bash
-grg init <project-name> [options]
+grg init [options]
 
 Options:
   -t, --theme <name>  Theme to install (default: "grg-theme")
 
 Examples:
-  grg init my-app
-  grg init my-app --theme claude
-  grg init dashboard -t modern-minimal
+  grg init
+  grg init --theme claude
+  grg init -t modern-minimal
 ```
 
+**Prerequisites:**
+- Must be run inside an existing Angular project (with `angular.json`)
+- Create one with: `ng new my-app --style=css`
+
 **What it does:**
-- 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
@@ -98,19 +104,19 @@ Examples:
   grg list themes    # List all themes
 ```
 
-### `grg llm-prompts`
+### `grg llm-setup`
 
 Generate LLM-specific prompts and rules for AI assistants (Windsurf, Cursor, etc.).
 
 ```bash
-grg llm-prompts [options]
+grg llm-setup [options]
 
 Options:
   -o, --output <path>  Output directory for rules (default: ".windsurf/rules")
 
 Examples:
-  grg llm-prompts
-  grg llm-prompts --output .cursor/rules
+  grg llm-setup                    # Windsurf (multiple .md files)
+  grg llm-setup --output .claude   # Claude Code (single CLAUDE.md)
 ```
 
 ## MCP Server Integration
@@ -137,7 +143,7 @@ pnpm install -g @grg-kit/mcp-server
 }
 ```
 
-**Cursor** (`~/.cursor/mcp_config.json`):
+**Claude Code** (`~/.claude/settings.json`):
 
 ```json
 {
@@ -153,7 +159,7 @@ pnpm install -g @grg-kit/mcp-server
 
 ```bash
 cd your-angular-project
-grg llm-prompts
+grg llm-setup
 ```
 
 ### 4. Restart Your IDE
@@ -167,12 +173,15 @@ grg llm-prompts
 ## Quick Reference
 
 ```bash
-# Initialize project
-grg init my-app                        # Default theme
-grg init my-app --theme claude         # Custom theme
-
-# Add blocks (inside project directory)
+# Create Angular project first
+ng new my-app --style=css
 cd my-app
+
+# Initialize GRG Kit
+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
@@ -185,7 +194,7 @@ grg list blocks                 # Available blocks
 grg list themes                 # Available themes
 
 # AI setup
-grg llm-prompts                 # Generate AI rules
+grg llm-setup                   # Generate AI rules
 ```
 
 ## License

package/bin/grg.js

@@ -4,19 +4,19 @@ const { Command } = require('commander');
 const { add } = require('../commands/add');
 const { list } = require('../commands/list');
 const { init } = require('../commands/init');
-const { llmPrompts } = require('../commands/llm-prompts');
+const { llmPrompts } = require('../commands/llm-setup');
 
 const program = new Command();
 
 program
   .name('grg')
   .description('GRG Kit CLI - Initialize your Angular project with GRG Kit components and add blocks')
-  .version('0.3.0');
+  .version('0.5.0');
 
-// Init command - sets up everything in one shot
+// Init command - sets up GRG Kit in existing Angular project
 program
-  .command('init <project-name>')
-  .description('Initialize GRG Kit: creates Angular project with zoneless, sets up styles.css with theme, adds all components')
+  .command('init')
+  .description('Initialize GRG Kit in current Angular project: installs Tailwind CSS v4, Spartan-NG, theme, and examples')
   .option('-t, --theme <name>', 'Theme to install (grg-theme, claude, clean-slate, modern-minimal, amber-minimal, mocks)', 'grg-theme')
   .action(init);
 
@@ -39,9 +39,9 @@ program
   .description('List available blocks and components')
   .action(list);
 
-// LLM Prompts command
+// LLM Setup command
 program
-  .command('llm-prompts')
+  .command('llm-setup')
   .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);

package/commands/init.js

@@ -10,10 +10,12 @@ const { RESOURCES, REPO } = require('../config/resources');
 const execAsync = promisify(exec);
 
 /**
- * Init command - initializes GRG Kit in the project
- * Creates Angular project, installs Tailwind CSS v4, runs spartan-ng ui, downloads theme
+ * Init command - initializes GRG Kit in an existing Angular project
+ * Installs Tailwind CSS v4, runs spartan-ng ui, downloads theme
+ * 
+ * Prerequisites: Must be run inside an existing Angular project directory
  */
-async function init(projectName, options) {
+async function init(options) {
   const themeName = options.theme || 'grg-theme';
   const theme = RESOURCES.themes.find(t => t.name === themeName);
 
@@ -24,27 +26,26 @@ async function init(projectName, options) {
     process.exit(1);
   }
 
-  console.log(chalk.bold.cyan('\n🚀 Initializing GRG Kit\n'));
-  console.log(chalk.gray(`  Project: ${projectName}`));
-  console.log(chalk.gray(`  Theme: ${theme.title}\n`));
-
+  // Check if we're in an Angular project
   const spinner = ora();
-
-  // Step 1: Create Angular project
-  spinner.start(`Creating Angular project "${projectName}"...`);
+  spinner.start('Checking for Angular project...');
   try {
-    await execAsync(`ng new ${projectName} --style=css`, { stdio: 'pipe' });
-    spinner.succeed(chalk.green(`✓ Created Angular project "${projectName}"`));
+    await fs.access('angular.json');
+    spinner.succeed(chalk.green('✓ Angular project detected'));
   } catch (error) {
-    spinner.fail(chalk.red('Failed to create Angular project'));
-    console.error(chalk.red(error.message));
+    spinner.fail(chalk.red('Not an Angular project'));
+    console.error(chalk.red('\nError: angular.json not found'));
+    console.log(chalk.yellow('\nPlease run this command inside an existing Angular project:'));
+    console.log(chalk.cyan('  ng new my-app --style=css'));
+    console.log(chalk.cyan('  cd my-app'));
+    console.log(chalk.cyan('  grg init'));
     process.exit(1);
   }
 
-  // Change to project directory for remaining steps
-  process.chdir(projectName);
+  console.log(chalk.bold.cyan('\n🚀 Initializing GRG Kit\n'));
+  console.log(chalk.gray(`  Theme: ${theme.title}\n`));
 
-  // Step 2: Install Tailwind CSS v4
+  // Step 1: Install Tailwind CSS v4
   spinner.start('Installing Tailwind CSS v4...');
   try {
     await execAsync('pnpm install tailwindcss @tailwindcss/postcss postcss', { stdio: 'pipe' });
@@ -117,15 +118,39 @@ async function init(projectName, options) {
   }
 
   // Step 7: Run Spartan-NG UI generator (install all components)
+  // The spartan CLI prompts for component selection - we send 'a' to select all, then Enter
   spinner.start('Installing all Spartan-NG UI components...');
   try {
     const { spawn } = require('child_process');
     await new Promise((resolve, reject) => {
-      const child = spawn('pnpm', ['ng', 'g', '@spartan-ng/cli:ui', 'all', '--defaults'], {
-        stdio: 'inherit',
+      const child = spawn('pnpm', ['ng', 'g', '@spartan-ng/cli:ui'], {
+        stdio: ['pipe', 'pipe', 'pipe'],
         shell: true
       });
+
+      let output = '';
+      child.stdout.on('data', (data) => {
+        output += data.toString();
+        // When we see the prompt, send 'a' to select all, then Enter
+        if (output.includes('Choose which primitives')) {
+          child.stdin.write('a');
+          setTimeout(() => {
+            child.stdin.write('\n');
+          }, 100);
+        }
+      });
+
+      child.stderr.on('data', (data) => {
+        // Spartan CLI outputs progress to stderr
+        const text = data.toString();
+        if (text.includes('CREATE') || text.includes('UPDATE')) {
+          // Show progress dots
+          process.stdout.write('.');
+        }
+      });
+
       child.on('close', (code) => {
+        console.log(); // New line after progress dots
         if (code === 0) resolve();
         else reject(new Error(`Process exited with code ${code}`));
       });
@@ -219,12 +244,12 @@ async function init(projectName, options) {
   
   console.log(chalk.bold('Installed:'));
   console.log(chalk.gray('  Tailwind CSS:'), chalk.cyan('v4 with PostCSS'));
-  console.log(chalk.gray('  Spartan-NG:'), chalk.cyan('All UI components in libs/ui'));
+  console.log(chalk.gray('  Spartan-NG:'), chalk.cyan('All UI components in libs/spartan-ui'));
   console.log(chalk.gray('  Examples:'), chalk.cyan('56+ component examples in libs/examples'));
   console.log(chalk.gray('  Theme:'), chalk.cyan(theme.title));
   
   console.log(chalk.yellow('\nNext steps:'));
-  console.log(chalk.gray('  1.'), chalk.cyan(`cd ${projectName}`));
+  console.log(chalk.gray('  1. Run'), chalk.cyan('grg llm-setup'), chalk.gray('to generate AI assistant rules'));
   console.log(chalk.gray('  2. Run'), chalk.cyan('grg list blocks'), chalk.gray('to see available blocks'));
   console.log(chalk.gray('  3. Add blocks with'), chalk.cyan('grg add block --auth'));
   console.log();

package/commands/{llm-prompts.js → llm-setup.js}

@@ -5,16 +5,88 @@ const ora = require('ora');
 const { RESOURCES } = require('../config/resources');
 
 /**
- * LLM Prompts command - generates LLM-specific prompts and rules
+ * LLM Setup command - generates LLM-specific prompts and rules
  * Helps AI assistants understand GRG Kit design system and use MCP server
  */
 async function llmPrompts(options) {
   const outputDir = options.output || '.windsurf/rules';
+  const isClaudeOutput = outputDir.includes('.claude') || outputDir.includes('CLAUDE');
   
-  console.log(chalk.bold.cyan('\n🤖 Generating LLM Prompts and Rules\n'));
+  console.log(chalk.bold.cyan('\n🤖 Generating LLM Rules\n'));
+
+  const spinner = ora();
+
+  // For Claude Code, generate a single CLAUDE.md file
+  if (isClaudeOutput) {
+    // Step 1: Create output directory
+    spinner.start('Creating directory...');
+    try {
+      await fs.mkdir(outputDir, { recursive: true });
+      spinner.succeed(chalk.green(`✓ Created ${outputDir} directory`));
+    } catch (error) {
+      spinner.fail(chalk.red('Failed to create directory'));
+      console.error(chalk.red(error.message));
+      process.exit(1);
+    }
+
+    // Step 2: Check if CLAUDE.md already exists
+    const claudePath = path.join(outputDir, 'CLAUDE.md');
+    let existingContent = '';
+    let fileExists = false;
+    
+    try {
+      existingContent = await fs.readFile(claudePath, 'utf-8');
+      fileExists = true;
+    } catch (error) {
+      // File doesn't exist, that's fine
+    }
+
+    // Step 3: Generate CLAUDE.md (append GRG Kit section if file exists)
+    spinner.start(fileExists ? 'Updating CLAUDE.md...' : 'Generating CLAUDE.md...');
+    try {
+      const claudeContent = generateClaudeMdRules();
+      
+      if (fileExists) {
+        // Check if GRG Kit section already exists
+        if (existingContent.includes('# GRG Kit Project Rules')) {
+          // Replace existing GRG Kit section
+          const grgKitStart = existingContent.indexOf('# GRG Kit Project Rules');
+          const beforeGrgKit = existingContent.substring(0, grgKitStart).trim();
+          const newContent = beforeGrgKit ? `${beforeGrgKit}\n\n${claudeContent}` : claudeContent;
+          await fs.writeFile(claudePath, newContent);
+          spinner.succeed(chalk.green('✓ Updated GRG Kit section in CLAUDE.md'));
+        } else {
+          // Append GRG Kit section
+          const newContent = `${existingContent.trim()}\n\n${claudeContent}`;
+          await fs.writeFile(claudePath, newContent);
+          spinner.succeed(chalk.green('✓ Appended GRG Kit rules to existing CLAUDE.md'));
+        }
+      } else {
+        await fs.writeFile(claudePath, claudeContent);
+        spinner.succeed(chalk.green('✓ Generated CLAUDE.md'));
+      }
+    } catch (error) {
+      spinner.fail(chalk.red('Failed to generate CLAUDE.md'));
+      console.error(chalk.red(error.message));
+      process.exit(1);
+    }
+
+    // Success message for Claude
+    console.log(chalk.bold.green('\n✨ Claude Code rules generated successfully!\n'));
+    console.log(chalk.gray('File created:'));
+    console.log(chalk.cyan(`  ${outputDir}/CLAUDE.md`));
+    
+    console.log(chalk.yellow('\nNext steps:'));
+    console.log(chalk.gray('  1. The CLAUDE.md file will be automatically picked up by Claude Code'));
+    console.log(chalk.gray('  2. Make sure the grg-kit MCP server is configured'));
+    console.log(chalk.gray('  3. Claude will now check GRG Kit resources before writing custom code'));
+    console.log();
+    return;
+  }
 
+  // For Windsurf and other IDEs, generate multiple rule files
   // Step 1: Create output directory
-  const spinner = ora('Creating rules directory...').start();
+  spinner.start('Creating rules directory...');
   try {
     await fs.mkdir(outputDir, { recursive: true });
     spinner.succeed(chalk.green(`✓ Created ${outputDir} directory`));
@@ -64,16 +136,17 @@ async function llmPrompts(options) {
   }
 
   // Success message
-  console.log(chalk.bold.green('\n✨ LLM prompts and rules generated successfully!\n'));
+  console.log(chalk.bold.green('\n✨ LLM rules generated successfully!\n'));
   console.log(chalk.gray('Files created:'));
   console.log(chalk.cyan(`  ${outputDir}/design-system.md`));
   console.log(chalk.cyan(`  ${outputDir}/grg-kit-mcp.md`));
   console.log(chalk.cyan(`  ${outputDir}/angular-components.md`));
   
   console.log(chalk.yellow('\nNext steps:'));
-  console.log(chalk.gray('  1. These rules will be automatically picked up by Windsurf/Cascade'));
+  console.log(chalk.gray('  1. These rules will be automatically picked up by your AI assistant'));
   console.log(chalk.gray('  2. Make sure the grg-kit MCP server is configured in your IDE'));
   console.log(chalk.gray('  3. AI will now check GRG Kit resources before writing custom code'));
+  console.log(chalk.gray('\nSupported IDEs: Windsurf, Claude Code, Claude Desktop'));
   console.log();
 }
 
@@ -465,9 +538,11 @@ trigger: always_on
 
 ## Setup
 
-Add the grg-kit MCP server to your Windsurf configuration:
+Add the grg-kit MCP server to your AI assistant configuration:
 
-**File:** \`~/.codeium/windsurf/mcp_config.json\`
+**Windsurf:** \`~/.codeium/windsurf/mcp_config.json\`
+**Claude Code:** \`~/.claude/settings.json\`
+**Claude Desktop (macOS):** \`~/Library/Application Support/Claude/claude_desktop_config.json\`
 
 \`\`\`json
 {
@@ -480,7 +555,7 @@ Add the grg-kit MCP server to your Windsurf configuration:
 }
 \`\`\`
 
-After adding, restart Windsurf for the MCP server to be available.
+After adding, restart your IDE for the MCP server to be available.
 
 ## Important: Spartan-NG is Pre-installed
 
@@ -779,4 +854,135 @@ Use MCP only for:
 `;
 }
 
+function generateClaudeMdRules() {
+  // Generate a combined CLAUDE.md file for Claude Code
+  const themes = RESOURCES.themes || [];
+  const components = RESOURCES.components || [];
+  const blocks = RESOURCES.blocks || [];
+  
+  const themesList = themes.map(t => `- \`theme:${t.name}\` - ${t.description}`).join('\n');
+  const componentsList = components.map(c => `- \`component:${c.name}\` - ${c.description}`).join('\n');
+  const blocksList = blocks.map(b => `- \`block:${b.name}\` - ${b.description}`).join('\n');
+
+  return `# GRG Kit Project Rules
+
+This project uses **GRG Kit**, an Angular UI toolkit built on **Spartan-NG UI**.
+
+## Critical: Check GRG Kit First
+
+**BEFORE writing any UI component:**
+1. Use MCP tool \`mcp2_search_ui_resources\` to search for existing resources
+2. Check if a component, layout, or block already exists
+3. Only write custom code if no suitable resource exists
+
+## Architecture
+
+- **Spartan-NG** (\`@spartan-ng/helm\`): Pre-installed UI components with \`hlm\` prefix
+- **GRG Kit** (\`@grg-kit/ui\`): Custom components with \`grg-\` prefix
+- **Blocks**: Pre-built page layouts (auth, shell, settings)
+
+## Import Patterns
+
+**Spartan-NG:**
+\`\`\`typescript
+import { HlmButtonImports } from '@spartan-ng/helm/button';
+import { HlmCardImports } from '@spartan-ng/helm/card';
+import { BrnDialogImports } from '@spartan-ng/brain/dialog';
+import { HlmDialogImports } from '@spartan-ng/helm/dialog';
+\`\`\`
+
+**GRG Kit:**
+\`\`\`typescript
+import { GrgStepperImports } from '@grg-kit/ui/stepper';
+\`\`\`
+
+## Common Components
+
+**Button:**
+\`\`\`html
+<button hlmBtn>Default</button>
+<button hlmBtn variant="outline">Outline</button>
+<button hlmBtn variant="destructive">Destructive</button>
+\`\`\`
+
+**Card:**
+\`\`\`html
+<section hlmCard>
+  <div hlmCardHeader>
+    <h3 hlmCardTitle>Title</h3>
+    <p hlmCardDescription>Description</p>
+  </div>
+  <div hlmCardContent>Content</div>
+</section>
+\`\`\`
+
+**Form Field:**
+\`\`\`html
+<hlm-form-field>
+  <input hlmInput [formControl]="control" placeholder="Email" />
+  <hlm-error>Required</hlm-error>
+</hlm-form-field>
+\`\`\`
+
+**Dialog:**
+\`\`\`html
+<hlm-dialog>
+  <button brnDialogTrigger hlmBtn>Open</button>
+  <hlm-dialog-content *brnDialogContent="let ctx">
+    <hlm-dialog-header>
+      <h3 hlmDialogTitle>Title</h3>
+    </hlm-dialog-header>
+    <!-- content -->
+  </hlm-dialog-content>
+</hlm-dialog>
+\`\`\`
+
+**Icons:**
+\`\`\`typescript
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+
+@Component({
+  providers: [provideIcons({ lucideCheck })],
+  template: \`<ng-icon hlm name="lucideCheck" />\`
+})
+\`\`\`
+
+## MCP Server Tools
+
+Use the \`grg-kit\` MCP server for themes, blocks, and GRG Kit components:
+
+- \`mcp2_search_ui_resources({ query: "auth" })\` - Search resources
+- \`mcp2_suggest_resources({ requirement: "login page" })\` - Get suggestions
+- \`mcp2_install_resource({ resource: "block:auth" })\` - Install resource
+- \`mcp2_list_available_resources({ category: "all" })\` - List all
+
+## Available Resources
+
+### Themes
+${themesList}
+
+### GRG Kit Components
+${componentsList}
+
+### Blocks
+${blocksList}
+
+## Decision Tree
+
+- Need button, card, dialog, form field, table? → Use Spartan-NG (already installed)
+- Need page layout (dashboard, auth, settings)? → Use MCP: \`mcp2_search_ui_resources\`
+- Need theme? → Use MCP: \`mcp2_list_available_resources({ category: "themes" })\`
+- Need stepper, file-upload? → Use MCP: \`mcp2_search_ui_resources\`
+
+## Package Manager
+
+**ALWAYS use pnpm** instead of npm.
+
+## Styling
+
+Use TailwindCSS v4 for all styling. Prefer signals for state management.
+`;
+}
+
 module.exports = { llmPrompts };

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "grg-kit-cli",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "CLI tool for pulling GRG Kit resources into your Angular project",
   "main": "index.js",
   "bin": {
     "grg": "./bin/grg.js"
   },
+  "scripts": {
+    "generate": "node scripts/generate-resources.js",
+    "prepublishOnly": "npm run generate",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "keywords": [
     "angular",
     "ui",
@@ -30,9 +35,5 @@
   },
   "engines": {
     "node": ">=16.0.0"
-  },
-  "scripts": {
-    "generate": "node scripts/generate-resources.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}