claude-code-templates 1.0.2 → 1.1.1

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/route.md

@@ -0,0 +1,193 @@
+# Route Creator
+
+Create API routes and endpoints for Node.js applications with proper structure and best practices.
+
+## Purpose
+
+This command helps you quickly create new API routes with:
+- RESTful endpoint structure  
+- Proper HTTP method handling
+- Input validation
+- Error handling
+- Documentation comments
+- TypeScript support
+
+## Usage
+
+Use this command to create API routes for your Node.js application:
+
+```
+/route
+```
+
+## What this command does
+
+1. **Analyzes your project structure** to understand your routing setup
+2. **Asks for route details** (endpoint path, HTTP methods, parameters)
+3. **Creates route files** with proper structure and validation
+4. **Generates TypeScript types** for request/response (if TypeScript project)
+5. **Adds proper error handling** and status codes
+6. **Includes documentation** and examples
+
+## Example Output
+
+For a `/users` route, this might create:
+
+### Express.js Route
+```javascript
+// routes/users.js
+const express = require('express');
+const router = express.Router();
+
+// GET /users - Get all users
+router.get('/', async (req, res) => {
+  try {
+    // TODO: Implement user fetching logic
+    const users = [];
+    res.json(users);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch users' });
+  }
+});
+
+// GET /users/:id - Get user by ID
+router.get('/:id', async (req, res) => {
+  try {
+    const { id } = req.params;
+    // TODO: Implement user fetching by ID
+    const user = {};
+    
+    if (!user) {
+      return res.status(404).json({ error: 'User not found' });
+    }
+    
+    res.json(user);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch user' });
+  }
+});
+
+// POST /users - Create new user
+router.post('/', async (req, res) => {
+  try {
+    const { name, email } = req.body;
+    
+    // Input validation
+    if (!name || !email) {
+      return res.status(400).json({ 
+        error: 'Name and email are required' 
+      });
+    }
+    
+    // TODO: Implement user creation logic
+    const newUser = { id: Date.now(), name, email };
+    
+    res.status(201).json(newUser);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to create user' });
+  }
+});
+
+module.exports = router;
+```
+
+### TypeScript Route (if TS project)
+```typescript
+// routes/users.ts
+import { Router, Request, Response } from 'express';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface CreateUserRequest {
+  name: string;
+  email: string;
+}
+
+const router = Router();
+
+// GET /users - Get all users
+router.get('/', async (req: Request, res: Response<User[]>) => {
+  try {
+    // TODO: Implement user fetching logic
+    const users: User[] = [];
+    res.json(users);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch users' } as any);
+  }
+});
+
+// POST /users - Create new user
+router.post('/', async (req: Request<{}, User, CreateUserRequest>, res: Response<User>) => {
+  try {
+    const { name, email } = req.body;
+    
+    if (!name || !email) {
+      return res.status(400).json({ 
+        error: 'Name and email are required' 
+      } as any);
+    }
+    
+    // TODO: Implement user creation logic
+    const newUser: User = { id: Date.now(), name, email };
+    
+    res.status(201).json(newUser);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to create user' } as any);
+  }
+});
+
+export default router;
+```
+
+## When to use this command
+
+- **Creating new API endpoints** for your application
+- **Adding CRUD operations** for data models
+- **Building RESTful APIs** with proper structure
+- **Setting up route handlers** with validation and error handling
+- **Generating boilerplate** for API development
+
+## Framework Support
+
+This command adapts to your specific Node.js framework:
+
+### Express.js
+- Creates `routes/` directory structure
+- Uses Express Router
+- Includes middleware support
+- Adds common HTTP methods (GET, POST, PUT, DELETE)
+
+### Fastify
+- Creates Fastify route plugins
+- Includes schema validation
+- Uses Fastify's built-in serialization
+- Adds proper error handling
+
+### NestJS
+- Creates controller classes
+- Includes decorators (@Get, @Post, etc.)
+- Generates DTOs for validation
+- Uses dependency injection
+
+## Best Practices Included
+
+- **Input Validation** - Validates request parameters and body
+- **Error Handling** - Proper try/catch blocks and error responses
+- **Status Codes** - Appropriate HTTP status codes for different scenarios
+- **TypeScript Types** - Strong typing for requests and responses
+- **Documentation** - JSDoc comments explaining each endpoint
+- **Security** - Basic input sanitization and validation
+- **Testing Setup** - Suggests test cases for the new routes
+
+## Tips
+
+1. **Plan your API structure** before creating routes
+2. **Use consistent naming** for endpoints (plural nouns for collections)
+3. **Include proper validation** for all input data
+4. **Add authentication/authorization** where needed
+5. **Test your routes** after creation
+6. **Document your API** for other developers

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"
+            ]
+        }
+    }
+}