claude-code-templates 1.21.12 → 1.21.13

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

@@ -0,0 +1,142 @@
+{
+  "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

@@ -0,0 +1,80 @@
+{
+  "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

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

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