claude-code-templates 1.21.0 → 1.21.1

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