claude-code-templates 1.21.0 → 1.21.1

package/cli-tool/templates/javascript-typescript/CLAUDE.md

@@ -0,0 +1,185 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a JavaScript/TypeScript project optimized for modern web development. The project uses industry-standard tools and follows best practices for scalable application development.
+
+## Development Commands
+
+### Package Management
+- `npm install` or `yarn install` - Install dependencies
+- `npm ci` or `yarn install --frozen-lockfile` - Install dependencies for CI/CD
+- `npm update` or `yarn upgrade` - Update dependencies
+
+### Build Commands
+- `npm run build` - Build the project for production
+- `npm run dev` or `npm start` - Start development server
+- `npm run preview` - Preview production build locally
+
+### Testing Commands
+- `npm test` or `npm run test` - Run all tests
+- `npm run test:watch` - Run tests in watch mode
+- `npm run test:coverage` - Run tests with coverage report
+- `npm run test:unit` - Run unit tests only
+- `npm run test:integration` - Run integration tests only
+- `npm run test:e2e` - Run end-to-end tests
+
+### Code Quality Commands
+- `npm run lint` - Run ESLint for code linting
+- `npm run lint:fix` - Run ESLint with auto-fix
+- `npm run format` - Format code with Prettier
+- `npm run format:check` - Check code formatting
+- `npm run typecheck` - Run TypeScript type checking
+
+### Development Tools
+- `npm run storybook` - Start Storybook (if available)
+- `npm run analyze` - Analyze bundle size
+- `npm run clean` - Clean build artifacts
+
+## Technology Stack
+
+### Core Technologies
+- **JavaScript/TypeScript** - Primary programming languages
+- **Node.js** - Runtime environment
+- **npm/yarn** - Package management
+
+### Common Frameworks
+- **React** - UI library with hooks and functional components
+- **Vue.js** - Progressive framework for building user interfaces
+- **Angular** - Full-featured framework for web applications
+- **Express.js** - Web application framework for Node.js
+- **Next.js** - React framework with SSR/SSG capabilities
+
+### Build Tools
+- **Vite** - Fast build tool and development server
+- **Webpack** - Module bundler
+- **Rollup** - Module bundler for libraries
+- **esbuild** - Extremely fast JavaScript bundler
+
+### Testing Framework
+- **Jest** - JavaScript testing framework
+- **Vitest** - Fast unit test framework
+- **Testing Library** - Simple and complete testing utilities
+- **Cypress** - End-to-end testing framework
+- **Playwright** - Cross-browser testing
+
+### Code Quality Tools
+- **ESLint** - JavaScript/TypeScript linter
+- **Prettier** - Code formatter
+- **TypeScript** - Static type checking
+- **Husky** - Git hooks
+
+## Project Structure Guidelines
+
+### File Organization
+```
+src/
+├── components/     # Reusable UI components
+├── pages/         # Page components or routes
+├── hooks/         # Custom React hooks
+├── utils/         # Utility functions
+├── services/      # API calls and external services
+├── types/         # TypeScript type definitions
+├── constants/     # Application constants
+├── styles/        # Global styles and themes
+└── tests/         # Test files
+```
+
+### Naming Conventions
+- **Files**: Use kebab-case for file names (`user-profile.component.ts`)
+- **Components**: Use PascalCase for component names (`UserProfile`)
+- **Functions**: Use camelCase for function names (`getUserData`)
+- **Constants**: Use UPPER_SNAKE_CASE for constants (`API_BASE_URL`)
+- **Types/Interfaces**: Use PascalCase with descriptive names (`UserData`, `ApiResponse`)
+
+## TypeScript Guidelines
+
+### Type Safety
+- Enable strict mode in `tsconfig.json`
+- Use explicit types for function parameters and return values
+- Prefer interfaces over types for object shapes
+- Use union types for multiple possible values
+- Avoid `any` type - use `unknown` when type is truly unknown
+
+### Best Practices
+- Use type guards for runtime type checking
+- Leverage utility types (`Partial`, `Pick`, `Omit`, etc.)
+- Create custom types for domain-specific data
+- Use enums for finite sets of values
+- Document complex types with JSDoc comments
+
+## Code Quality Standards
+
+### ESLint Configuration
+- Use recommended ESLint rules for JavaScript/TypeScript
+- Enable React-specific rules if using React
+- Configure import/export rules for consistent module usage
+- Set up accessibility rules for inclusive development
+
+### Prettier Configuration
+- Use consistent indentation (2 spaces recommended)
+- Set maximum line length (80-100 characters)
+- Use single quotes for strings
+- Add trailing commas for better git diffs
+
+### Testing Standards
+- Aim for 80%+ test coverage
+- Write unit tests for utilities and business logic
+- Use integration tests for component interactions
+- Implement e2e tests for critical user flows
+- Follow AAA pattern (Arrange, Act, Assert)
+
+## Performance Optimization
+
+### Bundle Optimization
+- Use code splitting for large applications
+- Implement lazy loading for routes and components
+- Optimize images and assets
+- Use tree shaking to eliminate dead code
+- Analyze bundle size regularly
+
+### Runtime Performance
+- Implement proper memoization (React.memo, useMemo, useCallback)
+- Use virtualization for large lists
+- Optimize re-renders in React applications
+- Implement proper error boundaries
+- Use web workers for heavy computations
+
+## Security Guidelines
+
+### Dependencies
+- Regularly audit dependencies with `npm audit`
+- Keep dependencies updated
+- Use lock files (`package-lock.json`, `yarn.lock`)
+- Avoid dependencies with known vulnerabilities
+
+### Code Security
+- Sanitize user inputs
+- Use HTTPS for API calls
+- Implement proper authentication and authorization
+- Store sensitive data securely (environment variables)
+- Use Content Security Policy (CSP) headers
+
+## Development Workflow
+
+### Before Starting
+1. Check Node.js version compatibility
+2. Install dependencies with `npm install`
+3. Copy environment variables from `.env.example`
+4. Run type checking with `npm run typecheck`
+
+### During Development
+1. Use TypeScript for type safety
+2. Run linter frequently to catch issues early
+3. Write tests for new features
+4. Use meaningful commit messages
+5. Review code changes before committing
+
+### Before Committing
+1. Run full test suite: `npm test`
+2. Check linting: `npm run lint`
+3. Verify formatting: `npm run format:check`
+4. Run type checking: `npm run typecheck`
+5. Test production build: `npm run build`

package/cli-tool/templates/javascript-typescript/README.md

@@ -0,0 +1,259 @@
+# JavaScript/TypeScript Templates
+
+**Claude Code configuration template optimized for modern JavaScript and TypeScript development**
+
+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.
+
+## 📁 What's in This Folder
+
+This template provides the foundation for JavaScript/TypeScript development with Claude Code:
+
+### 📄 Files Included
+- **`CLAUDE.md`** - Complete JavaScript/TypeScript development guidance for Claude Code
+- **`README.md`** - This documentation file
+
+### 🎯 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
+
+## 🚀 How to Use This Template
+
+### Option 1: Automated Installation (Recommended)
+Use the CLI installer to automatically set up this template in your project:
+
+```bash
+cd your-javascript-project
+npx claude-code-templates --language javascript-typescript
+```
+
+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
+
+### Option 2: Manual Installation
+Copy the template manually for more control:
+
+```bash
+# Clone the repository
+git clone https://github.com/davila7/claude-code-templates.git
+
+# Copy the JavaScript/TypeScript template
+cp claude-code-templates/javascript-typescript/CLAUDE.md your-project/
+
+# Then use the CLI to complete the setup
+cd your-project
+npx claude-code-templates --language javascript-typescript
+```
+
+## 🎨 Framework Support
+
+This template automatically configures Claude Code for:
+
+### Frontend Frameworks
+- **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** - 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 the test command
+vim .claude/commands/test.md
+
+# Add a custom command
+echo "# Deploy Command" > .claude/commands/deploy.md
+```
+
+### Adjust Settings
+Update `.claude/settings.json` for your project:
+```json
+{
+  "framework": "react",
+  "testFramework": "jest", 
+  "packageManager": "npm",
+  "buildTool": "vite"
+}
+```
+
+### Add Framework Features
+The template adapts to your specific framework needs automatically.
+
+## 📖 Learn More
+
+- **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)
+
+## 💡 Why Use This Template?
+
+### 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
+```
+
+### After (With This Template)
+```bash
+npx claude-code-templates --language javascript-typescript
+# ✅ Everything configured in 30 seconds!
+```
+
+### 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
+
+## 🤝 Contributing
+
+Help improve this JavaScript/TypeScript template:
+
+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
+
+Your contributions make this template better for the entire JavaScript/TypeScript community!
+
+---
+
+**Ready to supercharge your JavaScript/TypeScript development?** Run `npx claude-code-templates --language javascript-typescript` in your project now!

package/cli-tool/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/cli-tool/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/cli-tool/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

package/cli-tool/templates/javascript-typescript/examples/node-api/.claude/commands/database.md

@@ -0,0 +1,56 @@
+# Database Operations
+
+Set up database operations for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize database operations based on the requirements:
+
+1. **Analyze existing database setup**: Check current database configuration, ORM/ODM, and connection patterns
+2. **Identify database type**: Determine if using MongoDB, PostgreSQL, MySQL, or other database
+3. **Examine ORM/ODM**: Check for Prisma, TypeORM, Mongoose, Sequelize, or raw SQL patterns
+4. **Review existing models**: Understand current schema patterns and relationships
+5. **Check migration system**: Identify migration tools and patterns in use
+6. **Implement operations**: Create models, repositories, or services following project architecture
+7. **Add validation**: Include proper schema validation and constraints
+8. **Create tests**: Write database operation tests following project patterns
+9. **Update migrations**: Add necessary database migrations if schema changes required
+
+## Implementation Requirements
+
+- Follow project's database architecture patterns
+- Use existing ORM/ODM configuration and connection setup
+- Include proper TypeScript types for all database operations
+- Add comprehensive error handling and transaction management
+- Implement proper indexing for performance
+- Follow project's naming conventions for tables/collections and fields
+- Consider data validation at both application and database levels
+
+## Database Patterns to Consider
+
+Based on your project setup:
+- **Repository Pattern**: Separate data access logic from business logic
+- **Active Record**: Models with built-in database operations
+- **Data Mapper**: Separate domain models from database schema
+- **Query Builder**: Fluent interface for building database queries
+- **Raw SQL**: Direct database queries for complex operations
+
+## Operation Types
+
+Common database operations to implement:
+- **CRUD operations**: Create, Read, Update, Delete
+- **Bulk operations**: Batch inserts, updates, deletes
+- **Aggregation**: Complex queries with grouping and calculations
+- **Relationships**: Managing foreign keys and joins
+- **Transactions**: Ensuring data consistency
+- **Migrations**: Schema changes and data transformations
+
+## Important Notes
+
+- ALWAYS examine existing database setup first to understand project patterns
+- Use the same connection configuration and environment variables
+- Follow project's folder structure for models/schemas
+- Don't install new database dependencies without asking
+- Consider performance implications (indexes, query optimization)
+- Add proper database connection pooling if not already configured
+- Include proper cleanup and connection closing in tests