claude-code-templates 1.14.12 → 1.14.14

package/templates/javascript-typescript/CLAUDE.md

@@ -1,185 +0,0 @@
-# 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/templates/javascript-typescript/README.md

@@ -1,259 +0,0 @@
-# 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/templates/javascript-typescript/examples/angular-app/.claude/commands/components.md

@@ -1,63 +0,0 @@
-# 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

@@ -1,62 +0,0 @@
-# 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

@@ -1,46 +0,0 @@
-# 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/templates/javascript-typescript/examples/node-api/.claude/commands/database.md

@@ -1,56 +0,0 @@
-# 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