claude-code-templates 1.21.13 → 1.22.0

package/cli-tool/templates/javascript-typescript/.claude/settings.json

@@ -1,142 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash",
-      "Edit",
-      "MultiEdit",
-      "Write",
-      "Bash(npm:*)",
-      "Bash(yarn:*)",
-      "Bash(npx:*)",
-      "Bash(node:*)",
-      "Bash(git:*)",
-      "Bash(eslint:*)",
-      "Bash(prettier:*)",
-      "Bash(tsc:*)",
-      "Bash(jest:*)",
-      "Bash(vitest:*)",
-      "Bash(webpack:*)",
-      "Bash(vite:*)"
-    ],
-    "deny": [
-      "Bash(curl:*)",
-      "Bash(wget:*)",
-      "Bash(rm -rf:*)"
-    ],
-    "defaultMode": "allowEdits"
-  },
-  "env": {
-    "BASH_DEFAULT_TIMEOUT_MS": "60000",
-    "BASH_MAX_OUTPUT_LENGTH": "20000",
-    "CLAUDE_BASH_MAINTAIN_PROJECT_WORKING_DIR": "1",
-    "NODE_ENV": "development"
-  },
-  "includeCoAuthoredBy": true,
-  "cleanupPeriodDays": 30,
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Bash",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "jq -r '\"\\(.tool_input.command) - \\(.tool_input.description // \"No description\")\"' >> ~/.claude/bash-command-log.txt"
-          }
-        ]
-      },
-      {
-        "matcher": "Write",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"); CONTENT=$(echo $STDIN_JSON | jq -r '.tool_input.content // \"\"); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ ]] && echo \"$CONTENT\" | grep -q 'console\\.log'; then echo 'Warning: console.log statements should be removed before committing' >&2; exit 2; fi"
-          }
-        ]
-      },
-      {
-        "matcher": "Write",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" == \"package.json\" ]]; then echo 'Checking for vulnerable dependencies...'; npm audit --audit-level=moderate; fi",
-            "timeout": 60
-          }
-        ]
-      }
-    ],
-    "PostToolUse": [
-      {
-        "matcher": "Write|Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ ]]; then npx prettier --write \"$FILE\"; fi",
-            "timeout": 30
-          }
-        ]
-      },
-      {
-        "matcher": "Write|Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(ts|tsx)$ ]]; then RESULT=$(npx tsc --noEmit 2>&1); if [ $? -ne 0 ]; then echo \"TypeScript errors found: $RESULT\" >&2; exit 2; fi; fi",
-            "timeout": 30
-          }
-        ]
-      },
-      {
-        "matcher": "Write|Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ ]] && grep -q 'import \\* from' \"$FILE\"; then echo 'Warning: Avoid wildcard imports for better tree-shaking' >&2; exit 2; fi"
-          }
-        ]
-      },
-      {
-        "matcher": "Write|Edit|MultiEdit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ && \"$FILE\" != *\".test.\"* && \"$FILE\" != *\".spec.\"* ]]; then DIR=$(dirname \"$FILE\"); BASENAME=$(basename \"$FILE\" | sed -E 's/\\.(js|jsx|ts|tsx)$//'); for TEST_FILE in \"$DIR/$BASENAME.test.\"* \"$DIR/$BASENAME.spec.\"*; do if [ -f \"$TEST_FILE\" ]; then echo \"Running tests for $TEST_FILE...\"; if command -v jest >/dev/null 2>&1; then npx jest \"$TEST_FILE\" --passWithNoTests; elif command -v vitest >/dev/null 2>&1; then npx vitest run \"$TEST_FILE\"; fi; break; fi; done; fi",
-            "timeout": 60
-          }
-        ]
-      }
-    ],
-    "Notification": [
-      {
-        "matcher": "",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "echo \"Claude Code notification: $(date)\" >> ~/.claude/notifications.log"
-          }
-        ]
-      }
-    ],
-    "Stop": [
-      {
-        "matcher": "",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if [[ -f package.json && $(git status --porcelain | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$') ]]; then echo 'Running linter on changed files...'; npx eslint $(git diff --name-only --diff-filter=ACMR | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$'); fi",
-            "timeout": 60
-          }
-        ]
-      },
-      {
-        "matcher": "",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if [[ -f package.json && $(git status --porcelain | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$') ]]; then echo 'Analyzing bundle size impact...'; if command -v bundlesize >/dev/null 2>&1; then npx bundlesize; elif npm list webpack-bundle-analyzer >/dev/null 2>&1; then echo 'Use: npx webpack-bundle-analyzer build/static/js/*.js'; else echo 'No bundle analysis tool found'; fi; fi",
-            "timeout": 60
-          }
-        ]
-      }
-    ]
-  }
-}

package/cli-tool/templates/javascript-typescript/.mcp.json

@@ -1,80 +0,0 @@
-{
-  "mcpServers": {
-    "typescript-sdk": {
-      "name": "TypeScript SDK",
-      "description": "Official Anthropic SDK for building MCP servers and clients in JS/TS",
-      "command": "node",
-      "args": ["path/to/ts-sdk-server.js"],
-      "env": {}
-    },
-    "github": {
-      "name": "GitHub MCP",
-      "description": "Integration with GitHub API for managing repos, issues, and PRs",
-      "command": "node",
-      "args": ["path/to/server-github"],
-      "env": {
-        "GITHUB_TOKEN": "..."
-      }
-    },
-    "puppeteer": {
-      "name": "Puppeteer MCP",
-      "description": "Browser automation using Google Puppeteer",
-      "command": "node",
-      "args": ["path/to/server-puppeteer"],
-      "env": {}
-    },
-    "slack": {
-      "name": "Slack MCP",
-      "description": "Access to real-time Slack conversations and workflows",
-      "command": "node",
-      "args": ["path/to/server-slack"],
-      "env": {
-        "SLACK_TOKEN": "..."
-      }
-    },
-    "filesystem": {
-      "name": "File System MCP",
-      "description": "Local file management; compatible with any language",
-      "command": "node",
-      "args": ["path/to/server-filesystem"],
-      "env": {}
-    },
-    "memory-bank": {
-      "name": "Memory Bank MCP",
-      "description": "Centralized memory system for AI agents",
-      "command": "server-memory",
-      "args": [],
-      "env": {}
-    },
-    "sequential-thinking": {
-      "name": "Sequential Thinking MCP",
-      "description": "Helps LLMs decompose complex tasks into logical steps",
-      "command": "code-reasoning",
-      "args": [],
-      "env": {}
-    },
-    "brave-search": {
-      "name": "Brave Search MCP",
-      "description": "Privacy-focused web search tool",
-      "command": "server-brave-search",
-      "args": [],
-      "env": {}
-    },
-    "google-maps": {
-      "name": "Google Maps MCP",
-      "description": "Integrates Google Maps for geolocation and directions",
-      "command": "server-google-maps",
-      "args": [],
-      "env": {
-        "GOOGLE_MAPS_API_KEY": "..."
-      }
-    },
-    "deep-graph": {
-      "name": "Deep Graph MCP (Code Graph)",
-      "description": "Transforms source code into semantic graphs via DeepGraph",
-      "command": "mcp-code-graph",
-      "args": [],
-      "env": {}
-    }
-  }
-}

package/cli-tool/templates/javascript-typescript/CLAUDE.md

@@ -1,185 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is a JavaScript/TypeScript project optimized for modern web development. The project uses industry-standard tools and follows best practices for scalable application development.
-
-## Development Commands
-
-### Package Management
-- `npm install` or `yarn install` - Install dependencies
-- `npm ci` or `yarn install --frozen-lockfile` - Install dependencies for CI/CD
-- `npm update` or `yarn upgrade` - Update dependencies
-
-### Build Commands
-- `npm run build` - Build the project for production
-- `npm run dev` or `npm start` - Start development server
-- `npm run preview` - Preview production build locally
-
-### Testing Commands
-- `npm test` or `npm run test` - Run all tests
-- `npm run test:watch` - Run tests in watch mode
-- `npm run test:coverage` - Run tests with coverage report
-- `npm run test:unit` - Run unit tests only
-- `npm run test:integration` - Run integration tests only
-- `npm run test:e2e` - Run end-to-end tests
-
-### Code Quality Commands
-- `npm run lint` - Run ESLint for code linting
-- `npm run lint:fix` - Run ESLint with auto-fix
-- `npm run format` - Format code with Prettier
-- `npm run format:check` - Check code formatting
-- `npm run typecheck` - Run TypeScript type checking
-
-### Development Tools
-- `npm run storybook` - Start Storybook (if available)
-- `npm run analyze` - Analyze bundle size
-- `npm run clean` - Clean build artifacts
-
-## Technology Stack
-
-### Core Technologies
-- **JavaScript/TypeScript** - Primary programming languages
-- **Node.js** - Runtime environment
-- **npm/yarn** - Package management
-
-### Common Frameworks
-- **React** - UI library with hooks and functional components
-- **Vue.js** - Progressive framework for building user interfaces
-- **Angular** - Full-featured framework for web applications
-- **Express.js** - Web application framework for Node.js
-- **Next.js** - React framework with SSR/SSG capabilities
-
-### Build Tools
-- **Vite** - Fast build tool and development server
-- **Webpack** - Module bundler
-- **Rollup** - Module bundler for libraries
-- **esbuild** - Extremely fast JavaScript bundler
-
-### Testing Framework
-- **Jest** - JavaScript testing framework
-- **Vitest** - Fast unit test framework
-- **Testing Library** - Simple and complete testing utilities
-- **Cypress** - End-to-end testing framework
-- **Playwright** - Cross-browser testing
-
-### Code Quality Tools
-- **ESLint** - JavaScript/TypeScript linter
-- **Prettier** - Code formatter
-- **TypeScript** - Static type checking
-- **Husky** - Git hooks
-
-## Project Structure Guidelines
-
-### File Organization
-```
-src/
-├── components/     # Reusable UI components
-├── pages/         # Page components or routes
-├── hooks/         # Custom React hooks
-├── utils/         # Utility functions
-├── services/      # API calls and external services
-├── types/         # TypeScript type definitions
-├── constants/     # Application constants
-├── styles/        # Global styles and themes
-└── tests/         # Test files
-```
-
-### Naming Conventions
-- **Files**: Use kebab-case for file names (`user-profile.component.ts`)
-- **Components**: Use PascalCase for component names (`UserProfile`)
-- **Functions**: Use camelCase for function names (`getUserData`)
-- **Constants**: Use UPPER_SNAKE_CASE for constants (`API_BASE_URL`)
-- **Types/Interfaces**: Use PascalCase with descriptive names (`UserData`, `ApiResponse`)
-
-## TypeScript Guidelines
-
-### Type Safety
-- Enable strict mode in `tsconfig.json`
-- Use explicit types for function parameters and return values
-- Prefer interfaces over types for object shapes
-- Use union types for multiple possible values
-- Avoid `any` type - use `unknown` when type is truly unknown
-
-### Best Practices
-- Use type guards for runtime type checking
-- Leverage utility types (`Partial`, `Pick`, `Omit`, etc.)
-- Create custom types for domain-specific data
-- Use enums for finite sets of values
-- Document complex types with JSDoc comments
-
-## Code Quality Standards
-
-### ESLint Configuration
-- Use recommended ESLint rules for JavaScript/TypeScript
-- Enable React-specific rules if using React
-- Configure import/export rules for consistent module usage
-- Set up accessibility rules for inclusive development
-
-### Prettier Configuration
-- Use consistent indentation (2 spaces recommended)
-- Set maximum line length (80-100 characters)
-- Use single quotes for strings
-- Add trailing commas for better git diffs
-
-### Testing Standards
-- Aim for 80%+ test coverage
-- Write unit tests for utilities and business logic
-- Use integration tests for component interactions
-- Implement e2e tests for critical user flows
-- Follow AAA pattern (Arrange, Act, Assert)
-
-## Performance Optimization
-
-### Bundle Optimization
-- Use code splitting for large applications
-- Implement lazy loading for routes and components
-- Optimize images and assets
-- Use tree shaking to eliminate dead code
-- Analyze bundle size regularly
-
-### Runtime Performance
-- Implement proper memoization (React.memo, useMemo, useCallback)
-- Use virtualization for large lists
-- Optimize re-renders in React applications
-- Implement proper error boundaries
-- Use web workers for heavy computations
-
-## Security Guidelines
-
-### Dependencies
-- Regularly audit dependencies with `npm audit`
-- Keep dependencies updated
-- Use lock files (`package-lock.json`, `yarn.lock`)
-- Avoid dependencies with known vulnerabilities
-
-### Code Security
-- Sanitize user inputs
-- Use HTTPS for API calls
-- Implement proper authentication and authorization
-- Store sensitive data securely (environment variables)
-- Use Content Security Policy (CSP) headers
-
-## Development Workflow
-
-### Before Starting
-1. Check Node.js version compatibility
-2. Install dependencies with `npm install`
-3. Copy environment variables from `.env.example`
-4. Run type checking with `npm run typecheck`
-
-### During Development
-1. Use TypeScript for type safety
-2. Run linter frequently to catch issues early
-3. Write tests for new features
-4. Use meaningful commit messages
-5. Review code changes before committing
-
-### Before Committing
-1. Run full test suite: `npm test`
-2. Check linting: `npm run lint`
-3. Verify formatting: `npm run format:check`
-4. Run type checking: `npm run typecheck`
-5. Test production build: `npm run build`

package/cli-tool/templates/javascript-typescript/README.md

@@ -1,259 +0,0 @@
-# JavaScript/TypeScript Templates
-
-**Claude Code configuration template optimized for modern JavaScript and TypeScript development**
-
-This folder contains a comprehensive Claude Code template specifically designed for JavaScript and TypeScript projects, supporting popular frameworks like React, Vue.js, Angular, and Node.js.
-
-## 📁 What's in This Folder
-
-This template provides the foundation for JavaScript/TypeScript development with Claude Code:
-
-### 📄 Files Included
-- **`CLAUDE.md`** - Complete JavaScript/TypeScript development guidance for Claude Code
-- **`README.md`** - This documentation file
-
-### 🎯 Template Features
-When you use this template with the installer, it automatically creates:
-- **`.claude/settings.json`** - Optimized settings for JS/TS projects
-- **`.claude/commands/`** - Ready-to-use commands for common tasks
-
-## 🚀 How to Use This Template
-
-### Option 1: Automated Installation (Recommended)
-Use the CLI installer to automatically set up this template in your project:
-
-```bash
-cd your-javascript-project
-npx claude-code-templates --language javascript-typescript
-```
-
-The installer will:
-- Copy the `CLAUDE.md` file to your project
-- Auto-detect your framework (React, Vue, Node.js, etc.)
-- Create appropriate `.claude/` configuration files
-- Set up framework-specific commands
-- Configure development workflows
-
-### Option 2: Manual Installation
-Copy the template manually for more control:
-
-```bash
-# Clone the repository
-git clone https://github.com/davila7/claude-code-templates.git
-
-# Copy the JavaScript/TypeScript template
-cp claude-code-templates/javascript-typescript/CLAUDE.md your-project/
-
-# Then use the CLI to complete the setup
-cd your-project
-npx claude-code-templates --language javascript-typescript
-```
-
-## 🎨 Framework Support
-
-This template automatically configures Claude Code for:
-
-### Frontend Frameworks
-- **React** - Components, hooks, JSX, testing with React Testing Library
-- **Vue.js** - Composition API, single-file components, state management
-- **Angular** - TypeScript-first development, RxJS patterns, CLI integration
-- **Svelte** - Compile-time optimizations, modern JavaScript patterns
-
-### Backend Frameworks
-- **Express.js** - RESTful APIs, middleware, error handling
-- **Fastify** - High-performance Node.js applications
-- **NestJS** - Enterprise-grade TypeScript framework
-- **Next.js** - Full-stack React applications with SSR/SSG
-
-### Build Tools & Testing
-- **Vite, Webpack, esbuild** - Modern build tool configurations
-- **Jest, Vitest, Cypress** - Testing framework optimization
-- **ESLint, Prettier, TypeScript** - Code quality and formatting
-
-## 🛠️ Commands Created by the Template
-
-When installed, this template provides commands for:
-
-### 🧪 Testing & Quality
-- **`/test`** - Run tests with Jest, Vitest, or other frameworks
-- **`/lint`** - ESLint with auto-fix capabilities
-- **`/typescript-migrate`** - Convert JavaScript files to TypeScript
-
-### 🔧 Development Tools
-- **`/debug`** - Debug Node.js applications and browser code
-- **`/refactor`** - AI-assisted code refactoring
-- **`/npm-scripts`** - Manage and execute npm/yarn scripts
-
-### ⚡ Framework-Specific Commands
-- **`/react-component`** - Generate React components (React projects)
-- **`/api-endpoint`** - Create Express.js endpoints (Node.js projects)
-- **`/route`** - Create API routes (Node.js projects)
-- **`/component`** - Create components (React/Vue projects)
-
-## 🎯 What Happens When You Install
-
-### Step 1: Framework Detection
-The installer analyzes your project to detect:
-- Package.json dependencies
-- Project structure
-- Framework type (React, Vue, Angular, Node.js)
-
-### Step 2: Template Configuration  
-Based on detection, it creates:
-```
-your-project/
-├── CLAUDE.md                    # Copied from this template
-├── .claude/
-│   ├── settings.json           # Framework-specific settings
-│   └── commands/               # Commands for your framework
-│       ├── test.md
-│       ├── lint.md
-│       ├── debug.md
-│       └── [framework-specific commands]
-```
-
-### Step 3: Framework Customization
-For specific frameworks, additional commands are added:
-
-**React Projects:**
-- Component generation with TypeScript support
-- React hooks creation and management
-- Testing with React Testing Library patterns
-
-**Node.js Projects:**
-- RESTful API endpoint creation
-- Middleware development patterns
-- Database integration helpers
-
-**Vue.js Projects:**
-- Single-file component templates
-- Composition API patterns
-- Vue 3 best practices
-
-## 📚 What's in the CLAUDE.md File
-
-The `CLAUDE.md` file in this folder contains comprehensive guidance for:
-
-### Development Commands
-- Package management (npm, yarn, pnpm)
-- Build commands (dev, build, preview)
-- Testing commands (unit, integration, e2e)
-- Code quality commands (lint, format, typecheck)
-
-### Technology Stack Guidelines
-- JavaScript/TypeScript best practices
-- Framework-specific patterns (React, Vue, Angular, Node.js)
-- Build tools configuration (Vite, Webpack, esbuild)
-- Testing frameworks (Jest, Vitest, Cypress, Playwright)
-
-### Project Structure Recommendations
-- File organization patterns
-- Naming conventions
-- TypeScript configuration
-- Code quality standards
-
-### Performance & Security
-- Bundle optimization strategies
-- Runtime performance tips
-- Security best practices
-- Dependency management
-
-## 🚀 Getting Started
-
-1. **Navigate to your JavaScript/TypeScript project:**
-   ```bash
-   cd your-project
-   ```
-
-2. **Run the installer:**
-   ```bash
-   npx claude-code-templates --language javascript-typescript
-   ```
-
-3. **Start Claude Code:**
-   ```bash
-   claude
-   ```
-
-4. **Try the commands:**
-   ```bash
-   /test          # Run your tests
-   /lint          # Check code quality
-   /component     # Create components (React/Vue)
-   /route         # Create API routes (Node.js)
-   ```
-
-## 🔧 Customization
-
-After installation, you can customize the setup:
-
-### Modify Commands
-Edit files in `.claude/commands/` to match your workflow:
-```bash
-# Edit the test command
-vim .claude/commands/test.md
-
-# Add a custom command
-echo "# Deploy Command" > .claude/commands/deploy.md
-```
-
-### Adjust Settings
-Update `.claude/settings.json` for your project:
-```json
-{
-  "framework": "react",
-  "testFramework": "jest", 
-  "packageManager": "npm",
-  "buildTool": "vite"
-}
-```
-
-### Add Framework Features
-The template adapts to your specific framework needs automatically.
-
-## 📖 Learn More
-
-- **Main Project**: [Claude Code Templates](../README.md)
-- **Common Templates**: [Universal patterns](../common/README.md)
-- **Python Templates**: [Python development](../python/README.md)
-- **CLI Tool**: [Automated installer](../cli-tool/README.md)
-
-## 💡 Why Use This Template?
-
-### Before (Manual Setup)
-```bash
-# Create CLAUDE.md from scratch
-# Research JS/TS best practices
-# Configure commands manually
-# Set up linting and testing
-# Configure TypeScript
-# ... hours of setup
-```
-
-### After (With This Template)
-```bash
-npx claude-code-templates --language javascript-typescript
-# ✅ Everything configured in 30 seconds!
-```
-
-### Benefits
-- **Instant Setup** - Get started immediately with proven configurations
-- **Framework-Aware** - Automatically adapts to React, Vue, Node.js, etc.
-- **Best Practices** - Uses industry-standard patterns and tools
-- **TypeScript Ready** - Full TypeScript support out of the box
-- **Testing Included** - Pre-configured for Jest, Vitest, and more
-
-## 🤝 Contributing
-
-Help improve this JavaScript/TypeScript template:
-
-1. Test the template with different JS/TS projects
-2. Report issues or suggest improvements
-3. Add support for new frameworks or tools
-4. Share your customizations and best practices
-
-Your contributions make this template better for the entire JavaScript/TypeScript community!
-
----
-
-**Ready to supercharge your JavaScript/TypeScript development?** Run `npx claude-code-templates --language javascript-typescript` in your project now!