claude-code-templates 1.16.0 → 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/README.md +7 -7
  2. package/bin/create-claude-config.js +17 -8
  3. package/package.json +2 -3
  4. package/src/analytics/core/AgentAnalyzer.js +17 -3
  5. package/src/analytics/core/ProcessDetector.js +23 -7
  6. package/src/analytics/core/StateCalculator.js +102 -33
  7. package/src/analytics/data/DataCache.js +7 -7
  8. package/src/analytics-web/chats_mobile.html +2590 -0
  9. package/src/analytics-web/components/App.js +10 -10
  10. package/src/analytics-web/components/SessionTimer.js +1 -1
  11. package/src/analytics-web/components/Sidebar.js +5 -14
  12. package/src/analytics-web/index.html +932 -78
  13. package/src/analytics.js +263 -5
  14. package/src/chats-mobile.js +682 -0
  15. package/src/claude-api-proxy.js +460 -0
  16. package/src/file-operations.js +239 -36
  17. package/src/health-check.js +310 -0
  18. package/src/index.js +1252 -56
  19. package/src/tracking-service.js +31 -34
  20. package/components/agents/api-security-audit.md +0 -92
  21. package/components/agents/database-optimization.md +0 -94
  22. package/components/agents/react-performance-optimization.md +0 -64
  23. package/components/commands/check-file.md +0 -53
  24. package/components/commands/generate-tests.md +0 -68
  25. package/components/mcps/deepgraph-nextjs.json +0 -12
  26. package/components/mcps/deepgraph-react.json +0 -12
  27. package/components/mcps/deepgraph-typescript.json +0 -12
  28. package/components/mcps/deepgraph-vue.json +0 -12
  29. package/components/mcps/filesystem-access.json +0 -12
  30. package/components/mcps/github-integration.json +0 -11
  31. package/components/mcps/memory-integration.json +0 -8
  32. package/components/mcps/mysql-integration.json +0 -11
  33. package/components/mcps/postgresql-integration.json +0 -11
  34. package/components/mcps/web-fetch.json +0 -8
  35. package/src/analytics-web/components/AgentsPage.js +0 -4761
  36. package/templates/common/.claude/commands/git-workflow.md +0 -239
  37. package/templates/common/.claude/commands/project-setup.md +0 -316
  38. package/templates/common/.mcp.json +0 -41
  39. package/templates/common/CLAUDE.md +0 -109
  40. package/templates/common/README.md +0 -96
  41. package/templates/go/.mcp.json +0 -78
  42. package/templates/go/README.md +0 -25
  43. package/templates/javascript-typescript/.claude/commands/api-endpoint.md +0 -51
  44. package/templates/javascript-typescript/.claude/commands/debug.md +0 -52
  45. package/templates/javascript-typescript/.claude/commands/lint.md +0 -48
  46. package/templates/javascript-typescript/.claude/commands/npm-scripts.md +0 -48
  47. package/templates/javascript-typescript/.claude/commands/refactor.md +0 -55
  48. package/templates/javascript-typescript/.claude/commands/test.md +0 -61
  49. package/templates/javascript-typescript/.claude/commands/typescript-migrate.md +0 -51
  50. package/templates/javascript-typescript/.claude/settings.json +0 -142
  51. package/templates/javascript-typescript/.mcp.json +0 -80
  52. package/templates/javascript-typescript/CLAUDE.md +0 -185
  53. package/templates/javascript-typescript/README.md +0 -259
  54. package/templates/javascript-typescript/examples/angular-app/.claude/commands/components.md +0 -63
  55. package/templates/javascript-typescript/examples/angular-app/.claude/commands/services.md +0 -62
  56. package/templates/javascript-typescript/examples/node-api/.claude/commands/api-endpoint.md +0 -46
  57. package/templates/javascript-typescript/examples/node-api/.claude/commands/database.md +0 -56
  58. package/templates/javascript-typescript/examples/node-api/.claude/commands/middleware.md +0 -61
  59. package/templates/javascript-typescript/examples/node-api/.claude/commands/route.md +0 -57
  60. package/templates/javascript-typescript/examples/node-api/CLAUDE.md +0 -102
  61. package/templates/javascript-typescript/examples/react-app/.claude/commands/component.md +0 -29
  62. package/templates/javascript-typescript/examples/react-app/.claude/commands/hooks.md +0 -44
  63. package/templates/javascript-typescript/examples/react-app/.claude/commands/state-management.md +0 -45
  64. package/templates/javascript-typescript/examples/react-app/CLAUDE.md +0 -81
  65. package/templates/javascript-typescript/examples/react-app/agents/react-performance-optimization.md +0 -530
  66. package/templates/javascript-typescript/examples/react-app/agents/react-state-management.md +0 -295
  67. package/templates/javascript-typescript/examples/vue-app/.claude/commands/components.md +0 -46
  68. package/templates/javascript-typescript/examples/vue-app/.claude/commands/composables.md +0 -51
  69. package/templates/python/.claude/commands/lint.md +0 -111
  70. package/templates/python/.claude/commands/test.md +0 -73
  71. package/templates/python/.claude/settings.json +0 -153
  72. package/templates/python/.mcp.json +0 -78
  73. package/templates/python/CLAUDE.md +0 -276
  74. package/templates/python/examples/django-app/.claude/commands/admin.md +0 -264
  75. package/templates/python/examples/django-app/.claude/commands/django-model.md +0 -124
  76. package/templates/python/examples/django-app/.claude/commands/views.md +0 -222
  77. package/templates/python/examples/django-app/CLAUDE.md +0 -313
  78. package/templates/python/examples/django-app/agents/django-api-security.md +0 -642
  79. package/templates/python/examples/django-app/agents/django-database-optimization.md +0 -752
  80. package/templates/python/examples/fastapi-app/.claude/commands/api-endpoints.md +0 -513
  81. package/templates/python/examples/fastapi-app/.claude/commands/auth.md +0 -775
  82. package/templates/python/examples/fastapi-app/.claude/commands/database.md +0 -657
  83. package/templates/python/examples/fastapi-app/.claude/commands/deployment.md +0 -160
  84. package/templates/python/examples/fastapi-app/.claude/commands/testing.md +0 -927
  85. package/templates/python/examples/fastapi-app/CLAUDE.md +0 -229
  86. package/templates/python/examples/flask-app/.claude/commands/app-factory.md +0 -384
  87. package/templates/python/examples/flask-app/.claude/commands/blueprint.md +0 -243
  88. package/templates/python/examples/flask-app/.claude/commands/database.md +0 -410
  89. package/templates/python/examples/flask-app/.claude/commands/deployment.md +0 -620
  90. package/templates/python/examples/flask-app/.claude/commands/flask-route.md +0 -217
  91. package/templates/python/examples/flask-app/.claude/commands/testing.md +0 -559
  92. package/templates/python/examples/flask-app/CLAUDE.md +0 -391
  93. package/templates/ruby/.claude/commands/model.md +0 -360
  94. package/templates/ruby/.claude/commands/test.md +0 -480
  95. package/templates/ruby/.claude/settings.json +0 -146
  96. package/templates/ruby/.mcp.json +0 -83
  97. package/templates/ruby/CLAUDE.md +0 -284
  98. package/templates/ruby/examples/rails-app/.claude/commands/authentication.md +0 -490
  99. package/templates/ruby/examples/rails-app/CLAUDE.md +0 -376
  100. package/templates/rust/.mcp.json +0 -78
  101. package/templates/rust/README.md +0 -26
@@ -1,63 +0,0 @@
1
- # Angular Components
2
-
3
- Create Angular components for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Create or optimize Angular components based on the requirements:
8
-
9
- 1. **Analyze existing components**: Check current component patterns, naming conventions, and folder organization
10
- 2. **Examine Angular setup**: Review project structure, module organization, and TypeScript configuration
11
- 3. **Identify component type**: Determine the component category:
12
- - Presentation components (dumb/pure components)
13
- - Container components (smart components with state)
14
- - Feature components (business logic components)
15
- - Shared/UI components (reusable across features)
16
- - Layout components (structural components)
17
- 4. **Check dependencies**: Review existing components and shared modules to avoid duplication
18
- 5. **Implement component**: Create component with proper TypeScript types and lifecycle hooks
19
- 6. **Add inputs/outputs**: Define @Input and @Output properties with proper typing
20
- 7. **Create template**: Build HTML template with proper Angular directives and bindings
21
- 8. **Add styles**: Implement component styles following project's styling approach
22
- 9. **Create tests**: Write comprehensive unit tests with TestBed and proper mocking
23
- 10. **Update module**: Register component in appropriate Angular module
24
-
25
- ## Implementation Requirements
26
-
27
- - Follow project's Angular architecture and naming conventions
28
- - Use proper component lifecycle hooks (OnInit, OnDestroy, etc.)
29
- - Include comprehensive TypeScript interfaces for inputs and outputs
30
- - Implement proper change detection strategy (OnPush when possible)
31
- - Add proper subscription management with takeUntil or async pipe
32
- - Follow Angular style guide and project coding standards
33
- - Consider component performance and memory management
34
-
35
- ## Component Patterns to Consider
36
-
37
- Based on the request:
38
- - **Smart Components**: Container components that manage state and services
39
- - **Dumb Components**: Presentation components that only receive inputs
40
- - **Feature Components**: Components specific to business features
41
- - **Shared Components**: Reusable UI components across the application
42
- - **Form Components**: Reactive forms with validation and custom controls
43
- - **Data Display**: Components for tables, lists, cards with proper data binding
44
-
45
- ## Angular-Specific Implementation
46
-
47
- - **Template Syntax**: Proper use of Angular directives (*ngFor, *ngIf, etc.)
48
- - **Data Binding**: Property binding, event binding, two-way binding
49
- - **Change Detection**: OnPush strategy for performance optimization
50
- - **Lifecycle Management**: Proper use of lifecycle hooks
51
- - **Dependency Injection**: Service injection in component constructors
52
- - **Testing**: TestBed configuration with proper mocking and spies
53
-
54
- ## Important Notes
55
-
56
- - ALWAYS examine existing components first to understand project patterns
57
- - Use the same styling approach and class naming as existing components
58
- - Follow project's folder structure for components (usually feature-based)
59
- - Don't install new dependencies without asking
60
- - Consider component reusability and single responsibility principle
61
- - Add proper TypeScript types for all component properties and methods
62
- - Use trackBy functions for performance in *ngFor loops
63
- - Implement proper unsubscription patterns to prevent memory leaks
@@ -1,62 +0,0 @@
1
- # Angular Services
2
-
3
- Create Angular services for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Create or optimize Angular services based on the requirements:
8
-
9
- 1. **Analyze existing services**: Check current service patterns, naming conventions, and folder organization
10
- 2. **Examine Angular setup**: Review project structure, dependency injection patterns, and TypeScript configuration
11
- 3. **Identify service type**: Determine the service category:
12
- - Data services (HTTP API calls, state management)
13
- - Utility services (validation, formatting, helpers)
14
- - Business logic services (calculations, workflows)
15
- - Infrastructure services (logging, authentication, error handling)
16
- - Feature services (component-specific logic)
17
- 4. **Check dependencies**: Review existing services and shared modules to avoid duplication
18
- 5. **Implement service**: Create service with proper dependency injection and TypeScript types
19
- 6. **Add error handling**: Include comprehensive error handling with RxJS operators
20
- 7. **Create tests**: Write unit tests with proper mocking following project patterns
21
- 8. **Update module registration**: Register service in appropriate Angular modules
22
-
23
- ## Implementation Requirements
24
-
25
- - Follow project's Angular architecture and naming conventions (usually .service.ts)
26
- - Use proper dependency injection with @Injectable decorator
27
- - Include comprehensive TypeScript interfaces and types
28
- - Implement proper RxJS patterns (observables, operators, error handling)
29
- - Add proper error handling and logging integration
30
- - Follow single responsibility principle for service design
31
- - Consider service lifecycle and singleton patterns
32
-
33
- ## Service Patterns to Consider
34
-
35
- Based on the request:
36
- - **HTTP Data Services**: API calls with proper error handling and caching
37
- - **State Management**: Services for sharing data between components
38
- - **Authentication**: User authentication, token management, guards
39
- - **Business Logic**: Complex calculations, workflows, validations
40
- - **Utility Services**: Reusable functions, formatters, validators
41
- - **Feature Services**: Component-specific logic extraction
42
- - **Infrastructure**: Logging, monitoring, configuration services
43
-
44
- ## Angular-Specific Implementation
45
-
46
- - **Dependency Injection**: Proper use of @Injectable and providedIn
47
- - **RxJS Integration**: Observables, subjects, operators for reactive programming
48
- - **HTTP Client**: Angular HttpClient for API communication
49
- - **Error Handling**: Global error handling and user-friendly error messages
50
- - **Testing**: TestBed, jasmine, karma for comprehensive unit testing
51
- - **Module Organization**: Feature modules, shared modules, core modules
52
-
53
- ## Important Notes
54
-
55
- - ALWAYS examine existing services first to understand project patterns
56
- - Use the same error handling and response patterns as existing services
57
- - Follow project's folder structure for services (usually /services or /core)
58
- - Don't install new dependencies without asking
59
- - Consider service performance and memory management
60
- - Add proper RxJS subscription management to prevent memory leaks
61
- - Use Angular's built-in services (HttpClient, Router) rather than external libraries
62
- - Include proper TypeScript types for all service methods and properties
@@ -1,46 +0,0 @@
1
- # API Endpoint Generator
2
-
3
- Generate a complete API endpoint for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Create a new API endpoint with all necessary components:
8
-
9
- 1. **Analyze project architecture**: Examine existing API structure, patterns, and conventions
10
- 2. **Identify framework**: Determine if using Express, Fastify, NestJS, Next.js API routes, or other framework
11
- 3. **Check authentication**: Review existing auth patterns and middleware usage
12
- 4. **Examine data layer**: Identify database/ORM patterns (Prisma, TypeORM, Mongoose, etc.)
13
- 5. **Create endpoint structure**: Generate route, controller, validation, and service layers
14
- 6. **Implement business logic**: Add core functionality with proper error handling
15
- 7. **Add validation**: Include input validation using project's validation library
16
- 8. **Create tests**: Write unit and integration tests following project patterns
17
- 9. **Update documentation**: Add endpoint documentation (OpenAPI/Swagger if used)
18
-
19
- ## Implementation Requirements
20
-
21
- - Follow project's TypeScript conventions and interfaces
22
- - Use existing middleware patterns for auth, validation, logging
23
- - Include proper HTTP status codes and error responses
24
- - Add comprehensive input validation and sanitization
25
- - Implement proper logging and monitoring
26
- - Consider rate limiting and security headers
27
- - Follow project's database transaction patterns
28
-
29
- ## Framework-Specific Patterns
30
-
31
- I'll adapt to your project's framework:
32
- - **Express**: Routes, controllers, middleware
33
- - **Fastify**: Routes, handlers, schemas, plugins
34
- - **NestJS**: Controllers, services, DTOs, guards
35
- - **Next.js**: API routes with proper HTTP methods
36
- - **tRPC**: Procedures with input/output validation
37
- - **GraphQL**: Resolvers with proper type definitions
38
-
39
- ## Important Notes
40
-
41
- - ALWAYS examine existing endpoints first to understand project patterns
42
- - Use the same error handling and response format as existing endpoints
43
- - Follow project's folder structure and naming conventions
44
- - Don't install new dependencies without asking
45
- - Consider backward compatibility if modifying existing endpoints
46
- - Add proper database migrations if schema changes are needed
@@ -1,56 +0,0 @@
1
- # Database Operations
2
-
3
- Set up database operations for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Create or optimize database operations based on the requirements:
8
-
9
- 1. **Analyze existing database setup**: Check current database configuration, ORM/ODM, and connection patterns
10
- 2. **Identify database type**: Determine if using MongoDB, PostgreSQL, MySQL, or other database
11
- 3. **Examine ORM/ODM**: Check for Prisma, TypeORM, Mongoose, Sequelize, or raw SQL patterns
12
- 4. **Review existing models**: Understand current schema patterns and relationships
13
- 5. **Check migration system**: Identify migration tools and patterns in use
14
- 6. **Implement operations**: Create models, repositories, or services following project architecture
15
- 7. **Add validation**: Include proper schema validation and constraints
16
- 8. **Create tests**: Write database operation tests following project patterns
17
- 9. **Update migrations**: Add necessary database migrations if schema changes required
18
-
19
- ## Implementation Requirements
20
-
21
- - Follow project's database architecture patterns
22
- - Use existing ORM/ODM configuration and connection setup
23
- - Include proper TypeScript types for all database operations
24
- - Add comprehensive error handling and transaction management
25
- - Implement proper indexing for performance
26
- - Follow project's naming conventions for tables/collections and fields
27
- - Consider data validation at both application and database levels
28
-
29
- ## Database Patterns to Consider
30
-
31
- Based on your project setup:
32
- - **Repository Pattern**: Separate data access logic from business logic
33
- - **Active Record**: Models with built-in database operations
34
- - **Data Mapper**: Separate domain models from database schema
35
- - **Query Builder**: Fluent interface for building database queries
36
- - **Raw SQL**: Direct database queries for complex operations
37
-
38
- ## Operation Types
39
-
40
- Common database operations to implement:
41
- - **CRUD operations**: Create, Read, Update, Delete
42
- - **Bulk operations**: Batch inserts, updates, deletes
43
- - **Aggregation**: Complex queries with grouping and calculations
44
- - **Relationships**: Managing foreign keys and joins
45
- - **Transactions**: Ensuring data consistency
46
- - **Migrations**: Schema changes and data transformations
47
-
48
- ## Important Notes
49
-
50
- - ALWAYS examine existing database setup first to understand project patterns
51
- - Use the same connection configuration and environment variables
52
- - Follow project's folder structure for models/schemas
53
- - Don't install new database dependencies without asking
54
- - Consider performance implications (indexes, query optimization)
55
- - Add proper database connection pooling if not already configured
56
- - Include proper cleanup and connection closing in tests
@@ -1,61 +0,0 @@
1
- # Express Middleware
2
-
3
- Create Express middleware for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Create or optimize Express middleware based on the requirements:
8
-
9
- 1. **Analyze existing middleware**: Check current middleware patterns, naming conventions, and file organization
10
- 2. **Examine Express setup**: Review app configuration, middleware stack order, and TypeScript usage
11
- 3. **Identify middleware type**: Determine the middleware category:
12
- - Authentication/Authorization (JWT, sessions, role-based)
13
- - Validation (request body, params, query validation)
14
- - Logging (request/response logging, audit trails)
15
- - Error handling (global error handlers, custom errors)
16
- - Security (CORS, rate limiting, helmet)
17
- - Utility (parsing, compression, static files)
18
- 4. **Check dependencies**: Review existing middleware dependencies to avoid duplication
19
- 5. **Implement middleware**: Create middleware with proper TypeScript types and error handling
20
- 6. **Test middleware**: Write unit and integration tests following project patterns
21
- 7. **Update middleware stack**: Integrate middleware into Express app configuration
22
- 8. **Add documentation**: Include JSDoc comments and usage examples
23
-
24
- ## Implementation Requirements
25
-
26
- - Follow project's TypeScript conventions and interfaces
27
- - Use existing error handling patterns and response formats
28
- - Include proper request/response typing with custom interfaces
29
- - Add comprehensive error handling and logging
30
- - Consider middleware execution order and dependencies
31
- - Implement proper async/await patterns for async middleware
32
- - Follow project's folder structure for middleware files
33
-
34
- ## Middleware Patterns to Consider
35
-
36
- Based on the request:
37
- - **Authentication**: JWT verification, session management, API key validation
38
- - **Authorization**: Role-based access control, permission checking
39
- - **Validation**: Schema validation with Joi/Zod, sanitization
40
- - **Logging**: Request logging, performance monitoring, audit trails
41
- - **Error Handling**: Global error handlers, custom error classes
42
- - **Security**: CORS configuration, rate limiting, input sanitization
43
- - **Utility**: Request parsing, response formatting, caching
44
-
45
- ## Integration Considerations
46
-
47
- - **Middleware order**: Ensure proper execution sequence in Express app
48
- - **Error propagation**: Handle errors correctly with next() function
49
- - **Request enhancement**: Add properties to request object with proper typing
50
- - **Response modification**: Modify response objects while maintaining type safety
51
- - **Performance**: Consider middleware performance impact on request processing
52
-
53
- ## Important Notes
54
-
55
- - ALWAYS examine existing middleware first to understand project patterns
56
- - Use the same error handling and response format as existing middleware
57
- - Follow project's folder structure for middleware (usually /middleware)
58
- - Don't install new dependencies without asking
59
- - Consider middleware performance and request processing impact
60
- - Add proper TypeScript types for enhanced request/response objects
61
- - Test middleware in isolation and integration contexts
@@ -1,57 +0,0 @@
1
- # Route Creator
2
-
3
- Create API routes for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Create or optimize API routes based on the requirements:
8
-
9
- 1. **Analyze project structure**: Check existing route patterns, folder organization, and framework setup
10
- 2. **Examine framework**: Identify if using Express, Fastify, NestJS, or other Node.js framework
11
- 3. **Review existing routes**: Understand current routing patterns, validation, and error handling
12
- 4. **Check authentication**: Review existing auth middleware and protection patterns
13
- 5. **Define route structure**: Determine HTTP methods, path parameters, and request/response schemas
14
- 6. **Implement routes**: Create route handlers with proper validation and error handling
15
- 7. **Add middleware**: Include authentication, validation, and logging middleware as needed
16
- 8. **Create tests**: Write route tests following project testing patterns
17
- 9. **Update route registration**: Integrate new routes into main router configuration
18
-
19
- ## Implementation Requirements
20
-
21
- - Follow project's routing architecture and naming conventions
22
- - Use existing validation libraries (Joi, Zod, class-validator, etc.)
23
- - Include proper TypeScript types for request/response objects
24
- - Add comprehensive error handling with appropriate HTTP status codes
25
- - Implement proper authentication/authorization if required
26
- - Follow RESTful conventions unless project uses different patterns
27
- - Add proper logging and monitoring integration
28
-
29
- ## Route Patterns to Consider
30
-
31
- Based on the request:
32
- - **CRUD operations**: Create, Read, Update, Delete for resources
33
- - **RESTful endpoints**: GET, POST, PUT, PATCH, DELETE with proper semantics
34
- - **Nested resources**: Parent/child resource relationships
35
- - **Batch operations**: Bulk create, update, delete operations
36
- - **Search/filtering**: Query parameters for filtering and pagination
37
- - **File uploads**: Multipart form handling for file operations
38
- - **Webhook endpoints**: External service integration points
39
-
40
- ## Framework-Specific Implementation
41
-
42
- Adapt to your project's framework:
43
- - **Express**: Router instances, middleware chains, route handlers
44
- - **Fastify**: Route plugins, schema validation, hooks
45
- - **NestJS**: Controllers, decorators, DTOs, guards, interceptors
46
- - **Koa**: Router middleware, context handling
47
- - **Next.js API**: API route handlers with proper HTTP methods
48
-
49
- ## Important Notes
50
-
51
- - ALWAYS examine existing routes first to understand project patterns
52
- - Use the same validation and error handling patterns as existing routes
53
- - Follow project's folder structure for routes (usually /routes or /controllers)
54
- - Don't install new dependencies without asking
55
- - Consider route performance and database query optimization
56
- - Add proper OpenAPI/Swagger documentation if project uses it
57
- - Include rate limiting for public endpoints where appropriate
@@ -1,102 +0,0 @@
1
- # CLAUDE.md - Node.js API
2
-
3
- This file provides guidance to Claude Code when working with Node.js API applications using TypeScript.
4
-
5
- ## Project Type
6
-
7
- This is a Node.js API application with TypeScript and Express.js support.
8
-
9
- ## Development Commands
10
-
11
- ### API Development
12
- - **`/route`** - Create API routes and endpoints
13
- - **`/middleware`** - Create and manage Express middleware
14
- - **`/api-endpoint`** - Generate complete API endpoints
15
- - **`/database`** - Set up database operations and models
16
-
17
- ### Testing and Quality
18
- - **`/test`** - Run tests and create test files
19
- - **`/lint`** - Run linting and fix code style issues
20
- - **`/typescript-migrate`** - Migrate JavaScript files to TypeScript
21
-
22
- ### Development Workflow
23
- - **`/npm-scripts`** - Run npm scripts and package management
24
- - **`/debug`** - Debug Node.js applications
25
- - **`/refactor`** - Refactor and optimize code
26
-
27
- ## Framework-Specific Guidelines
28
-
29
- ### Express.js Best Practices
30
- - Use middleware for cross-cutting concerns
31
- - Implement proper error handling
32
- - Follow RESTful API design principles
33
- - Use proper HTTP status codes
34
-
35
- ### Database Integration
36
- - Use TypeORM, Prisma, or Mongoose for database operations
37
- - Implement proper connection pooling
38
- - Use migrations for database schema changes
39
- - Follow repository pattern for data access
40
-
41
- ### Security Considerations
42
- - Implement authentication and authorization
43
- - Use HTTPS in production
44
- - Validate and sanitize input data
45
- - Implement rate limiting and CORS
46
-
47
- ### Error Handling
48
- - Use centralized error handling middleware
49
- - Implement proper logging
50
- - Return consistent error responses
51
- - Handle async errors properly
52
-
53
- ## TypeScript Configuration
54
-
55
- The project uses strict TypeScript configuration:
56
- - Strict type checking enabled
57
- - Proper interface definitions for requests/responses
58
- - Generic type support for database models
59
- - Integration with Express types
60
-
61
- ## API Design Patterns
62
-
63
- ### RESTful Routes
64
- ```
65
- GET /api/users - Get all users
66
- GET /api/users/:id - Get user by ID
67
- POST /api/users - Create new user
68
- PUT /api/users/:id - Update user
69
- DELETE /api/users/:id - Delete user
70
- ```
71
-
72
- ### Request/Response Structure
73
- - Use consistent JSON response format
74
- - Implement proper status codes
75
- - Include metadata in responses
76
- - Handle pagination properly
77
-
78
- ## Testing Strategy
79
-
80
- - Unit tests with Jest
81
- - Integration tests for API endpoints
82
- - Database testing with test databases
83
- - Load testing for performance validation
84
-
85
- ## File Naming Conventions
86
-
87
- - Routes: `routeName.routes.ts` (e.g., `user.routes.ts`)
88
- - Controllers: `ControllerName.controller.ts`
89
- - Models: `ModelName.model.ts`
90
- - Middleware: `middlewareName.middleware.ts`
91
- - Services: `ServiceName.service.ts`
92
- - Tests: `fileName.test.ts`
93
-
94
- ## Recommended Libraries
95
-
96
- - **Framework**: Express.js, Fastify, Koa.js
97
- - **Database**: Prisma, TypeORM, Mongoose
98
- - **Authentication**: Passport.js, JWT, Auth0
99
- - **Validation**: Joi, Yup, Zod
100
- - **Testing**: Jest, Supertest, Artillery
101
- - **Documentation**: Swagger/OpenAPI, Postman
102
- - **Monitoring**: Winston, Morgan, Prometheus
@@ -1,29 +0,0 @@
1
- # React Component Generator
2
-
3
- Create a React component named $ARGUMENTS following project conventions.
4
-
5
- ## Steps
6
-
7
- 1. **Analyze project structure**: Check existing components to understand file organization, naming conventions, and patterns
8
- 2. **Examine styling approach**: Identify CSS/SCSS modules, styled-components, Tailwind, or other styling methods used
9
- 3. **Review testing patterns**: Check existing test files to understand testing framework and conventions
10
- 4. **Create component structure**: Generate appropriate files (component, styles, tests, index)
11
- 5. **Implement component**: Write TypeScript/JavaScript with proper props interface and logic
12
- 6. **Add tests**: Write comprehensive tests following project patterns
13
- 7. **Verify integration**: Ensure component works with existing project setup
14
-
15
- ## Requirements
16
-
17
- - Follow existing project file structure and naming conventions
18
- - Use TypeScript if project uses it
19
- - Include proper accessibility attributes
20
- - Add responsive design considerations
21
- - Write tests that match project testing patterns
22
- - Include usage examples in component documentation
23
-
24
- ## Important Notes
25
-
26
- - ALWAYS examine existing components first to understand project patterns
27
- - Use the same styling approach as the rest of the project
28
- - Follow the project's TypeScript conventions for props and interfaces
29
- - Don't install new dependencies without asking first
@@ -1,44 +0,0 @@
1
- # React Hooks
2
-
3
- Create or optimize React hooks for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Analyze the request and create appropriate React hooks:
8
-
9
- 1. **Examine existing hooks**: Check project for existing custom hooks patterns and conventions
10
- 2. **Identify hook type**: Determine if creating new custom hook, optimizing existing hook, or implementing specific hook pattern
11
- 3. **Check TypeScript usage**: Verify if project uses TypeScript and follow typing conventions
12
- 4. **Implement hook**: Create hook with proper:
13
- - Naming convention (use prefix)
14
- - TypeScript types and interfaces
15
- - Proper dependency arrays
16
- - Error handling
17
- - Performance optimizations
18
- 5. **Add tests**: Create comprehensive unit tests using project's testing framework
19
- 6. **Add documentation**: Include JSDoc comments and usage examples
20
-
21
- ## Common Hook Patterns
22
-
23
- When creating hooks, consider these patterns based on the request:
24
- - **Data fetching**: API calls, loading states, error handling
25
- - **State management**: Local state, derived state, state persistence
26
- - **Side effects**: Event listeners, timers, subscriptions
27
- - **Context consumption**: Theme, auth, app state
28
- - **Form handling**: Input management, validation, submission
29
- - **Performance**: Memoization, debouncing, throttling
30
-
31
- ## Requirements
32
-
33
- - Follow existing project hook conventions
34
- - Use TypeScript if project uses it
35
- - Include proper cleanup in useEffect
36
- - Add error boundaries where appropriate
37
- - Write tests that cover all hook functionality
38
- - IMPORTANT: Always check existing hooks first to understand project patterns
39
-
40
- ## Notes
41
-
42
- - Ask for clarification if the hook requirements are ambiguous
43
- - Suggest optimizations for existing hooks if relevant
44
- - Consider accessibility implications for UI-related hooks
@@ -1,45 +0,0 @@
1
- # React State Management
2
-
3
- Implement state management solution for $ARGUMENTS following project conventions.
4
-
5
- ## Task
6
-
7
- Set up or optimize state management based on the requirements:
8
-
9
- 1. **Analyze current setup**: Check existing state management approach and project structure
10
- 2. **Determine solution**: Based on requirements, choose appropriate state management:
11
- - Context API for simple, localized state
12
- - Redux Toolkit for complex, global state
13
- - Zustand for lightweight global state
14
- - Custom hooks for component-level state
15
- 3. **Examine dependencies**: Check package.json for existing state management libraries
16
- 4. **Implement solution**: Create store, providers, and hooks with proper TypeScript types
17
- 5. **Set up middleware**: Add devtools, persistence, or other middleware as needed
18
- 6. **Create typed hooks**: Generate properly typed selectors and dispatch hooks
19
- 7. **Add tests**: Write unit tests for state logic and reducers
20
- 8. **Update providers**: Integrate with app's provider hierarchy
21
-
22
- ## Implementation Requirements
23
-
24
- - Follow project's TypeScript conventions
25
- - Use existing state management patterns if present
26
- - Create proper type definitions for state shape
27
- - Include error handling and loading states
28
- - Add proper debugging setup (devtools)
29
- - Consider performance optimizations (selectors, memoization)
30
-
31
- ## State Management Selection Guide
32
-
33
- Choose based on complexity:
34
- - **Simple state**: React hooks + Context API
35
- - **Medium complexity**: Zustand or custom hooks
36
- - **Complex state**: Redux Toolkit with RTK Query
37
- - **Form state**: React Hook Form or Formik
38
-
39
- ## Important Notes
40
-
41
- - ALWAYS check existing state management first
42
- - Don't install new dependencies without asking
43
- - Follow project's folder structure for state files
44
- - Consider server state vs client state separation
45
- - Add proper TypeScript types for all state interfaces
@@ -1,81 +0,0 @@
1
- # CLAUDE.md - React Application
2
-
3
- This file provides guidance to Claude Code when working with React applications using TypeScript.
4
-
5
- ## Project Type
6
-
7
- This is a React application with TypeScript support.
8
-
9
- ## Development Commands
10
-
11
- ### Component Development
12
- - **`/component`** - Create React components with TypeScript
13
- - **`/hooks`** - Create and manage React hooks
14
- - **`/state-management`** - Implement state management solutions
15
-
16
- ### Testing and Quality
17
- - **`/test`** - Run tests and create test files
18
- - **`/lint`** - Run linting and fix code style issues
19
- - **`/typescript-migrate`** - Migrate JavaScript files to TypeScript
20
-
21
- ### Development Workflow
22
- - **`/npm-scripts`** - Run npm scripts and package management
23
- - **`/debug`** - Debug React applications
24
- - **`/refactor`** - Refactor and optimize code
25
-
26
- ## Framework-Specific Guidelines
27
-
28
- ### React Best Practices
29
- - Use functional components with hooks
30
- - Implement proper TypeScript typing for props and state
31
- - Follow React performance optimization patterns
32
- - Use proper component composition patterns
33
-
34
- ### State Management
35
- - Use useState for local component state
36
- - Consider useContext for shared state
37
- - Implement Redux Toolkit for complex state management
38
- - Use Zustand for lightweight state management
39
-
40
- ### Component Architecture
41
- - Keep components small and focused
42
- - Use custom hooks for reusable logic
43
- - Implement proper prop drilling prevention
44
- - Follow component testing best practices
45
-
46
- ### Performance Optimization
47
- - Use React.memo for expensive components
48
- - Implement proper dependency arrays in useEffect
49
- - Use useMemo and useCallback judiciously
50
- - Optimize bundle size with code splitting
51
-
52
- ## TypeScript Configuration
53
-
54
- The project uses strict TypeScript configuration:
55
- - Strict type checking enabled
56
- - Proper interface definitions for props
57
- - Generic type support for reusable components
58
- - Integration with React's built-in types
59
-
60
- ## Testing Strategy
61
-
62
- - Unit tests with Jest and React Testing Library
63
- - Component testing with proper mocking
64
- - Integration tests for complex workflows
65
- - E2E tests for critical user journeys
66
-
67
- ## File Naming Conventions
68
-
69
- - Components: `PascalCase.tsx` (e.g., `UserCard.tsx`)
70
- - Hooks: `use` prefix in `camelCase` (e.g., `useApiData.ts`)
71
- - Types: `types.ts` or inline interfaces
72
- - Tests: `ComponentName.test.tsx`
73
-
74
- ## Recommended Libraries
75
-
76
- - **State Management**: Redux Toolkit, Zustand, Context API
77
- - **Styling**: Styled-components, Emotion, Tailwind CSS
78
- - **Forms**: React Hook Form, Formik
79
- - **Routing**: React Router v6
80
- - **HTTP Client**: Axios, SWR, React Query
81
- - **Testing**: Jest, React Testing Library, Cypress