claude-code-templates 1.1.0 → 1.1.2

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/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

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

@@ -0,0 +1,62 @@
+# Angular Services
+
+Create Angular services for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize Angular services based on the requirements:
+
+1. **Analyze existing services**: Check current service patterns, naming conventions, and folder organization
+2. **Examine Angular setup**: Review project structure, dependency injection patterns, and TypeScript configuration
+3. **Identify service type**: Determine the service category:
+   - Data services (HTTP API calls, state management)
+   - Utility services (validation, formatting, helpers)
+   - Business logic services (calculations, workflows)
+   - Infrastructure services (logging, authentication, error handling)
+   - Feature services (component-specific logic)
+4. **Check dependencies**: Review existing services and shared modules to avoid duplication
+5. **Implement service**: Create service with proper dependency injection and TypeScript types
+6. **Add error handling**: Include comprehensive error handling with RxJS operators
+7. **Create tests**: Write unit tests with proper mocking following project patterns
+8. **Update module registration**: Register service in appropriate Angular modules
+
+## Implementation Requirements
+
+- Follow project's Angular architecture and naming conventions (usually .service.ts)
+- Use proper dependency injection with @Injectable decorator
+- Include comprehensive TypeScript interfaces and types
+- Implement proper RxJS patterns (observables, operators, error handling)
+- Add proper error handling and logging integration
+- Follow single responsibility principle for service design
+- Consider service lifecycle and singleton patterns
+
+## Service Patterns to Consider
+
+Based on the request:
+- **HTTP Data Services**: API calls with proper error handling and caching
+- **State Management**: Services for sharing data between components
+- **Authentication**: User authentication, token management, guards
+- **Business Logic**: Complex calculations, workflows, validations
+- **Utility Services**: Reusable functions, formatters, validators
+- **Feature Services**: Component-specific logic extraction
+- **Infrastructure**: Logging, monitoring, configuration services
+
+## Angular-Specific Implementation
+
+- **Dependency Injection**: Proper use of @Injectable and providedIn
+- **RxJS Integration**: Observables, subjects, operators for reactive programming
+- **HTTP Client**: Angular HttpClient for API communication
+- **Error Handling**: Global error handling and user-friendly error messages
+- **Testing**: TestBed, jasmine, karma for comprehensive unit testing
+- **Module Organization**: Feature modules, shared modules, core modules
+
+## Important Notes
+
+- ALWAYS examine existing services first to understand project patterns
+- Use the same error handling and response patterns as existing services
+- Follow project's folder structure for services (usually /services or /core)
+- Don't install new dependencies without asking
+- Consider service performance and memory management
+- Add proper RxJS subscription management to prevent memory leaks
+- Use Angular's built-in services (HttpClient, Router) rather than external libraries
+- Include proper TypeScript types for all service methods and properties

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

@@ -0,0 +1,46 @@
+# API Endpoint Generator
+
+Generate a complete API endpoint for $ARGUMENTS following project conventions.
+
+## Task
+
+Create a new API endpoint with all necessary components:
+
+1. **Analyze project architecture**: Examine existing API structure, patterns, and conventions
+2. **Identify framework**: Determine if using Express, Fastify, NestJS, Next.js API routes, or other framework
+3. **Check authentication**: Review existing auth patterns and middleware usage
+4. **Examine data layer**: Identify database/ORM patterns (Prisma, TypeORM, Mongoose, etc.)
+5. **Create endpoint structure**: Generate route, controller, validation, and service layers
+6. **Implement business logic**: Add core functionality with proper error handling
+7. **Add validation**: Include input validation using project's validation library
+8. **Create tests**: Write unit and integration tests following project patterns
+9. **Update documentation**: Add endpoint documentation (OpenAPI/Swagger if used)
+
+## Implementation Requirements
+
+- Follow project's TypeScript conventions and interfaces
+- Use existing middleware patterns for auth, validation, logging
+- Include proper HTTP status codes and error responses
+- Add comprehensive input validation and sanitization
+- Implement proper logging and monitoring
+- Consider rate limiting and security headers
+- Follow project's database transaction patterns
+
+## Framework-Specific Patterns
+
+I'll adapt to your project's framework:
+- **Express**: Routes, controllers, middleware
+- **Fastify**: Routes, handlers, schemas, plugins
+- **NestJS**: Controllers, services, DTOs, guards
+- **Next.js**: API routes with proper HTTP methods
+- **tRPC**: Procedures with input/output validation
+- **GraphQL**: Resolvers with proper type definitions
+
+## Important Notes
+
+- ALWAYS examine existing endpoints first to understand project patterns
+- Use the same error handling and response format as existing endpoints
+- Follow project's folder structure and naming conventions
+- Don't install new dependencies without asking
+- Consider backward compatibility if modifying existing endpoints
+- Add proper database migrations if schema changes are needed