claude-code-templates 1.3.2 → 1.3.4

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

@@ -0,0 +1,61 @@
+# Express Middleware
+
+Create Express middleware for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize Express middleware based on the requirements:
+
+1. **Analyze existing middleware**: Check current middleware patterns, naming conventions, and file organization
+2. **Examine Express setup**: Review app configuration, middleware stack order, and TypeScript usage
+3. **Identify middleware type**: Determine the middleware category:
+   - Authentication/Authorization (JWT, sessions, role-based)
+   - Validation (request body, params, query validation)
+   - Logging (request/response logging, audit trails)
+   - Error handling (global error handlers, custom errors)
+   - Security (CORS, rate limiting, helmet)
+   - Utility (parsing, compression, static files)
+4. **Check dependencies**: Review existing middleware dependencies to avoid duplication
+5. **Implement middleware**: Create middleware with proper TypeScript types and error handling
+6. **Test middleware**: Write unit and integration tests following project patterns
+7. **Update middleware stack**: Integrate middleware into Express app configuration
+8. **Add documentation**: Include JSDoc comments and usage examples
+
+## Implementation Requirements
+
+- Follow project's TypeScript conventions and interfaces
+- Use existing error handling patterns and response formats
+- Include proper request/response typing with custom interfaces
+- Add comprehensive error handling and logging
+- Consider middleware execution order and dependencies
+- Implement proper async/await patterns for async middleware
+- Follow project's folder structure for middleware files
+
+## Middleware Patterns to Consider
+
+Based on the request:
+- **Authentication**: JWT verification, session management, API key validation
+- **Authorization**: Role-based access control, permission checking
+- **Validation**: Schema validation with Joi/Zod, sanitization
+- **Logging**: Request logging, performance monitoring, audit trails
+- **Error Handling**: Global error handlers, custom error classes
+- **Security**: CORS configuration, rate limiting, input sanitization
+- **Utility**: Request parsing, response formatting, caching
+
+## Integration Considerations
+
+- **Middleware order**: Ensure proper execution sequence in Express app
+- **Error propagation**: Handle errors correctly with next() function
+- **Request enhancement**: Add properties to request object with proper typing
+- **Response modification**: Modify response objects while maintaining type safety
+- **Performance**: Consider middleware performance impact on request processing
+
+## Important Notes
+
+- ALWAYS examine existing middleware first to understand project patterns
+- Use the same error handling and response format as existing middleware
+- Follow project's folder structure for middleware (usually /middleware)
+- Don't install new dependencies without asking
+- Consider middleware performance and request processing impact
+- Add proper TypeScript types for enhanced request/response objects
+- Test middleware in isolation and integration contexts

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

@@ -0,0 +1,57 @@
+# Route Creator
+
+Create API routes for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize API routes based on the requirements:
+
+1. **Analyze project structure**: Check existing route patterns, folder organization, and framework setup
+2. **Examine framework**: Identify if using Express, Fastify, NestJS, or other Node.js framework
+3. **Review existing routes**: Understand current routing patterns, validation, and error handling
+4. **Check authentication**: Review existing auth middleware and protection patterns
+5. **Define route structure**: Determine HTTP methods, path parameters, and request/response schemas
+6. **Implement routes**: Create route handlers with proper validation and error handling
+7. **Add middleware**: Include authentication, validation, and logging middleware as needed
+8. **Create tests**: Write route tests following project testing patterns
+9. **Update route registration**: Integrate new routes into main router configuration
+
+## Implementation Requirements
+
+- Follow project's routing architecture and naming conventions
+- Use existing validation libraries (Joi, Zod, class-validator, etc.)
+- Include proper TypeScript types for request/response objects
+- Add comprehensive error handling with appropriate HTTP status codes
+- Implement proper authentication/authorization if required
+- Follow RESTful conventions unless project uses different patterns
+- Add proper logging and monitoring integration
+
+## Route Patterns to Consider
+
+Based on the request:
+- **CRUD operations**: Create, Read, Update, Delete for resources
+- **RESTful endpoints**: GET, POST, PUT, PATCH, DELETE with proper semantics
+- **Nested resources**: Parent/child resource relationships
+- **Batch operations**: Bulk create, update, delete operations
+- **Search/filtering**: Query parameters for filtering and pagination
+- **File uploads**: Multipart form handling for file operations
+- **Webhook endpoints**: External service integration points
+
+## Framework-Specific Implementation
+
+Adapt to your project's framework:
+- **Express**: Router instances, middleware chains, route handlers
+- **Fastify**: Route plugins, schema validation, hooks
+- **NestJS**: Controllers, decorators, DTOs, guards, interceptors
+- **Koa**: Router middleware, context handling
+- **Next.js API**: API route handlers with proper HTTP methods
+
+## Important Notes
+
+- ALWAYS examine existing routes first to understand project patterns
+- Use the same validation and error handling patterns as existing routes
+- Follow project's folder structure for routes (usually /routes or /controllers)
+- Don't install new dependencies without asking
+- Consider route performance and database query optimization
+- Add proper OpenAPI/Swagger documentation if project uses it
+- Include rate limiting for public endpoints where appropriate

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

@@ -0,0 +1,102 @@
+# CLAUDE.md - Node.js API
+
+This file provides guidance to Claude Code when working with Node.js API applications using TypeScript.
+
+## Project Type
+
+This is a Node.js API application with TypeScript and Express.js support.
+
+## Development Commands
+
+### API Development
+- **`/route`** - Create API routes and endpoints
+- **`/middleware`** - Create and manage Express middleware
+- **`/api-endpoint`** - Generate complete API endpoints
+- **`/database`** - Set up database operations and models
+
+### Testing and Quality
+- **`/test`** - Run tests and create test files
+- **`/lint`** - Run linting and fix code style issues
+- **`/typescript-migrate`** - Migrate JavaScript files to TypeScript
+
+### Development Workflow
+- **`/npm-scripts`** - Run npm scripts and package management
+- **`/debug`** - Debug Node.js applications
+- **`/refactor`** - Refactor and optimize code
+
+## Framework-Specific Guidelines
+
+### Express.js Best Practices
+- Use middleware for cross-cutting concerns
+- Implement proper error handling
+- Follow RESTful API design principles
+- Use proper HTTP status codes
+
+### Database Integration
+- Use TypeORM, Prisma, or Mongoose for database operations
+- Implement proper connection pooling
+- Use migrations for database schema changes
+- Follow repository pattern for data access
+
+### Security Considerations
+- Implement authentication and authorization
+- Use HTTPS in production
+- Validate and sanitize input data
+- Implement rate limiting and CORS
+
+### Error Handling
+- Use centralized error handling middleware
+- Implement proper logging
+- Return consistent error responses
+- Handle async errors properly
+
+## TypeScript Configuration
+
+The project uses strict TypeScript configuration:
+- Strict type checking enabled
+- Proper interface definitions for requests/responses
+- Generic type support for database models
+- Integration with Express types
+
+## API Design Patterns
+
+### RESTful Routes
+```
+GET    /api/users      - Get all users
+GET    /api/users/:id  - Get user by ID
+POST   /api/users      - Create new user
+PUT    /api/users/:id  - Update user
+DELETE /api/users/:id  - Delete user
+```
+
+### Request/Response Structure
+- Use consistent JSON response format
+- Implement proper status codes
+- Include metadata in responses
+- Handle pagination properly
+
+## Testing Strategy
+
+- Unit tests with Jest
+- Integration tests for API endpoints
+- Database testing with test databases
+- Load testing for performance validation
+
+## File Naming Conventions
+
+- Routes: `routeName.routes.ts` (e.g., `user.routes.ts`)
+- Controllers: `ControllerName.controller.ts`
+- Models: `ModelName.model.ts`
+- Middleware: `middlewareName.middleware.ts`
+- Services: `ServiceName.service.ts`
+- Tests: `fileName.test.ts`
+
+## Recommended Libraries
+
+- **Framework**: Express.js, Fastify, Koa.js
+- **Database**: Prisma, TypeORM, Mongoose
+- **Authentication**: Passport.js, JWT, Auth0
+- **Validation**: Joi, Yup, Zod
+- **Testing**: Jest, Supertest, Artillery
+- **Documentation**: Swagger/OpenAPI, Postman
+- **Monitoring**: Winston, Morgan, Prometheus

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

@@ -0,0 +1,29 @@
+# React Component Generator
+
+Create a React component named $ARGUMENTS following project conventions.
+
+## Steps
+
+1. **Analyze project structure**: Check existing components to understand file organization, naming conventions, and patterns
+2. **Examine styling approach**: Identify CSS/SCSS modules, styled-components, Tailwind, or other styling methods used
+3. **Review testing patterns**: Check existing test files to understand testing framework and conventions
+4. **Create component structure**: Generate appropriate files (component, styles, tests, index)
+5. **Implement component**: Write TypeScript/JavaScript with proper props interface and logic
+6. **Add tests**: Write comprehensive tests following project patterns
+7. **Verify integration**: Ensure component works with existing project setup
+
+## Requirements
+
+- Follow existing project file structure and naming conventions
+- Use TypeScript if project uses it
+- Include proper accessibility attributes
+- Add responsive design considerations
+- Write tests that match project testing patterns
+- Include usage examples in component documentation
+
+## Important Notes
+
+- ALWAYS examine existing components first to understand project patterns
+- Use the same styling approach as the rest of the project
+- Follow the project's TypeScript conventions for props and interfaces
+- Don't install new dependencies without asking first

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

@@ -0,0 +1,44 @@
+# React Hooks
+
+Create or optimize React hooks for $ARGUMENTS following project conventions.
+
+## Task
+
+Analyze the request and create appropriate React hooks:
+
+1. **Examine existing hooks**: Check project for existing custom hooks patterns and conventions
+2. **Identify hook type**: Determine if creating new custom hook, optimizing existing hook, or implementing specific hook pattern
+3. **Check TypeScript usage**: Verify if project uses TypeScript and follow typing conventions
+4. **Implement hook**: Create hook with proper:
+   - Naming convention (use prefix)
+   - TypeScript types and interfaces
+   - Proper dependency arrays
+   - Error handling
+   - Performance optimizations
+5. **Add tests**: Create comprehensive unit tests using project's testing framework
+6. **Add documentation**: Include JSDoc comments and usage examples
+
+## Common Hook Patterns
+
+When creating hooks, consider these patterns based on the request:
+- **Data fetching**: API calls, loading states, error handling
+- **State management**: Local state, derived state, state persistence
+- **Side effects**: Event listeners, timers, subscriptions
+- **Context consumption**: Theme, auth, app state
+- **Form handling**: Input management, validation, submission
+- **Performance**: Memoization, debouncing, throttling
+
+## Requirements
+
+- Follow existing project hook conventions
+- Use TypeScript if project uses it
+- Include proper cleanup in useEffect
+- Add error boundaries where appropriate
+- Write tests that cover all hook functionality
+- IMPORTANT: Always check existing hooks first to understand project patterns
+
+## Notes
+
+- Ask for clarification if the hook requirements are ambiguous
+- Suggest optimizations for existing hooks if relevant
+- Consider accessibility implications for UI-related hooks

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

@@ -0,0 +1,45 @@
+# React State Management
+
+Implement state management solution for $ARGUMENTS following project conventions.
+
+## Task
+
+Set up or optimize state management based on the requirements:
+
+1. **Analyze current setup**: Check existing state management approach and project structure
+2. **Determine solution**: Based on requirements, choose appropriate state management:
+   - Context API for simple, localized state
+   - Redux Toolkit for complex, global state
+   - Zustand for lightweight global state
+   - Custom hooks for component-level state
+3. **Examine dependencies**: Check package.json for existing state management libraries
+4. **Implement solution**: Create store, providers, and hooks with proper TypeScript types
+5. **Set up middleware**: Add devtools, persistence, or other middleware as needed
+6. **Create typed hooks**: Generate properly typed selectors and dispatch hooks
+7. **Add tests**: Write unit tests for state logic and reducers
+8. **Update providers**: Integrate with app's provider hierarchy
+
+## Implementation Requirements
+
+- Follow project's TypeScript conventions
+- Use existing state management patterns if present
+- Create proper type definitions for state shape
+- Include error handling and loading states
+- Add proper debugging setup (devtools)
+- Consider performance optimizations (selectors, memoization)
+
+## State Management Selection Guide
+
+Choose based on complexity:
+- **Simple state**: React hooks + Context API
+- **Medium complexity**: Zustand or custom hooks
+- **Complex state**: Redux Toolkit with RTK Query
+- **Form state**: React Hook Form or Formik
+
+## Important Notes
+
+- ALWAYS check existing state management first
+- Don't install new dependencies without asking
+- Follow project's folder structure for state files
+- Consider server state vs client state separation
+- Add proper TypeScript types for all state interfaces

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

@@ -0,0 +1,81 @@
+# CLAUDE.md - React Application
+
+This file provides guidance to Claude Code when working with React applications using TypeScript.
+
+## Project Type
+
+This is a React application with TypeScript support.
+
+## Development Commands
+
+### Component Development
+- **`/component`** - Create React components with TypeScript
+- **`/hooks`** - Create and manage React hooks
+- **`/state-management`** - Implement state management solutions
+
+### Testing and Quality
+- **`/test`** - Run tests and create test files
+- **`/lint`** - Run linting and fix code style issues
+- **`/typescript-migrate`** - Migrate JavaScript files to TypeScript
+
+### Development Workflow
+- **`/npm-scripts`** - Run npm scripts and package management
+- **`/debug`** - Debug React applications
+- **`/refactor`** - Refactor and optimize code
+
+## Framework-Specific Guidelines
+
+### React Best Practices
+- Use functional components with hooks
+- Implement proper TypeScript typing for props and state
+- Follow React performance optimization patterns
+- Use proper component composition patterns
+
+### State Management
+- Use useState for local component state
+- Consider useContext for shared state
+- Implement Redux Toolkit for complex state management
+- Use Zustand for lightweight state management
+
+### Component Architecture
+- Keep components small and focused
+- Use custom hooks for reusable logic
+- Implement proper prop drilling prevention
+- Follow component testing best practices
+
+### Performance Optimization
+- Use React.memo for expensive components
+- Implement proper dependency arrays in useEffect
+- Use useMemo and useCallback judiciously
+- Optimize bundle size with code splitting
+
+## TypeScript Configuration
+
+The project uses strict TypeScript configuration:
+- Strict type checking enabled
+- Proper interface definitions for props
+- Generic type support for reusable components
+- Integration with React's built-in types
+
+## Testing Strategy
+
+- Unit tests with Jest and React Testing Library
+- Component testing with proper mocking
+- Integration tests for complex workflows
+- E2E tests for critical user journeys
+
+## File Naming Conventions
+
+- Components: `PascalCase.tsx` (e.g., `UserCard.tsx`)
+- Hooks: `use` prefix in `camelCase` (e.g., `useApiData.ts`)
+- Types: `types.ts` or inline interfaces
+- Tests: `ComponentName.test.tsx`
+
+## Recommended Libraries
+
+- **State Management**: Redux Toolkit, Zustand, Context API
+- **Styling**: Styled-components, Emotion, Tailwind CSS
+- **Forms**: React Hook Form, Formik
+- **Routing**: React Router v6
+- **HTTP Client**: Axios, SWR, React Query
+- **Testing**: Jest, React Testing Library, Cypress

package/templates/javascript-typescript/examples/vue-app/.claude/commands/components.md

@@ -0,0 +1,46 @@
+# Vue Components
+
+Create Vue Single File Components for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize Vue components based on the requirements:
+
+1. **Analyze project structure**: Check existing Vue components to understand patterns, conventions, and file organization
+2. **Examine Vue setup**: Identify Vue version (2/3), TypeScript usage, and Composition/Options API preference
+3. **Check styling approach**: Determine if using CSS modules, SCSS, styled-components, or other styling methods
+4. **Review testing patterns**: Check existing component tests to understand testing framework and conventions
+5. **Create component structure**: Generate SFC with template, script, and style sections
+6. **Implement component**: Write TypeScript interfaces, props, emits, and component logic
+7. **Add accessibility**: Include proper ARIA attributes and semantic HTML
+8. **Create tests**: Write comprehensive component tests following project patterns
+9. **Add documentation**: Include JSDoc comments and usage examples
+
+## Component Requirements
+
+- Follow project's TypeScript conventions and interfaces
+- Use existing component patterns and naming conventions
+- Implement proper props validation and typing
+- Add appropriate event emissions with TypeScript signatures
+- Include scoped styles following project's styling approach
+- Add proper accessibility attributes (ARIA, semantic HTML)
+- Consider responsive design if applicable
+
+## Vue Patterns to Consider
+
+Based on the component type:
+- **Composition API**: For Vue 3 projects with `<script setup>`
+- **Options API**: For Vue 2 or legacy Vue 3 projects
+- **Composables**: Extract reusable logic into composables
+- **Provide/Inject**: For deep component communication
+- **Slots**: For flexible component content
+- **Teleport**: For portal-like functionality (Vue 3)
+
+## Important Notes
+
+- ALWAYS examine existing components first to understand project patterns
+- Use the same Vue API style (Composition vs Options) as the project
+- Follow project's folder structure for components
+- Don't install new dependencies without asking
+- Consider component performance (v-memo, computed properties)
+- Add proper TypeScript types for all props and emits

package/templates/javascript-typescript/examples/vue-app/.claude/commands/composables.md

@@ -0,0 +1,51 @@
+# Vue Composables
+
+Create Vue composables for $ARGUMENTS following project conventions.
+
+## Task
+
+Create or optimize Vue composables based on the requirements:
+
+1. **Analyze existing composables**: Check project for existing composable patterns, naming conventions, and file organization
+2. **Examine Vue setup**: Verify Vue 3 Composition API usage and TypeScript configuration
+3. **Identify composable type**: Determine the composable category:
+   - State management (reactive data, computed properties)
+   - API/HTTP operations (data fetching, mutations)
+   - DOM interactions (event listeners, element refs)
+   - Utility functions (validation, formatting, storage)
+   - Lifecycle management (cleanup, watchers)
+4. **Check dependencies**: Review existing composables to avoid duplication
+5. **Implement composable**: Create composable with proper TypeScript types and reactivity
+6. **Add lifecycle management**: Include proper cleanup with onUnmounted when needed
+7. **Create tests**: Write comprehensive unit tests for composable logic
+8. **Add documentation**: Include JSDoc comments and usage examples
+
+## Implementation Requirements
+
+- Follow project's TypeScript conventions and interfaces
+- Use appropriate Vue reactivity APIs (ref, reactive, computed, watch)
+- Include proper error handling and loading states
+- Add cleanup for side effects (event listeners, timers, subscriptions)
+- Make composables reusable and focused on single responsibility
+- Consider performance implications (shallow vs deep reactivity)
+
+## Common Composable Patterns
+
+Based on the request:
+- **Data fetching**: API calls with loading/error states
+- **Form handling**: Input management, validation, submission
+- **State management**: Local state, persistence, computed values
+- **DOM utilities**: Element refs, event handling, intersection observer
+- **Storage**: localStorage, sessionStorage, IndexedDB
+- **Authentication**: User state, token management, permissions
+- **UI utilities**: Dark mode, responsive breakpoints, modals
+
+## Important Notes
+
+- ALWAYS examine existing composables first to understand project patterns
+- Use proper Vue 3 Composition API patterns
+- Follow project's folder structure for composables (usually /composables)
+- Don't install new dependencies without asking
+- Consider composable composition (using other composables within composables)
+- Add proper TypeScript return types and generic constraints
+- Include proper reactivity patterns (avoid losing reactivity)

package/templates/python/.claude/commands/lint.md

@@ -0,0 +1,111 @@
+# Python Linter
+
+Run Python code linting and formatting tools.
+
+## Purpose
+
+This command helps you maintain code quality using Python's best linting and formatting tools.
+
+## Usage
+
+```
+/lint
+```
+
+## What this command does
+
+1. **Runs multiple linters** (flake8, pylint, black, isort)
+2. **Provides detailed feedback** on code quality issues
+3. **Auto-fixes formatting** where possible
+4. **Checks type hints** if mypy is configured
+
+## Example Commands
+
+### Black (code formatting)
+```bash
+# Format all Python files
+black .
+
+# Check formatting without changing files
+black --check .
+
+# Format specific file
+black src/main.py
+```
+
+### flake8 (style guide enforcement)
+```bash
+# Check all Python files
+flake8 .
+
+# Check specific directory
+flake8 src/
+
+# Check with specific rules
+flake8 --max-line-length=88 .
+```
+
+### isort (import sorting)
+```bash
+# Sort imports in all files
+isort .
+
+# Check import sorting
+isort --check-only .
+
+# Sort imports in specific file
+isort src/main.py
+```
+
+### pylint (comprehensive linting)
+```bash
+# Run pylint on all files
+pylint src/
+
+# Run with specific score threshold
+pylint --fail-under=8.0 src/
+
+# Generate detailed report
+pylint --output-format=html src/ > pylint_report.html
+```
+
+### mypy (type checking)
+```bash
+# Check types in all files
+mypy .
+
+# Check specific module
+mypy src/models.py
+
+# Check with strict mode
+mypy --strict src/
+```
+
+## Configuration Files
+
+Most projects benefit from configuration files:
+
+### .flake8
+```ini
+[flake8]
+max-line-length = 88
+exclude = .git,__pycache__,venv
+ignore = E203,W503
+```
+
+### pyproject.toml
+```toml
+[tool.black]
+line-length = 88
+
+[tool.isort]
+profile = "black"
+```
+
+## Best Practices
+
+- Run linters before committing code
+- Use consistent formatting across the project
+- Fix linting issues promptly
+- Configure linters to match your team's style
+- Use type hints for better code documentation