claude-code-templates 1.21.11 → 1.21.13

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