claude-code-templates 1.1.1 → 1.1.2

package/bin/create-claude-config.js

@@ -6,7 +6,7 @@ const boxen = require('boxen');
 const createClaudeConfig = require('../src/index');
 
 // ASCII Art for Claude Code Templates
-const banner = chalk.cyan(`
+const banner = chalk.hex('#D97706')(`
  ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗
 ██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝
 ██║     ██║     ███████║██║   ██║██║  ██║█████╗  
@@ -27,9 +27,8 @@ const banner = chalk.cyan(`
    ██║   ██╔══╝  ██║╚██╔╝██║██╔═══╝ ██║     ██╔══██║   ██║   ██╔══╝  ╚════██║
    ██║   ███████╗██║ ╚═╝ ██║██║     ███████╗██║  ██║   ██║   ███████╗███████║
    ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚══════╝
-`) + chalk.yellow(`
-                    🚀 Setup Claude Code for any project language 🚀
-`);
+`) +
+chalk.yellow('\n     🚀 Setup Claude Code for any project language 🚀');
 
 console.log(banner);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "CLI tool to setup Claude Code configurations for different programming languages",
   "main": "src/index.js",
   "bin": {
@@ -13,8 +13,8 @@
     "start": "node bin/create-claude-config.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "sync": "node scripts/sync-templates.js",
-    "presync": "echo \"🔄 Iniciando sincronización de plantillas...\"",
-    "postsync": "echo \"✅ Sincronización completada. Listo para publicar!\"",
+    "presync": "echo \"🔄 Starting template synchronization...\"",
+    "postsync": "echo \"✅ Synchronization completed. Ready to publish!\"",
     "prepublishOnly": "npm run sync"
   },
   "keywords": [

package/scripts/sync-templates.js

@@ -5,17 +5,17 @@ const path = require('path');
 const chalk = require('chalk');
 
 /**
- * Script para sincronizar las plantillas desde las carpetas root 
- * hacia cli-tool/templates/
+ * Script to synchronize templates from root folders 
+ * to cli-tool/templates/
  */
 
 async function syncTemplates() {
-  console.log(chalk.blue('🔄 Sincronizando plantillas...'));
+  console.log(chalk.blue('🔄 Synchronizing templates...'));
   
   const rootDir = path.join(__dirname, '..', '..');
   const templatesDir = path.join(__dirname, '..', 'templates');
   
-  // Lenguajes a sincronizar
+  // Languages to synchronize
   const languages = ['common', 'javascript-typescript', 'python', 'rust', 'go'];
   
   let totalCopied = 0;
@@ -26,26 +26,26 @@ async function syncTemplates() {
     const targetDir = path.join(templatesDir, language);
     
     if (!await fs.pathExists(sourceDir)) {
-      console.log(chalk.yellow(`⚠️  Carpeta source no existe: ${language}`));
+      console.log(chalk.yellow(`⚠️  Source folder does not exist: ${language}`));
       continue;
     }
     
-    console.log(chalk.cyan(`\n📂 Sincronizando ${language}...`));
+    console.log(chalk.cyan(`\n📂 Synchronizing ${language}...`));
     
-    // Limpiar directorio destino
+    // Clean destination directory
     if (await fs.pathExists(targetDir)) {
       await fs.remove(targetDir);
-      console.log(chalk.gray(`   🗑️  Directorio anterior eliminado`));
+      console.log(chalk.gray(`   🗑️  Previous directory removed`));
     }
     
-    // Copiar todo desde source
+    // Copy everything from source
     try {
       await fs.copy(sourceDir, targetDir, {
         filter: (src, dest) => {
-          // Filtrar archivos que no queremos copiar
+          // Filter files we don't want to copy
           const relativePath = path.relative(sourceDir, src);
           
-          // Excluir directorios y archivos específicos
+          // Exclude specific directories and files
           if (relativePath.includes('node_modules')) return false;
           if (relativePath.includes('.git')) return false;
           if (relativePath.includes('package-lock.json')) return false;
@@ -55,26 +55,26 @@ async function syncTemplates() {
         }
       });
       
-      // Contar archivos copiados
+      // Count copied files
       const stats = await getDirectoryStats(targetDir);
       totalCopied += stats.files;
       
-      console.log(chalk.green(`   ✅ ${stats.files} archivos copiados`));
+      console.log(chalk.green(`   ✅ ${stats.files} files copied`));
       
-      // Mostrar estructura copiada
+      // Show copied structure
       if (stats.files > 0) {
         await showDirectoryStructure(targetDir, '   ');
       }
       
     } catch (error) {
-      console.error(chalk.red(`   ❌ Error copiando ${language}:`), error.message);
+      console.error(chalk.red(`   ❌ Error copying ${language}:`), error.message);
     }
   }
   
-  console.log(chalk.green(`\n🎉 Sincronización completada!`));
-  console.log(chalk.white(`📊 Total de archivos sincronizados: ${totalCopied}`));
+  console.log(chalk.green(`\n🎉 Synchronization completed!`));
+  console.log(chalk.white(`📊 Total synchronized files: ${totalCopied}`));
   
-  // Verificar que no existan archivos hooks
+  // Verify that no hook files exist
   await cleanupOldReferences();
 }
 
@@ -118,7 +118,7 @@ async function showDirectoryStructure(dir, prefix = '') {
     if (stat.isDirectory()) {
       console.log(chalk.blue(`${prefix}${connector}${item}/`));
       if (item === '.claude' || item === 'commands') {
-        // Mostrar solo un nivel más para .claude y commands
+        // Show only one more level for .claude and commands
         const subItems = await fs.readdir(itemPath);
         const newPrefix = prefix + (isLast ? '    ' : '│   ');
         for (let j = 0; j < Math.min(subItems.length, 3); j++) {
@@ -127,7 +127,7 @@ async function showDirectoryStructure(dir, prefix = '') {
           console.log(chalk.gray(`${newPrefix}${subConnector}${subItem}`));
         }
         if (subItems.length > 3) {
-          console.log(chalk.gray(`${newPrefix}└── ... y ${subItems.length - 3} más`));
+          console.log(chalk.gray(`${newPrefix}└── ... and ${subItems.length - 3} more`));
         }
       }
     } else {
@@ -137,22 +137,22 @@ async function showDirectoryStructure(dir, prefix = '') {
 }
 
 async function cleanupOldReferences() {
-  console.log(chalk.yellow('\n🧹 Limpiando referencias obsoletas...'));
+  console.log(chalk.yellow('\n🧹 Cleaning up obsolete references...'));
   
   const templatesDir = path.join(__dirname, '..', 'templates');
   
-  // Buscar y eliminar directorios hooks
+  // Search and remove hooks directories
   const languages = ['javascript-typescript', 'python', 'common'];
   
   for (const language of languages) {
     const hooksDir = path.join(templatesDir, language, '.claude', 'hooks');
     if (await fs.pathExists(hooksDir)) {
       await fs.remove(hooksDir);
-      console.log(chalk.yellow(`   🗑️  Eliminado: ${language}/.claude/hooks/`));
+      console.log(chalk.yellow(`   🗑️  Removed: ${language}/.claude/hooks/`));
     }
   }
   
-  // Verificar archivos vacíos en commands
+  // Check for empty files in commands
   for (const language of languages) {
     const commandsDir = path.join(templatesDir, language, '.claude', 'commands');
     if (await fs.pathExists(commandsDir)) {
@@ -160,10 +160,10 @@ async function cleanupOldReferences() {
       for (const file of files) {
         const filePath = path.join(commandsDir, file);
         const stat = await fs.stat(filePath);
-        if (stat.size < 50) { // Archivos muy pequeños probablemente estén vacíos
+        if (stat.size < 50) { // Very small files are probably empty
           const content = await fs.readFile(filePath, 'utf8');
           if (content.trim().length < 10) {
-            console.log(chalk.yellow(`   ⚠️  Archivo posiblemente vacío: ${language}/.claude/commands/${file} (${stat.size} bytes)`));
+            console.log(chalk.yellow(`   ⚠️  Possibly empty file: ${language}/.claude/commands/${file} (${stat.size} bytes)`));
           }
         }
       }
@@ -171,10 +171,10 @@ async function cleanupOldReferences() {
   }
 }
 
-// Función para ejecutar la sincronización
+// Function to execute synchronization
 if (require.main === module) {
   syncTemplates().catch(error => {
-    console.error(chalk.red('❌ Error durante la sincronización:'), error);
+    console.error(chalk.red('❌ Error during synchronization:'), error);
     process.exit(1);
   });
 }

package/src/file-operations.js

@@ -23,25 +23,68 @@ async function copyTemplateFiles(templateConfig, targetDir) {
     console.log(chalk.yellow(`📁 Existing .claude directory backed up to .claude.backup`));
   }
   
-  // Copy base files (but skip .claude/commands for now)
+  // Copy base files and framework-specific files
   for (const file of templateConfig.files) {
     const sourcePath = path.join(templateDir, file.source);
     const destPath = path.join(targetDir, file.destination);
     
     try {
-      // Skip .claude/commands directories - we'll handle them separately
-      if (file.source.includes('.claude/commands')) {
-        continue;
-      }
-      
-      await fs.copy(sourcePath, destPath, { 
-        overwrite: true,
-        filter: (src) => {
-          // Skip commands directory during base copy
-          return !src.includes('.claude/commands');
+      // Handle framework-specific command files specially
+      if (file.source.includes('.claude/commands') && file.source.includes('examples/')) {
+        // This is a framework-specific commands directory - merge with existing commands
+        await fs.ensureDir(destPath);
+        
+        // Copy framework-specific commands to the commands directory
+        const frameworkFiles = await fs.readdir(sourcePath);
+        for (const frameworkFile of frameworkFiles) {
+          const srcFile = path.join(sourcePath, frameworkFile);
+          const destFile = path.join(destPath, frameworkFile);
+          await fs.copy(srcFile, destFile, { overwrite: true });
+        }
+        
+        console.log(chalk.green(`✓ Copied framework commands ${file.source} → ${file.destination}`));
+      } else if (file.source.includes('.claude') && !file.source.includes('examples/')) {
+        // This is base .claude directory - copy it but handle commands specially
+        await fs.copy(sourcePath, destPath, { 
+          overwrite: true,
+          filter: (src) => {
+            // Skip the commands directory itself - we'll handle it separately
+            return !src.endsWith('.claude/commands');
+          }
+        });
+        
+        // Now handle base commands specifically
+        const baseCommandsPath = path.join(sourcePath, 'commands');
+        const destCommandsPath = path.join(destPath, 'commands');
+        
+        if (await fs.pathExists(baseCommandsPath)) {
+          await fs.ensureDir(destCommandsPath);
+          
+          // Copy base commands, but exclude framework-specific ones that were moved
+          const baseCommands = await fs.readdir(baseCommandsPath);
+          const excludeCommands = ['react-component.md', 'route.md', 'api-endpoint.md']; // Commands moved to framework dirs
+          
+          for (const baseCommand of baseCommands) {
+            if (!excludeCommands.includes(baseCommand)) {
+              const srcFile = path.join(baseCommandsPath, baseCommand);
+              const destFile = path.join(destCommandsPath, baseCommand);
+              await fs.copy(srcFile, destFile, { overwrite: true });
+            }
+          }
         }
-      });
-      console.log(chalk.green(`✓ Copied ${file.source} → ${file.destination}`));
+        
+        console.log(chalk.green(`✓ Copied base configuration and commands ${file.source} → ${file.destination}`));
+      } else {
+        // Copy regular files (CLAUDE.md, settings.json, etc.)
+        await fs.copy(sourcePath, destPath, { 
+          overwrite: true,
+          filter: (src) => {
+            // Skip commands directory during regular copy - we handle them above
+            return !src.includes('.claude/commands');
+          }
+        });
+        console.log(chalk.green(`✓ Copied ${file.source} → ${file.destination}`));
+      }
     } catch (error) {
       console.error(chalk.red(`✗ Failed to copy ${file.source}:`), error.message);
       throw error;

package/src/index.js

@@ -5,7 +5,7 @@ const path = require('path');
 const ora = require('ora');
 const { detectProject } = require('./utils');
 const { getTemplateConfig } = require('./templates');
-const { createPrompts } = require('./prompts');
+const { createPrompts, interactivePrompts } = require('./prompts');
 const { copyTemplateFiles } = require('./file-operations');
 
 async function createClaudeConfig(options = {}) {
@@ -19,9 +19,6 @@ async function createClaudeConfig(options = {}) {
   const projectInfo = await detectProject(targetDir);
   spinner.succeed('Project detection complete');
   
-  // Create interactive prompts
-  const prompts = createPrompts(projectInfo, options);
-  
   let config;
   if (options.yes) {
     // Use defaults
@@ -31,8 +28,8 @@ async function createClaudeConfig(options = {}) {
       features: []
     };
   } else {
-    // Interactive prompts
-    config = await inquirer.prompt(prompts);
+    // Interactive prompts with back navigation
+    config = await interactivePrompts(projectInfo, options);
   }
   
   // Check if user confirmed the setup

package/src/prompts.js

@@ -1,7 +1,169 @@
 const chalk = require('chalk');
+const inquirer = require('inquirer');
 const { getAvailableLanguages, getFrameworksForLanguage } = require('./templates');
 const { getCommandsForLanguageAndFramework } = require('./command-scanner');
 
+async function interactivePrompts(projectInfo, options = {}) {
+  const state = {
+    currentStep: 0,
+    answers: {},
+    steps: []
+  };
+
+  // Build steps array based on options
+  if (!options.language) state.steps.push('language');
+  if (!options.framework) state.steps.push('framework');
+  state.steps.push('commands', 'confirm');
+
+  while (state.currentStep < state.steps.length) {
+    const stepName = state.steps[state.currentStep];
+    const result = await showStep(stepName, state.answers, projectInfo, options);
+    
+    if (result.action === 'back') {
+      if (state.currentStep > 0) {
+        state.currentStep--;
+        // Clear the answer for the step we're going back from
+        delete state.answers[stepName];
+      }
+    } else if (result.action === 'next') {
+      state.answers[stepName] = result.value;
+      state.currentStep++;
+    } else if (result.action === 'exit') {
+      return { confirm: false };
+    }
+  }
+
+  return state.answers;
+}
+
+async function showStep(stepName, currentAnswers, projectInfo, options) {
+  const stepConfig = getStepConfig(stepName, currentAnswers, projectInfo, options);
+  
+  if (!stepConfig) {
+    return { action: 'next', value: null };
+  }
+
+  // Add back option if not first step
+  const isFirstStep = stepName === 'language' || (options.language && stepName === 'framework') || 
+                      (options.language && options.framework && stepName === 'commands');
+  
+  if (!isFirstStep && stepConfig.type === 'list') {
+    stepConfig.choices = [
+      { value: '__back__', name: chalk.gray('← Back') },
+      new inquirer.Separator(),
+      ...stepConfig.choices
+    ];
+  }
+
+  const answer = await inquirer.prompt([stepConfig]);
+  const value = answer[stepName];
+
+  if (value === '__back__') {
+    return { action: 'back' };
+  }
+
+  return { action: 'next', value };
+}
+
+function getStepConfig(stepName, currentAnswers, projectInfo, options) {
+  switch (stepName) {
+    case 'language':
+      return {
+        type: 'list',
+        name: 'language',
+        message: 'Select your programming language:',
+        choices: getAvailableLanguages(),
+        default: projectInfo.detectedLanguage || 'common',
+        prefix: chalk.blue('🔤')
+      };
+
+    case 'framework':
+      const selectedLanguage = currentAnswers.language || options.language;
+      const frameworks = getFrameworksForLanguage(selectedLanguage);
+      
+      if (frameworks.length === 0) {
+        return null; // Skip this step
+      }
+      
+      return {
+        type: 'list',
+        name: 'framework',
+        message: 'Select your framework (optional):',
+        choices: [
+          { value: 'none', name: 'None / Generic' },
+          ...frameworks
+        ],
+        default: projectInfo.detectedFramework || 'none',
+        prefix: chalk.green('🎯')
+      };
+
+    case 'commands':
+      const commandLanguage = currentAnswers.language || options.language;
+      const commandFramework = currentAnswers.framework || options.framework;
+      
+      if (!commandLanguage || commandLanguage === 'common') {
+        return {
+          type: 'checkbox',
+          name: 'commands',
+          message: 'Select commands to include (use space to select):',
+          choices: [
+            {
+              value: 'basic-commands',
+              name: 'Basic development commands',
+              checked: true
+            }
+          ],
+          prefix: chalk.cyan('📋')
+        };
+      }
+      
+      const availableCommands = getCommandsForLanguageAndFramework(commandLanguage, commandFramework);
+      
+      return {
+        type: 'checkbox',
+        name: 'commands',
+        message: 'Select commands to include (use space to select, enter to continue):',
+        choices: availableCommands.map(cmd => ({
+          value: cmd.name,
+          name: `${cmd.displayName} - ${cmd.description}`,
+          checked: cmd.checked
+        })),
+        prefix: chalk.cyan('📋')
+      };
+
+    case 'confirm':
+      const confirmLanguage = currentAnswers.language || options.language || 'common';
+      const confirmFramework = currentAnswers.framework || options.framework || 'none';
+      const commandCount = currentAnswers.commands ? currentAnswers.commands.length : 0;
+      
+      let message = `Setup Claude Code for ${chalk.cyan(confirmLanguage)}`;
+      if (confirmFramework !== 'none') {
+        message += ` with ${chalk.green(confirmFramework)}`;
+      }
+      if (commandCount > 0) {
+        message += ` (${chalk.yellow(commandCount)} commands)`;
+      }
+      message += '?';
+      
+      return {
+        type: 'list',
+        name: 'confirm',
+        message,
+        choices: [
+          { value: '__back__', name: chalk.gray('← Back to modify settings') },
+          new inquirer.Separator(),
+          { value: true, name: chalk.green('✅ Yes, proceed with setup') },
+          { value: false, name: chalk.red('❌ No, cancel setup') }
+        ],
+        default: true,
+        prefix: chalk.red('🚀')
+      };
+
+    default:
+      return null;
+  }
+}
+
 function createPrompts(projectInfo, options = {}) {
   const prompts = [];
   
@@ -76,35 +238,6 @@ function createPrompts(projectInfo, options = {}) {
     }
   });
 
-  // Features selection
-  prompts.push({
-    type: 'checkbox',
-    name: 'features',
-    message: 'Select additional features:',
-    choices: [
-      {
-        value: 'git-hooks',
-        name: 'Git hooks integration',
-        checked: false
-      },
-      {
-        value: 'testing',
-        name: 'Enhanced testing commands',
-        checked: true
-      },
-      {
-        value: 'linting',
-        name: 'Code linting and formatting',
-        checked: true
-      },
-      {
-        value: 'debugging',
-        name: 'Debugging helpers',
-        checked: false
-      }
-    ],
-    prefix: chalk.yellow('⚙️')
-  });
   
   // Confirmation
   prompts.push({
@@ -152,5 +285,6 @@ function createProjectTypePrompt(detectedTypes) {
 
 module.exports = {
   createPrompts,
-  createProjectTypePrompt
+  createProjectTypePrompt,
+  interactivePrompts
 };

package/src/templates.js

@@ -15,7 +15,8 @@ const TEMPLATES_CONFIG = {
     description: 'Optimized for modern JS/TS development',
     files: [
       { source: 'javascript-typescript/CLAUDE.md', destination: 'CLAUDE.md' },
-      { source: 'javascript-typescript/.claude', destination: '.claude' }
+      { source: 'javascript-typescript/.claude', destination: '.claude' },
+      { source: 'javascript-typescript/.mcp.json', destination: '.mcp.json' }
     ],
     frameworks: {
       'react': {
@@ -26,11 +27,15 @@ const TEMPLATES_CONFIG = {
       },
       'vue': {
         name: 'Vue.js',
-        additionalFiles: []
+        additionalFiles: [
+          { source: 'javascript-typescript/examples/vue-app/.claude/commands', destination: '.claude/commands' }
+        ]
       },
       'angular': {
         name: 'Angular',
-        additionalFiles: []
+        additionalFiles: [
+          { source: 'javascript-typescript/examples/angular-app/.claude/commands', destination: '.claude/commands' }
+        ]
       },
       'node': {
         name: 'Node.js',
@@ -42,25 +47,12 @@ const TEMPLATES_CONFIG = {
   },
   'python': {
     name: 'Python',
-    description: 'Optimized for Python development',
+    description: 'Configuration for Python projects (Coming Soon)',
     files: [
-      { source: 'python/CLAUDE.md', destination: 'CLAUDE.md' },
-      { source: 'python/.claude', destination: '.claude' }
+      { source: 'common/CLAUDE.md', destination: 'CLAUDE.md' },
+      { source: 'common/.claude', destination: '.claude' }
     ],
-    frameworks: {
-      'django': {
-        name: 'Django',
-        additionalFiles: []
-      },
-      'flask': {
-        name: 'Flask',
-        additionalFiles: []
-      },
-      'fastapi': {
-        name: 'FastAPI',
-        additionalFiles: []
-      }
-    }
+    comingSoon: true
   },
   'rust': {
     name: 'Rust',

package/templates/javascript-typescript/examples/angular-app/.claude/commands/components.md

@@ -0,0 +1,63 @@
+# Angular Components
+
+Create Angular components for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize Angular components based on the requirements:
+
+1. **Analyze existing components**: Check current component patterns, naming conventions, and folder organization
+2. **Examine Angular setup**: Review project structure, module organization, and TypeScript configuration
+3. **Identify component type**: Determine the component category:
+   - Presentation components (dumb/pure components)
+   - Container components (smart components with state)
+   - Feature components (business logic components)
+   - Shared/UI components (reusable across features)
+   - Layout components (structural components)
+4. **Check dependencies**: Review existing components and shared modules to avoid duplication
+5. **Implement component**: Create component with proper TypeScript types and lifecycle hooks
+6. **Add inputs/outputs**: Define @Input and @Output properties with proper typing
+7. **Create template**: Build HTML template with proper Angular directives and bindings
+8. **Add styles**: Implement component styles following project's styling approach
+9. **Create tests**: Write comprehensive unit tests with TestBed and proper mocking
+10. **Update module**: Register component in appropriate Angular module
+
+## Implementation Requirements
+
+- Follow project's Angular architecture and naming conventions
+- Use proper component lifecycle hooks (OnInit, OnDestroy, etc.)
+- Include comprehensive TypeScript interfaces for inputs and outputs
+- Implement proper change detection strategy (OnPush when possible)
+- Add proper subscription management with takeUntil or async pipe
+- Follow Angular style guide and project coding standards
+- Consider component performance and memory management
+
+## Component Patterns to Consider
+
+Based on the request:
+- **Smart Components**: Container components that manage state and services
+- **Dumb Components**: Presentation components that only receive inputs
+- **Feature Components**: Components specific to business features
+- **Shared Components**: Reusable UI components across the application
+- **Form Components**: Reactive forms with validation and custom controls
+- **Data Display**: Components for tables, lists, cards with proper data binding
+
+## Angular-Specific Implementation
+
+- **Template Syntax**: Proper use of Angular directives (*ngFor, *ngIf, etc.)
+- **Data Binding**: Property binding, event binding, two-way binding
+- **Change Detection**: OnPush strategy for performance optimization
+- **Lifecycle Management**: Proper use of lifecycle hooks
+- **Dependency Injection**: Service injection in component constructors
+- **Testing**: TestBed configuration with proper mocking and spies
+
+## Important Notes
+
+- ALWAYS examine existing components first to understand project patterns
+- Use the same styling approach and class naming as existing components
+- Follow project's folder structure for components (usually feature-based)
+- Don't install new dependencies without asking
+- Consider component reusability and single responsibility principle
+- Add proper TypeScript types for all component properties and methods
+- Use trackBy functions for performance in *ngFor loops
+- Implement proper unsubscription patterns to prevent memory leaks