claude-code-templates 1.2.0 → 1.3.0

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

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-# 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/django-model.md

@@ -1,124 +0,0 @@
-# Django Model Generator
-
-Create Django models with proper structure and relationships.
-
-## Purpose
-
-This command helps you quickly create Django models with fields, relationships, and best practices.
-
-## Usage
-
-```
-/django-model
-```
-
-## What this command does
-
-1. **Creates model classes** with proper field definitions
-2. **Adds relationships** (ForeignKey, ManyToMany, OneToOne)
-3. **Includes meta options** and model methods
-4. **Generates migrations** automatically
-5. **Follows Django conventions** and best practices
-
-## Example Output
-
-```python
-# models.py
-from django.db import models
-from django.contrib.auth.models import User
-
-class Category(models.Model):
-    name = models.CharField(max_length=100, unique=True)
-    slug = models.SlugField(unique=True)
-    description = models.TextField(blank=True)
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-    
-    class Meta:
-        verbose_name_plural = "categories"
-        ordering = ['name']
-    
-    def __str__(self):
-        return self.name
-
-class Post(models.Model):
-    STATUS_CHOICES = [
-        ('draft', 'Draft'),
-        ('published', 'Published'),
-        ('archived', 'Archived'),
-    ]
-    
-    title = models.CharField(max_length=200)
-    slug = models.SlugField(unique=True)
-    content = models.TextField()
-    status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='draft')
-    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='posts')
-    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, blank=True)
-    tags = models.ManyToManyField('Tag', blank=True)
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-    
-    class Meta:
-        ordering = ['-created_at']
-        verbose_name = 'blog post'
-        verbose_name_plural = 'blog posts'
-    
-    def __str__(self):
-        return self.title
-    
-    def get_absolute_url(self):
-        return reverse('post_detail', kwargs={'slug': self.slug})
-
-class Tag(models.Model):
-    name = models.CharField(max_length=50, unique=True)
-    slug = models.SlugField(unique=True)
-    
-    def __str__(self):
-        return self.name
-```
-
-## Field Types Supported
-
-- **CharField** - Text fields with max length
-- **TextField** - Large text fields
-- **IntegerField** - Integer numbers
-- **FloatField** - Floating point numbers
-- **BooleanField** - True/False values
-- **DateField** - Date only
-- **DateTimeField** - Date and time
-- **EmailField** - Email addresses
-- **URLField** - URLs
-- **ImageField** - Image uploads
-- **FileField** - File uploads
-- **JSONField** - JSON data (PostgreSQL)
-
-## Relationships
-
-- **ForeignKey** - One-to-many relationships
-- **ManyToManyField** - Many-to-many relationships
-- **OneToOneField** - One-to-one relationships
-
-## Best Practices Included
-
-- Proper field choices and defaults
-- Appropriate related_name attributes
-- __str__ methods for admin interface
-- Meta class with ordering and verbose names
-- get_absolute_url methods where appropriate
-- Proper use of null and blank parameters
-- Field validation and constraints
-
-## After Creating Models
-
-```bash
-# Create and apply migrations
-python manage.py makemigrations
-python manage.py migrate
-
-# Register in admin (optional)
-# Add to admin.py:
-from django.contrib import admin
-from .models import Post, Category, Tag
-
-admin.site.register([Post, Category, Tag])
-```