claude-code-templates 1.1.1 → 1.1.3

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/javascript-typescript/.claude/commands/react-component.md

@@ -1,54 +0,0 @@
-# React Component Generator
-
-Create a React component for $ARGUMENTS following project conventions.
-
-## Task
-
-I'll help you create a complete React component by:
-
-1. Analyzing your project structure and conventions
-2. Creating component files with appropriate organization
-3. Implementing the component with proper TypeScript types
-4. Adding styles according to your project's styling approach
-5. Creating tests for the component
-6. Adding documentation and usage examples
-
-## Process
-
-I'll follow these steps:
-
-1. Examine your project to understand component patterns and conventions
-2. Identify the styling approach (CSS/SCSS modules, styled-components, Tailwind, etc.)
-3. Determine testing frameworks and patterns
-4. Create the component with appropriate file structure
-5. Implement component logic, props interface, and styling
-6. Add comprehensive tests
-7. Document the component's usage and props
-
-## Component Features
-
-I can implement various component types and features:
-
-- Functional components with hooks
-- TypeScript interfaces for props and state
-- Proper prop validation and defaults
-- Responsive design considerations
-- Accessibility (a11y) best practices
-- Performance optimizations (memoization, etc.)
-- Error boundaries when appropriate
-- Loading and error states
-- Animation and transition effects
-
-## Component Architecture Patterns
-
-I'll adapt to your project's component architecture:
-
-- Atomic Design methodology (atoms, molecules, organisms)
-- Feature-based organization
-- Container/Presentational pattern
-- Compound components
-- Render props pattern
-- Higher-Order Components (HOCs)
-- Custom hooks for logic extraction
-
-I'll analyze your existing components to match your project's specific patterns and conventions.

package/templates/javascript-typescript/.claude/commands/route.md

@@ -1,193 +0,0 @@
-# Route Creator
-
-Create API routes and endpoints for Node.js applications with proper structure and best practices.
-
-## Purpose
-
-This command helps you quickly create new API routes with:
-- RESTful endpoint structure  
-- Proper HTTP method handling
-- Input validation
-- Error handling
-- Documentation comments
-- TypeScript support
-
-## Usage
-
-Use this command to create API routes for your Node.js application:
-
-```
-/route
-```
-
-## What this command does
-
-1. **Analyzes your project structure** to understand your routing setup
-2. **Asks for route details** (endpoint path, HTTP methods, parameters)
-3. **Creates route files** with proper structure and validation
-4. **Generates TypeScript types** for request/response (if TypeScript project)
-5. **Adds proper error handling** and status codes
-6. **Includes documentation** and examples
-
-## Example Output
-
-For a `/users` route, this might create:
-
-### Express.js Route
-```javascript
-// routes/users.js
-const express = require('express');
-const router = express.Router();
-
-// GET /users - Get all users
-router.get('/', async (req, res) => {
-  try {
-    // TODO: Implement user fetching logic
-    const users = [];
-    res.json(users);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to fetch users' });
-  }
-});
-
-// GET /users/:id - Get user by ID
-router.get('/:id', async (req, res) => {
-  try {
-    const { id } = req.params;
-    // TODO: Implement user fetching by ID
-    const user = {};
-    
-    if (!user) {
-      return res.status(404).json({ error: 'User not found' });
-    }
-    
-    res.json(user);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to fetch user' });
-  }
-});
-
-// POST /users - Create new user
-router.post('/', async (req, res) => {
-  try {
-    const { name, email } = req.body;
-    
-    // Input validation
-    if (!name || !email) {
-      return res.status(400).json({ 
-        error: 'Name and email are required' 
-      });
-    }
-    
-    // TODO: Implement user creation logic
-    const newUser = { id: Date.now(), name, email };
-    
-    res.status(201).json(newUser);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to create user' });
-  }
-});
-
-module.exports = router;
-```
-
-### TypeScript Route (if TS project)
-```typescript
-// routes/users.ts
-import { Router, Request, Response } from 'express';
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-interface CreateUserRequest {
-  name: string;
-  email: string;
-}
-
-const router = Router();
-
-// GET /users - Get all users
-router.get('/', async (req: Request, res: Response<User[]>) => {
-  try {
-    // TODO: Implement user fetching logic
-    const users: User[] = [];
-    res.json(users);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to fetch users' } as any);
-  }
-});
-
-// POST /users - Create new user
-router.post('/', async (req: Request<{}, User, CreateUserRequest>, res: Response<User>) => {
-  try {
-    const { name, email } = req.body;
-    
-    if (!name || !email) {
-      return res.status(400).json({ 
-        error: 'Name and email are required' 
-      } as any);
-    }
-    
-    // TODO: Implement user creation logic
-    const newUser: User = { id: Date.now(), name, email };
-    
-    res.status(201).json(newUser);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to create user' } as any);
-  }
-});
-
-export default router;
-```
-
-## When to use this command
-
-- **Creating new API endpoints** for your application
-- **Adding CRUD operations** for data models
-- **Building RESTful APIs** with proper structure
-- **Setting up route handlers** with validation and error handling
-- **Generating boilerplate** for API development
-
-## Framework Support
-
-This command adapts to your specific Node.js framework:
-
-### Express.js
-- Creates `routes/` directory structure
-- Uses Express Router
-- Includes middleware support
-- Adds common HTTP methods (GET, POST, PUT, DELETE)
-
-### Fastify
-- Creates Fastify route plugins
-- Includes schema validation
-- Uses Fastify's built-in serialization
-- Adds proper error handling
-
-### NestJS
-- Creates controller classes
-- Includes decorators (@Get, @Post, etc.)
-- Generates DTOs for validation
-- Uses dependency injection
-
-## Best Practices Included
-
-- **Input Validation** - Validates request parameters and body
-- **Error Handling** - Proper try/catch blocks and error responses
-- **Status Codes** - Appropriate HTTP status codes for different scenarios
-- **TypeScript Types** - Strong typing for requests and responses
-- **Documentation** - JSDoc comments explaining each endpoint
-- **Security** - Basic input sanitization and validation
-- **Testing Setup** - Suggests test cases for the new routes
-
-## Tips
-
-1. **Plan your API structure** before creating routes
-2. **Use consistent naming** for endpoints (plural nouns for collections)
-3. **Include proper validation** for all input data
-4. **Add authentication/authorization** where needed
-5. **Test your routes** after creation
-6. **Document your API** for other developers