claude-code-templates 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "CLI tool to setup Claude Code configurations for different programming languages",
   "main": "src/index.js",
   "bin": {
@@ -11,7 +11,11 @@
   },
   "scripts": {
     "start": "node bin/create-claude-config.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "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!\"",
+    "prepublishOnly": "npm run sync"
   },
   "keywords": [
     "claude",
@@ -46,6 +50,7 @@
   "files": [
     "bin/",
     "src/",
+    "scripts/",
     "templates/",
     "README.md"
   ]

package/scripts/sync-templates.js

@@ -0,0 +1,182 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+
+/**
+ * Script para sincronizar las plantillas desde las carpetas root 
+ * hacia cli-tool/templates/
+ */
+
+async function syncTemplates() {
+  console.log(chalk.blue('🔄 Sincronizando plantillas...'));
+  
+  const rootDir = path.join(__dirname, '..', '..');
+  const templatesDir = path.join(__dirname, '..', 'templates');
+  
+  // Lenguajes a sincronizar
+  const languages = ['common', 'javascript-typescript', 'python', 'rust', 'go'];
+  
+  let totalCopied = 0;
+  let totalSkipped = 0;
+  
+  for (const language of languages) {
+    const sourceDir = path.join(rootDir, language);
+    const targetDir = path.join(templatesDir, language);
+    
+    if (!await fs.pathExists(sourceDir)) {
+      console.log(chalk.yellow(`⚠️  Carpeta source no existe: ${language}`));
+      continue;
+    }
+    
+    console.log(chalk.cyan(`\n📂 Sincronizando ${language}...`));
+    
+    // Limpiar directorio destino
+    if (await fs.pathExists(targetDir)) {
+      await fs.remove(targetDir);
+      console.log(chalk.gray(`   🗑️  Directorio anterior eliminado`));
+    }
+    
+    // Copiar todo desde source
+    try {
+      await fs.copy(sourceDir, targetDir, {
+        filter: (src, dest) => {
+          // Filtrar archivos que no queremos copiar
+          const relativePath = path.relative(sourceDir, src);
+          
+          // Excluir directorios y archivos específicos
+          if (relativePath.includes('node_modules')) return false;
+          if (relativePath.includes('.git')) return false;
+          if (relativePath.includes('package-lock.json')) return false;
+          if (relativePath.endsWith('.log')) return false;
+          
+          return true;
+        }
+      });
+      
+      // Contar archivos copiados
+      const stats = await getDirectoryStats(targetDir);
+      totalCopied += stats.files;
+      
+      console.log(chalk.green(`   ✅ ${stats.files} archivos copiados`));
+      
+      // Mostrar estructura copiada
+      if (stats.files > 0) {
+        await showDirectoryStructure(targetDir, '   ');
+      }
+      
+    } catch (error) {
+      console.error(chalk.red(`   ❌ Error copiando ${language}:`), error.message);
+    }
+  }
+  
+  console.log(chalk.green(`\n🎉 Sincronización completada!`));
+  console.log(chalk.white(`📊 Total de archivos sincronizados: ${totalCopied}`));
+  
+  // Verificar que no existan archivos hooks
+  await cleanupOldReferences();
+}
+
+async function getDirectoryStats(dir) {
+  let files = 0;
+  let dirs = 0;
+  
+  if (!await fs.pathExists(dir)) {
+    return { files: 0, dirs: 0 };
+  }
+  
+  const items = await fs.readdir(dir);
+  
+  for (const item of items) {
+    const itemPath = path.join(dir, item);
+    const stat = await fs.stat(itemPath);
+    
+    if (stat.isDirectory()) {
+      dirs++;
+      const subStats = await getDirectoryStats(itemPath);
+      files += subStats.files;
+      dirs += subStats.dirs;
+    } else {
+      files++;
+    }
+  }
+  
+  return { files, dirs };
+}
+
+async function showDirectoryStructure(dir, prefix = '') {
+  const items = await fs.readdir(dir);
+  
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const itemPath = path.join(dir, item);
+    const stat = await fs.stat(itemPath);
+    const isLast = i === items.length - 1;
+    const connector = isLast ? '└── ' : '├── ';
+    
+    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
+        const subItems = await fs.readdir(itemPath);
+        const newPrefix = prefix + (isLast ? '    ' : '│   ');
+        for (let j = 0; j < Math.min(subItems.length, 3); j++) {
+          const subItem = subItems[j];
+          const subConnector = j === Math.min(subItems.length, 3) - 1 ? '└── ' : '├── ';
+          console.log(chalk.gray(`${newPrefix}${subConnector}${subItem}`));
+        }
+        if (subItems.length > 3) {
+          console.log(chalk.gray(`${newPrefix}└── ... y ${subItems.length - 3} más`));
+        }
+      }
+    } else {
+      console.log(chalk.gray(`${prefix}${connector}${item}`));
+    }
+  }
+}
+
+async function cleanupOldReferences() {
+  console.log(chalk.yellow('\n🧹 Limpiando referencias obsoletas...'));
+  
+  const templatesDir = path.join(__dirname, '..', 'templates');
+  
+  // Buscar y eliminar directorios hooks
+  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/`));
+    }
+  }
+  
+  // Verificar archivos vacíos en commands
+  for (const language of languages) {
+    const commandsDir = path.join(templatesDir, language, '.claude', 'commands');
+    if (await fs.pathExists(commandsDir)) {
+      const files = await fs.readdir(commandsDir);
+      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
+          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)`));
+          }
+        }
+      }
+    }
+  }
+}
+
+// Función para ejecutar la sincronización
+if (require.main === module) {
+  syncTemplates().catch(error => {
+    console.error(chalk.red('❌ Error durante la sincronización:'), error);
+    process.exit(1);
+  });
+}
+
+module.exports = { syncTemplates };

package/templates/go/README.md

@@ -0,0 +1,25 @@
+# Go Claude Code Templates
+
+## Coming Soon! 🚧
+
+We're actively working on creating comprehensive Claude Code templates for Go development.
+
+### What to Expect
+- Best practices for Go project structure
+- Integration with popular Go tools and frameworks
+- Workflow optimizations for Go development
+- Testing and benchmarking configurations
+- Deployment and build automation
+
+### Meanwhile...
+You can use the [common templates](../common/README.md) as a starting point for your Go projects. The universal guidelines and git workflows will work well with Go development.
+
+### Stay Updated
+⭐ Star this repository to get notified when the Go templates are released!
+
+### Contributing
+Interested in helping build these templates? We welcome contributions! Please check the main repository's contribution guidelines and feel free to open an issue or pull request.
+
+---
+
+*Expected release: Coming soon*

package/templates/javascript-typescript/.claude/commands/api-endpoint.md

@@ -1 +1,51 @@
-# API Endpoint Command
+# API Endpoint Generator
+
+Generate a complete API endpoint for $ARGUMENTS following project conventions.
+
+## Task
+
+I'll analyze the project structure and create a new API endpoint with:
+
+1. Route definition
+2. Controller/handler function
+3. Input validation
+4. Service layer logic (if applicable)
+5. Data access layer (if applicable)
+6. Unit tests
+7. Documentation
+
+## Process
+
+I'll follow these steps:
+
+1. Examine the project structure to understand the architecture pattern
+2. Identify existing patterns for routes, controllers, and validation
+3. Create all necessary files following project conventions
+4. Implement the endpoint with proper error handling
+5. Add appropriate tests
+6. Document the new endpoint
+
+## Best Practices
+
+I'll ensure the implementation includes:
+
+- Strong typing with TypeScript
+- Comprehensive error handling
+- Input validation
+- Security considerations (authentication/authorization)
+- Proper logging
+- Performance considerations
+- Test coverage
+
+## Adaptability
+
+I'll adapt to various API architectures:
+
+- Express/Koa/Fastify REST APIs
+- GraphQL resolvers
+- Next.js/Nuxt.js API routes
+- Serverless functions
+- tRPC endpoints
+- NestJS controllers
+
+I'll examine your project first to determine which pattern to follow.

package/templates/javascript-typescript/.claude/commands/debug.md

@@ -1 +1,52 @@
-# Debug Command
+# Debug Assistant
+
+Help me debug the issue with $ARGUMENTS in this project.
+
+## Task
+
+I'll help you identify and fix the problem by:
+
+1. Understanding the issue description
+2. Analyzing relevant code
+3. Identifying potential causes
+4. Suggesting and implementing fixes
+5. Verifying the solution works
+
+## Process
+
+I'll follow these steps:
+
+1. Examine error messages, logs, or unexpected behaviors
+2. Locate relevant files and code sections
+3. Analyze the code flow and potential failure points
+4. Identify common JavaScript/TypeScript pitfalls that might apply
+5. Suggest specific fixes with explanations
+6. Help implement and test the solution
+
+## Debugging Techniques
+
+I'll apply appropriate debugging techniques such as:
+
+- Static code analysis to find syntax or type errors
+- Runtime error analysis from logs or stack traces
+- Control flow tracing to understand execution paths
+- State inspection to identify incorrect values
+- Dependency analysis to find version conflicts
+- Network request inspection for API issues
+- Browser console analysis for frontend problems
+- Database query inspection for data issues
+
+## Common Issues I Can Help With
+
+- Type errors and null/undefined issues
+- Asynchronous code problems (Promises, async/await)
+- React/Vue/Angular component lifecycle issues
+- API integration problems
+- State management bugs
+- Performance bottlenecks
+- Memory leaks
+- Build/compilation errors
+- Testing failures
+- Environment configuration issues
+
+I'll adapt my approach based on your specific project structure, frameworks, and the nature of the problem.

package/templates/javascript-typescript/.claude/commands/lint.md

@@ -1 +1,48 @@
-# Lint Command
+# Lint Assistant
+
+Analyze and fix linting issues in $ARGUMENTS following project conventions.
+
+## Task
+
+I'll help you identify and fix code style and quality issues by:
+
+1. Running appropriate linters for the project
+2. Analyzing linting errors and warnings
+3. Fixing issues automatically when possible
+4. Explaining complex issues that require manual intervention
+5. Ensuring code follows project style guidelines
+
+## Process
+
+I'll follow these steps:
+
+1. Identify the linting tools used in the project (ESLint, Prettier, TSLint, etc.)
+2. Run the appropriate linting commands
+3. Parse and categorize the results
+4. Apply automatic fixes for common issues
+5. Provide explanations and suggestions for more complex problems
+6. Verify fixes don't introduce new issues
+
+## Common Linting Issues I Can Fix
+
+- Code style inconsistencies (spacing, indentation, quotes, etc.)
+- Unused variables and imports
+- Missing type annotations in TypeScript
+- Accessibility (a11y) issues in UI components
+- Potential bugs flagged by static analysis
+- Performance issues in React/Vue components
+- Security vulnerabilities detected by linters
+- Deprecated API usage
+- Import ordering problems
+- Missing documentation
+
+## Linting Tools I Can Work With
+
+- ESLint (with various plugins and configs)
+- Prettier
+- TSLint (legacy)
+- stylelint (for CSS/SCSS)
+- commitlint (for commit messages)
+- Custom lint rules specific to your project
+
+I'll adapt my approach based on your project's specific linting configuration and style guide requirements.

package/templates/javascript-typescript/.claude/commands/npm-scripts.md

@@ -1 +1,48 @@
-# NPM Scripts Command
+# NPM Scripts Assistant
+
+Help me with NPM scripts: $ARGUMENTS
+
+## Task
+
+I'll help you work with package.json scripts by:
+
+1. Analyzing existing npm scripts in your project
+2. Creating new scripts or modifying existing ones
+3. Explaining what specific scripts do
+4. Suggesting improvements or optimizations
+5. Troubleshooting script execution issues
+
+## Process
+
+I'll follow these steps:
+
+1. Examine your package.json file to understand current scripts
+2. Analyze dependencies and devDependencies for available tools
+3. Identify common patterns and conventions in your scripts
+4. Implement requested changes or create new scripts
+5. Provide explanations of how the scripts work
+6. Test scripts when possible to verify functionality
+
+## Common Script Types I Can Help With
+
+- Build processes (webpack, rollup, esbuild, etc.)
+- Development servers and hot reloading
+- Testing (unit, integration, e2e)
+- Linting and code formatting
+- Type checking
+- Deployment and CI/CD
+- Database migrations
+- Code generation
+- Environment setup
+- Pre/post hooks for git operations
+
+## Script Optimization Techniques
+
+- Parallelizing tasks for faster execution
+- Adding cross-platform compatibility
+- Improving error reporting and logging
+- Implementing watch modes for development
+- Creating composite scripts for common workflows
+- Adding appropriate exit codes for CI/CD pipelines
+
+I'll adapt my approach based on your project's specific needs, dependencies, and build tools.

package/templates/javascript-typescript/.claude/commands/react-component.md

@@ -1 +1,54 @@
-# React Component Command
+# React Component Generator
+
+Create a React component for $ARGUMENTS following project conventions.
+
+## Task
+
+I'll help you create a complete React component by:
+
+1. Analyzing your project structure and conventions
+2. Creating component files with appropriate organization
+3. Implementing the component with proper TypeScript types
+4. Adding styles according to your project's styling approach
+5. Creating tests for the component
+6. Adding documentation and usage examples
+
+## Process
+
+I'll follow these steps:
+
+1. Examine your project to understand component patterns and conventions
+2. Identify the styling approach (CSS/SCSS modules, styled-components, Tailwind, etc.)
+3. Determine testing frameworks and patterns
+4. Create the component with appropriate file structure
+5. Implement component logic, props interface, and styling
+6. Add comprehensive tests
+7. Document the component's usage and props
+
+## Component Features
+
+I can implement various component types and features:
+
+- Functional components with hooks
+- TypeScript interfaces for props and state
+- Proper prop validation and defaults
+- Responsive design considerations
+- Accessibility (a11y) best practices
+- Performance optimizations (memoization, etc.)
+- Error boundaries when appropriate
+- Loading and error states
+- Animation and transition effects
+
+## Component Architecture Patterns
+
+I'll adapt to your project's component architecture:
+
+- Atomic Design methodology (atoms, molecules, organisms)
+- Feature-based organization
+- Container/Presentational pattern
+- Compound components
+- Render props pattern
+- Higher-Order Components (HOCs)
+- Custom hooks for logic extraction
+
+I'll analyze your existing components to match your project's specific patterns and conventions.

package/templates/javascript-typescript/.claude/commands/refactor.md

@@ -1 +1,55 @@
-# Refactor Command
+# Code Refactoring Assistant
+
+Refactor $ARGUMENTS following modern JavaScript/TypeScript best practices.
+
+## Task
+
+I'll help you refactor code by:
+
+1. Analyzing the current implementation
+2. Identifying improvement opportunities
+3. Applying modern patterns and practices
+4. Maintaining existing functionality
+5. Ensuring type safety and test coverage
+6. Documenting the changes made
+
+## Process
+
+I'll follow these steps:
+
+1. Examine the code to understand its purpose and structure
+2. Identify code smells, anti-patterns, or outdated approaches
+3. Plan the refactoring strategy with clear goals
+4. Implement changes incrementally while maintaining behavior
+5. Verify refactored code with tests
+6. Document improvements and benefits
+
+## Refactoring Techniques
+
+I can apply various refactoring techniques:
+
+- Converting to modern JavaScript/TypeScript features
+- Improving type definitions and type safety
+- Extracting reusable functions and components
+- Applying design patterns appropriately
+- Converting callbacks to Promises or async/await
+- Simplifying complex conditionals and loops
+- Removing duplicate code
+- Improving naming and readability
+- Optimizing performance
+- Enhancing error handling
+
+## Modern Practices I Can Apply
+
+- ES modules and import/export syntax
+- Optional chaining and nullish coalescing
+- Array and object destructuring
+- Spread and rest operators
+- Template literals
+- Arrow functions
+- Class fields and private methods
+- TypeScript utility types
+- Functional programming patterns
+- React hooks (for React components)
+
+I'll ensure the refactored code maintains compatibility with your project's requirements while improving quality and maintainability.

package/templates/javascript-typescript/.claude/commands/test.md

@@ -1 +1,61 @@
-# Test Command
+# Test Assistant
+
+Help with tests for $ARGUMENTS following project conventions and testing best practices.
+
+## Task
+
+I'll help you with testing by:
+
+1. Creating comprehensive test suites for your code
+2. Implementing different types of tests (unit, integration, e2e)
+3. Mocking dependencies and external services
+4. Improving test coverage for existing code
+5. Troubleshooting failing tests
+6. Setting up testing infrastructure
+
+## Process
+
+I'll follow these steps:
+
+1. Examine your project to understand testing frameworks and patterns
+2. Analyze the code to be tested to understand its functionality
+3. Identify appropriate testing strategies and edge cases
+4. Implement tests with proper structure and assertions
+5. Ensure tests are maintainable and follow best practices
+6. Run tests to verify they pass and provide adequate coverage
+
+## Testing Frameworks I Can Work With
+
+- Jest, Vitest, Mocha, Jasmine for JavaScript/TypeScript
+- React Testing Library, Enzyme for React components
+- Cypress, Playwright, Puppeteer for E2E testing
+- Supertest, Pactum for API testing
+- Storybook for component testing
+- Testing-library family for various frameworks
+
+## Testing Techniques
+
+I can implement various testing approaches:
+
+- TDD (Test-Driven Development)
+- BDD (Behavior-Driven Development)
+- Snapshot testing
+- Property-based testing
+- Parameterized tests
+- Contract testing
+- Visual regression testing
+- Performance testing
+
+## Mocking Strategies
+
+I can help with different mocking approaches:
+
+- Function mocks and spies
+- Module mocks
+- HTTP request mocking
+- Browser API mocking
+- Timer mocking
+- Database mocking
+- Service worker mocking
+
+I'll adapt to your project's specific testing frameworks, patterns, and conventions to ensure consistency with your existing codebase.

package/templates/javascript-typescript/.claude/commands/typescript-migrate.md

@@ -1 +1,51 @@
-# TypeScript Migrate Command
+# TypeScript Migration Assistant
+
+Migrate $ARGUMENTS from JavaScript to TypeScript with proper typing and modern practices.
+
+## Task
+
+I'll help you migrate JavaScript code to TypeScript by:
+
+1. Converting JavaScript files to TypeScript (.js/.jsx to .ts/.tsx)
+2. Adding appropriate type definitions and interfaces
+3. Configuring TypeScript settings for your project
+4. Resolving type errors and compatibility issues
+5. Implementing modern TypeScript patterns and features
+6. Ensuring backward compatibility with existing code
+
+## Process
+
+I'll follow these steps:
+
+1. Examine your project structure and dependencies
+2. Analyze the JavaScript code to understand its functionality
+3. Create or update tsconfig.json with appropriate settings
+4. Convert files to TypeScript with proper type annotations
+5. Add necessary type definitions for libraries
+6. Fix type errors and implement type safety
+7. Refactor code to leverage TypeScript features
+
+## TypeScript Features I Can Implement
+
+- Interfaces and type aliases for complex data structures
+- Generics for reusable, type-safe components and functions
+- Union and intersection types for flexible typing
+- Enums for related constants
+- Utility types (Partial, Pick, Omit, etc.)
+- Type guards and type narrowing
+- Mapped and conditional types
+- Function overloading
+- Readonly properties and immutability
+- Module augmentation for extending third-party types
+
+## Migration Strategies
+
+I can apply different migration approaches based on your needs:
+
+- Gradual migration with allowJs and incremental adoption
+- File-by-file conversion while maintaining functionality
+- Comprehensive migration with full type safety
+- Hybrid approach with .d.ts files for complex modules
+- Integration with existing type definitions (@types packages)
+
+I'll adapt to your project's specific requirements and ensure a smooth transition to TypeScript while maintaining existing functionality.

package/templates/javascript-typescript/.claude/settings.json

@@ -49,7 +49,17 @@
         "hooks": [
           {
             "type": "command",
-            "command": "if [[ \"$(jq -r '.tool_input.file_path' | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$')\" != \"\" && $(jq -r '.tool_input.content' | grep -E 'console\\.log') != \"\" ]]; then echo 'Warning: console.log statements should be removed before committing' >&2; fi"
+            "command": "if [[ \"$(echo $STDIN_JSON | jq -r '.tool_input.file_path' | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$')\" != \"\" && $(echo $STDIN_JSON | jq -r '.tool_input.content' | grep -E 'console\\.log') != \"\" ]]; then echo 'Warning: console.log statements should be removed before committing' >&2; exit 2; fi"
+          }
+        ]
+      },
+      {
+        "matcher": "Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" == \"package.json\" ]]; then echo 'Checking for vulnerable dependencies...'; npx audit-ci --moderate; fi",
+            "timeout": 60
           }
         ]
       }
@@ -70,10 +80,29 @@
         "hooks": [
           {
             "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(ts|tsx)$ ]]; then npx tsc --noEmit; fi",
+            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(ts|tsx)$ ]]; then RESULT=$(npx tsc --noEmit 2>&1); if [ $? -ne 0 ]; then echo \"TypeScript errors found: $RESULT\" >&2; exit 2; fi; fi",
             "timeout": 30
           }
         ]
+      },
+      {
+        "matcher": "Write|Edit|MultiEdit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(ts|tsx)$ ]] && grep -q 'import.*from.*\\*' \"$FILE\"; then echo 'Warning: Avoid wildcard imports for better tree-shaking' >&2; exit 2; fi"
+          }
+        ]
+      },
+      {
+        "matcher": "Write|Edit|MultiEdit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ && \"$FILE\" != *\".test.\"* && \"$FILE\" != *\".spec.\"* ]]; then TEST_FILE=$(echo \"$FILE\" | sed -E 's/\\.(js|jsx|ts|tsx)$/.test.\\1/'); if [ -f \"$TEST_FILE\" ]; then echo \"Running tests for modified file...\"; npx jest \"$TEST_FILE\" --passWithNoTests; fi; fi",
+            "timeout": 60
+          }
+        ]
       }
     ],
     "Notification": [
@@ -97,6 +126,16 @@
             "timeout": 60
           }
         ]
+      },
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "if [[ -f package.json && $(git status --porcelain | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$') ]]; then echo 'Analyzing bundle size impact...'; npx bundlesize; fi",
+            "timeout": 60
+          }
+        ]
       }
     ]
   }

package/templates/javascript-typescript/.mcp.json

@@ -0,0 +1,13 @@
+{
+    "mcpServers": {
+        "Deep Graph MCP": {
+            "command": "npx",
+            "args": [
+                "-y", 
+                "mcp-code-graph@latest", 
+                "username/repository-name",
+                "username2/repository-name2"
+            ]
+        }
+    }
+}

package/templates/javascript-typescript/README.md

@@ -1,233 +1,259 @@
-# JavaScript/TypeScript Claude Code Templates
+# JavaScript/TypeScript Templates
 
-This template provides optimized Claude Code configurations for JavaScript and TypeScript development, including modern frameworks like React, Vue, Node.js, and more.
+**Claude Code configuration template optimized for modern JavaScript and TypeScript development**
 
-## Quick Start
+This folder contains a comprehensive Claude Code template specifically designed for JavaScript and TypeScript projects, supporting popular frameworks like React, Vue.js, Angular, and Node.js.
 
-### Installation
-Copy the template files to your JavaScript/TypeScript project:
+## 📁 What's in This Folder
 
-```bash
-# Copy all template files
-cp -r claude-code-templates/javascript-typescript/* your-project/
+This template provides the foundation for JavaScript/TypeScript development with Claude Code:
 
-# Or copy specific files
-cp claude-code-templates/javascript-typescript/CLAUDE.md your-project/
-cp -r claude-code-templates/javascript-typescript/.claude/ your-project/
-```
+### 📄 Files Included
+- **`CLAUDE.md`** - Complete JavaScript/TypeScript development guidance for Claude Code
+- **`README.md`** - This documentation file
 
-### Usage
-Navigate to your project and start Claude Code:
-
-```bash
-cd your-project
-claude
-```
-
-Use the included custom commands:
-```bash
-# Run tests
-/test
-
-# Run linting
-/lint
-
-# Create React component
-/react-component
+### 🎯 Template Features
+When you use this template with the installer, it automatically creates:
+- **`.claude/settings.json`** - Optimized settings for JS/TS projects
+- **`.claude/commands/`** - Ready-to-use commands for common tasks
 
-# Debug application
-/debug
-```
+## 🚀 How to Use This Template
 
-## What's Included
+### Option 1: Automated Installation (Recommended)
+Use the CLI installer to automatically set up this template in your project:
 
-### Core Configuration
-- **`CLAUDE.md`** - Comprehensive guidance for JavaScript/TypeScript development
-- **`.claude/settings.json`** - Optimized settings for JS/TS projects
-- **Custom Commands** - Pre-configured commands for common development tasks
-
-### Development Hooks
-- **`format-on-save.json`** - Automatically format code with Prettier
-- **`lint-on-save.json`** - Run ESLint on file changes
-- **`typescript-check.json`** - Verify TypeScript types on save
-
-### Custom Commands
-- **`test.md`** - Execute tests with Jest, Vitest, or other frameworks
-- **`lint.md`** - Run ESLint with customizable rules
-- **`debug.md`** - Debug Node.js applications and browser code
-- **`refactor.md`** - Refactor code with AI assistance
-- **`typescript-migrate.md`** - Migrate JavaScript files to TypeScript
-- **`npm-scripts.md`** - Manage and execute npm scripts
-- **`react-component.md`** - Generate React components with best practices
-- **`api-endpoint.md`** - Create API endpoints for Node.js applications
-
-### Project Examples
-- **React App** - Configuration for React applications
-- **Node.js API** - Configuration for backend API development
-
-## Framework-Specific Setup
-
-### React Projects
 ```bash
-# Copy React-specific configuration
-cp -r claude-code-templates/javascript-typescript/examples/react-app/.claude/ your-react-app/
+cd your-javascript-project
+npx claude-code-templates --language javascript-typescript
 ```
 
-Additional commands for React:
-- `/component` - Create React components
-- `/hooks` - Generate custom React hooks
-
-### Node.js API Projects
-```bash
-# Copy Node.js-specific configuration
-cp -r claude-code-templates/javascript-typescript/examples/node-api/.claude/ your-api-project/
-```
+The installer will:
+- Copy the `CLAUDE.md` file to your project
+- Auto-detect your framework (React, Vue, Node.js, etc.)
+- Create appropriate `.claude/` configuration files
+- Set up framework-specific commands
+- Configure development workflows
 
-Additional commands for Node.js:
-- `/route` - Create API routes
-- `/middleware` - Generate middleware functions
+### Option 2: Manual Installation
+Copy the template manually for more control:
 
-## Supported Tools and Frameworks
+```bash
+# Clone the repository
+git clone https://github.com/danipower/claude-code-templates.git
 
-### Package Managers
-- **npm** - Node Package Manager
-- **yarn** - Fast, reliable package manager
-- **pnpm** - Efficient package manager
+# Copy the JavaScript/TypeScript template
+cp claude-code-templates/javascript-typescript/CLAUDE.md your-project/
 
-### Build Tools
-- **Vite** - Next generation frontend tooling
-- **Webpack** - Module bundler
-- **Rollup** - Module bundler for libraries
-- **esbuild** - Extremely fast JavaScript bundler
+# Then use the CLI to complete the setup
+cd your-project
+npx claude-code-templates --language javascript-typescript
+```
 
-### Testing Frameworks
-- **Jest** - JavaScript testing framework
-- **Vitest** - Fast unit test framework
-- **Testing Library** - Testing utilities
-- **Cypress** - End-to-end testing
-- **Playwright** - Cross-browser testing
+## 🎨 Framework Support
 
-### Code Quality
-- **ESLint** - JavaScript/TypeScript linter
-- **Prettier** - Code formatter
-- **TypeScript** - Static type checking
-- **Husky** - Git hooks
+This template automatically configures Claude Code for:
 
 ### Frontend Frameworks
-- **React** - UI library
-- **Vue.js** - Progressive framework
-- **Angular** - Full-featured framework
-- **Svelte** - Compile-time framework
+- **React** - Components, hooks, JSX, testing with React Testing Library
+- **Vue.js** - Composition API, single-file components, state management
+- **Angular** - TypeScript-first development, RxJS patterns, CLI integration
+- **Svelte** - Compile-time optimizations, modern JavaScript patterns
 
 ### Backend Frameworks
-- **Express.js** - Web framework for Node.js
-- **Fastify** - Fast and low overhead web framework
-- **Koa** - Lightweight web framework
-- **NestJS** - Progressive Node.js framework
-
-## Common Development Workflows
-
-### Setting Up a New Project
-1. Initialize project: `npm init` or `yarn init`
-2. Install dependencies: `npm install` or `yarn install`
-3. Copy Claude Code templates
-4. Configure ESLint and Prettier
-5. Set up testing framework
-6. Configure build tools
-
-### Daily Development
-1. Start development server: `npm run dev`
-2. Use Claude Code commands for common tasks
-3. Run tests: `/test`
-4. Format and lint code: `/lint`
-5. Debug issues: `/debug`
-
-### Code Quality Checks
-1. Type checking: `npm run typecheck`
-2. Linting: `npm run lint`
-3. Testing: `npm run test`
-4. Build verification: `npm run build`
-
-## Customization
-
-### Modifying Commands
-Edit files in `.claude/commands/` to customize commands for your workflow:
+- **Express.js** - RESTful APIs, middleware, error handling
+- **Fastify** - High-performance Node.js applications
+- **NestJS** - Enterprise-grade TypeScript framework
+- **Next.js** - Full-stack React applications with SSR/SSG
+
+### Build Tools & Testing
+- **Vite, Webpack, esbuild** - Modern build tool configurations
+- **Jest, Vitest, Cypress** - Testing framework optimization
+- **ESLint, Prettier, TypeScript** - Code quality and formatting
+
+## 🛠️ Commands Created by the Template
+
+When installed, this template provides commands for:
+
+### 🧪 Testing & Quality
+- **`/test`** - Run tests with Jest, Vitest, or other frameworks
+- **`/lint`** - ESLint with auto-fix capabilities
+- **`/typescript-migrate`** - Convert JavaScript files to TypeScript
+
+### 🔧 Development Tools
+- **`/debug`** - Debug Node.js applications and browser code
+- **`/refactor`** - AI-assisted code refactoring
+- **`/npm-scripts`** - Manage and execute npm/yarn scripts
+
+### ⚡ Framework-Specific Commands
+- **`/react-component`** - Generate React components (React projects)
+- **`/api-endpoint`** - Create Express.js endpoints (Node.js projects)
+- **`/route`** - Create API routes (Node.js projects)
+- **`/component`** - Create components (React/Vue projects)
+
+## 🎯 What Happens When You Install
+
+### Step 1: Framework Detection
+The installer analyzes your project to detect:
+- Package.json dependencies
+- Project structure
+- Framework type (React, Vue, Angular, Node.js)
+
+### Step 2: Template Configuration  
+Based on detection, it creates:
+```
+your-project/
+├── CLAUDE.md                    # Copied from this template
+├── .claude/
+│   ├── settings.json           # Framework-specific settings
+│   └── commands/               # Commands for your framework
+│       ├── test.md
+│       ├── lint.md
+│       ├── debug.md
+│       └── [framework-specific commands]
+```
 
+### Step 3: Framework Customization
+For specific frameworks, additional commands are added:
+
+**React Projects:**
+- Component generation with TypeScript support
+- React hooks creation and management
+- Testing with React Testing Library patterns
+
+**Node.js Projects:**
+- RESTful API endpoint creation
+- Middleware development patterns
+- Database integration helpers
+
+**Vue.js Projects:**
+- Single-file component templates
+- Composition API patterns
+- Vue 3 best practices
+
+## 📚 What's in the CLAUDE.md File
+
+The `CLAUDE.md` file in this folder contains comprehensive guidance for:
+
+### Development Commands
+- Package management (npm, yarn, pnpm)
+- Build commands (dev, build, preview)
+- Testing commands (unit, integration, e2e)
+- Code quality commands (lint, format, typecheck)
+
+### Technology Stack Guidelines
+- JavaScript/TypeScript best practices
+- Framework-specific patterns (React, Vue, Angular, Node.js)
+- Build tools configuration (Vite, Webpack, esbuild)
+- Testing frameworks (Jest, Vitest, Cypress, Playwright)
+
+### Project Structure Recommendations
+- File organization patterns
+- Naming conventions
+- TypeScript configuration
+- Code quality standards
+
+### Performance & Security
+- Bundle optimization strategies
+- Runtime performance tips
+- Security best practices
+- Dependency management
+
+## 🚀 Getting Started
+
+1. **Navigate to your JavaScript/TypeScript project:**
+   ```bash
+   cd your-project
+   ```
+
+2. **Run the installer:**
+   ```bash
+   npx claude-code-templates --language javascript-typescript
+   ```
+
+3. **Start Claude Code:**
+   ```bash
+   claude
+   ```
+
+4. **Try the commands:**
+   ```bash
+   /test          # Run your tests
+   /lint          # Check code quality
+   /component     # Create components (React/Vue)
+   /route         # Create API routes (Node.js)
+   ```
+
+## 🔧 Customization
+
+After installation, you can customize the setup:
+
+### Modify Commands
+Edit files in `.claude/commands/` to match your workflow:
 ```bash
-# Edit test command
+# Edit the test command
 vim .claude/commands/test.md
 
-# Add new custom command
-echo "# My Custom Command" > .claude/commands/my-command.md
+# Add a custom command
+echo "# Deploy Command" > .claude/commands/deploy.md
 ```
 
-### Adjusting Settings
-Modify `.claude/settings.json` to match your project preferences:
-
+### Adjust Settings
+Update `.claude/settings.json` for your project:
 ```json
 {
-  "language": "typescript",
   "framework": "react",
-  "testFramework": "jest",
-  "packageManager": "npm"
+  "testFramework": "jest", 
+  "packageManager": "npm",
+  "buildTool": "vite"
 }
 ```
 
-### Adding Hooks
-Create custom hooks in `.claude/hooks/` for automated tasks:
-
-```json
-{
-  "trigger": "on_file_save",
-  "pattern": "*.ts,*.tsx",
-  "command": "npm run typecheck"
-}
-```
+### Add Framework Features
+The template adapts to your specific framework needs automatically.
 
-## Best Practices
+## 📖 Learn More
 
-### Project Structure
-- Use clear, descriptive folder names
-- Separate concerns (components, utils, services)
-- Follow framework conventions
-- Keep configuration files in project root
+- **Main Project**: [Claude Code Templates](../README.md)
+- **Common Templates**: [Universal patterns](../common/README.md)
+- **Python Templates**: [Python development](../python/README.md)
+- **CLI Tool**: [Automated installer](../cli-tool/README.md)
 
-### Code Quality
-- Enable TypeScript strict mode
-- Use ESLint with recommended rules
-- Format code consistently with Prettier
-- Write comprehensive tests
+## 💡 Why Use This Template?
 
-### Performance
-- Implement code splitting for large applications
-- Use lazy loading for routes and components
-- Optimize bundle size regularly
-- Monitor runtime performance
+### Before (Manual Setup)
+```bash
+# Create CLAUDE.md from scratch
+# Research JS/TS best practices
+# Configure commands manually
+# Set up linting and testing
+# Configure TypeScript
+# ... hours of setup
+```
 
-## Troubleshooting
+### After (With This Template)
+```bash
+npx claude-code-templates --language javascript-typescript
+# ✅ Everything configured in 30 seconds!
+```
 
-### Common Issues
-- **TypeScript errors**: Run `npm run typecheck` to identify issues
-- **Linting failures**: Use `npm run lint:fix` to auto-fix issues
-- **Test failures**: Run tests in watch mode with `npm run test:watch`
-- **Build errors**: Check dependencies and configuration files
+### Benefits
+- **Instant Setup** - Get started immediately with proven configurations
+- **Framework-Aware** - Automatically adapts to React, Vue, Node.js, etc.
+- **Best Practices** - Uses industry-standard patterns and tools
+- **TypeScript Ready** - Full TypeScript support out of the box
+- **Testing Included** - Pre-configured for Jest, Vitest, and more
 
-### Getting Help
-- Check the main repository documentation
-- Review framework-specific guides
-- Use Claude Code's built-in help: `/help`
-- Consult community resources and documentation
+## 🤝 Contributing
 
-## Contributing
+Help improve this JavaScript/TypeScript template:
 
-Found ways to improve these templates? We welcome contributions:
+1. Test the template with different JS/TS projects
+2. Report issues or suggest improvements
+3. Add support for new frameworks or tools
+4. Share your customizations and best practices
 
-1. Fork the repository
-2. Create a feature branch
-3. Add your improvements
-4. Test with real projects
-5. Submit a pull request
+Your contributions make this template better for the entire JavaScript/TypeScript community!
 
-## License
+---
 
-This template is part of the Claude Code Templates project and is licensed under the MIT License.
+**Ready to supercharge your JavaScript/TypeScript development?** Run `npx claude-code-templates --language javascript-typescript` in your project now!

package/templates/rust/README.md

@@ -0,0 +1,26 @@
+# Rust Claude Code Templates
+
+## Coming Soon! 🚧
+
+We're actively working on creating comprehensive Claude Code templates for Rust development.
+
+### What to Expect
+- Best practices for Rust project structure
+- Integration with popular Rust tools and frameworks
+- Workflow optimizations for Rust development
+- Testing and benchmarking configurations
+- Cross-compilation and deployment setups
+- Memory safety and performance guidelines
+
+### Meanwhile...
+You can use the [common templates](../common/README.md) as a starting point for your Rust projects. The universal guidelines and git workflows will work well with Rust development.
+
+### Stay Updated
+⭐ Star this repository to get notified when the Rust templates are released!
+
+### Contributing
+Interested in helping build these templates? We welcome contributions! Please check the main repository's contribution guidelines and feel free to open an issue or pull request.
+
+---
+
+*Expected release: Coming soon*

package/templates/javascript-typescript/.claude/hooks/format-on-save.json

@@ -1 +0,0 @@
-{}

package/templates/javascript-typescript/.claude/hooks/lint-on-save.json

@@ -1 +0,0 @@
-{}

package/templates/javascript-typescript/.claude/hooks/typescript-check.json

@@ -1 +0,0 @@
-{}

package/templates/javascript-typescript/examples/node-api/.claude/commands/middleware.md

@@ -1 +0,0 @@
-# Middleware Command

package/templates/javascript-typescript/examples/node-api/.claude/commands/route.md

@@ -1 +0,0 @@
-# API Route Command

package/templates/javascript-typescript/examples/node-api/CLAUDE.md

@@ -1 +0,0 @@
-# Node.js API CLAUDE.md

package/templates/javascript-typescript/examples/react-app/.claude/commands/component.md

@@ -1 +0,0 @@
-# React Component Command

package/templates/javascript-typescript/examples/react-app/.claude/commands/hooks.md

@@ -1 +0,0 @@
-# React Hooks Command

package/templates/javascript-typescript/examples/react-app/CLAUDE.md

@@ -1 +0,0 @@
-# React App CLAUDE.md