claude-code-templates 1.21.12 → 1.21.14

package/cli-tool/test-detailed.sh

@@ -0,0 +1,267 @@
+#!/bin/bash
+
+# Detailed test script for claude-code-templates CLI
+set -e
+
+echo "🔬 Starting Detailed CLI Testing..."
+
+TEST_BASE_DIR="/tmp/claude-detailed-test-$(date +%s)"
+mkdir -p "$TEST_BASE_DIR"
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Test counter
+TOTAL_TESTS=0
+PASSED_TESTS=0
+
+run_test() {
+    local test_name="$1"
+    local test_command="$2"
+    
+    TOTAL_TESTS=$((TOTAL_TESTS + 1))
+    echo -e "${YELLOW}🔸 Test $TOTAL_TESTS: $test_name${NC}"
+    
+    if eval "$test_command"; then
+        echo -e "${GREEN}✅ PASSED${NC}"
+        PASSED_TESTS=$((PASSED_TESTS + 1))
+    else
+        echo -e "${RED}❌ FAILED${NC}"
+        echo "   Command: $test_command"
+    fi
+    echo ""
+}
+
+# Test different scenarios
+test_scenarios() {
+    # Framework combinations to test
+    local scenarios=(
+        "javascript-typescript:react"
+        "javascript-typescript:vue"
+        "javascript-typescript:angular"
+        "javascript-typescript:node"
+        "javascript-typescript:none"
+        "common:none"
+    )
+    
+    for scenario in "${scenarios[@]}"; do
+        local language="${scenario%:*}"
+        local framework="${scenario#*:}"
+        
+        local test_dir="$TEST_BASE_DIR/test-$language-$framework"
+        mkdir -p "$test_dir"
+        cd "$test_dir"
+        
+        echo -e "${YELLOW}📋 Testing scenario: $language + $framework${NC}"
+        
+        # Test dry run
+        run_test "Dry run for $language + $framework" \
+            "claude-code-templates --language $language --framework $framework --dry-run --yes > /dev/null 2>&1"
+        
+        # Test actual installation
+        run_test "Installation for $language + $framework" \
+            "claude-code-templates --language $language --framework $framework --yes > /dev/null 2>&1"
+        
+        # Check if CLAUDE.md was created
+        run_test "CLAUDE.md exists for $language + $framework" \
+            "[ -f 'CLAUDE.md' ]"
+        
+        # Check if .claude directory was created
+        run_test ".claude directory exists for $language + $framework" \
+            "[ -d '.claude' ]"
+        
+        # Check if settings.json was created (for non-common languages)
+        if [ "$language" != "common" ]; then
+            run_test "settings.json exists for $language + $framework" \
+                "[ -f '.claude/settings.json' ]"
+            
+            # Test hooks functionality
+            run_test "settings.json contains hooks for $language" \
+                "grep -q '\"hooks\"' '.claude/settings.json'"
+            
+            run_test "settings.json has valid JSON structure" \
+                "jq . '.claude/settings.json' > /dev/null 2>&1"
+            
+            # Verify specific hook types exist for non-common languages
+            run_test "PreToolUse hooks exist for $language" \
+                "jq '.hooks.PreToolUse' '.claude/settings.json' | grep -q '\['"
+            
+            run_test "PostToolUse hooks exist for $language" \
+                "jq '.hooks.PostToolUse' '.claude/settings.json' | grep -q '\['"
+        fi
+        
+        # Check for framework-specific commands
+        case "$framework" in
+            "react")
+                run_test "React component command exists" \
+                    "[ -f '.claude/commands/component.md' ]"
+                run_test "React hooks command exists" \
+                    "[ -f '.claude/commands/hooks.md' ]"
+                ;;
+            "vue")
+                run_test "Vue components command exists" \
+                    "[ -f '.claude/commands/components.md' ]"
+                run_test "Vue composables command exists" \
+                    "[ -f '.claude/commands/composables.md' ]"
+                ;;
+            "angular")
+                run_test "Angular components command exists" \
+                    "[ -f '.claude/commands/components.md' ]"
+                run_test "Angular services command exists" \
+                    "[ -f '.claude/commands/services.md' ]"
+                ;;
+            "node")
+                run_test "Node API endpoint command exists" \
+                    "[ -f '.claude/commands/api-endpoint.md' ]"
+                run_test "Node middleware command exists" \
+                    "[ -f '.claude/commands/middleware.md' ]"
+                ;;
+        esac
+        
+        echo ""
+    done
+}
+
+# Test error scenarios
+test_error_scenarios() {
+    echo -e "${YELLOW}🚨 Testing Error Scenarios${NC}"
+    
+    # Invalid language
+    run_test "Invalid language handling" \
+        "! claude-code-templates --language invalid-lang --yes > /dev/null 2>&1"
+    
+    # Invalid framework
+    run_test "Invalid framework handling" \
+        "! claude-code-templates --language javascript-typescript --framework invalid-framework --yes > /dev/null 2>&1"
+}
+
+# Test hooks functionality specifically
+test_hooks_functionality() {
+    echo -e "${YELLOW}🔧 Testing Hooks Functionality${NC}"
+    
+    local test_dir="$TEST_BASE_DIR/test-hooks"
+    mkdir -p "$test_dir"
+    cd "$test_dir"
+    
+    # Test JavaScript/TypeScript hooks
+    run_test "JS/TS installation with default hooks" \
+        "claude-code-templates --language javascript-typescript --yes > /dev/null 2>&1"
+    
+    run_test "JS/TS hooks count verification" \
+        "[ \$(jq '.hooks.PreToolUse | length' '.claude/settings.json') -gt 0 ]"
+    
+    run_test "JS/TS PostToolUse hooks verification" \
+        "[ \$(jq '.hooks.PostToolUse | length' '.claude/settings.json') -gt 0 ]"
+    
+    run_test "JS/TS Stop hooks verification" \
+        "[ \$(jq '.hooks.Stop | length' '.claude/settings.json') -gt 0 ]"
+    
+    # Test specific hook content
+    run_test "Console.log detection hook exists" \
+        "jq -r '.hooks.PreToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'console'"
+    
+    run_test "Prettier formatting hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'prettier'"
+    
+    run_test "TypeScript checking hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'tsc'"
+    
+    run_test "ESLint hook exists in Stop hooks" \
+        "jq -r '.hooks.Stop[].hooks[].command' '.claude/settings.json' | grep -q 'eslint'"
+    
+    # Test other languages
+    cd "$TEST_BASE_DIR"
+    
+    # Test Python hooks
+    mkdir -p "test-python-hooks"
+    cd "test-python-hooks"
+    
+    run_test "Python installation with hooks" \
+        "claude-code-templates --language python --yes > /dev/null 2>&1"
+    
+    run_test "Python Black formatter hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'black'"
+    
+    run_test "Python flake8 hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'flake8'"
+    
+    # Test Go hooks
+    cd "$TEST_BASE_DIR"
+    mkdir -p "test-go-hooks"
+    cd "test-go-hooks"
+    
+    run_test "Go installation with hooks" \
+        "claude-code-templates --language go --yes > /dev/null 2>&1"
+    
+    run_test "Go fmt hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'gofmt'"
+    
+    run_test "Go vet hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'go vet'"
+    
+    # Test Rust hooks
+    cd "$TEST_BASE_DIR"
+    mkdir -p "test-rust-hooks"
+    cd "test-rust-hooks"
+    
+    run_test "Rust installation with hooks" \
+        "claude-code-templates --language rust --yes > /dev/null 2>&1"
+    
+    run_test "Rust fmt hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'rustfmt'"
+    
+    run_test "Rust clippy hook exists" \
+        "jq -r '.hooks.PostToolUse[].hooks[].command' '.claude/settings.json' | grep -q 'clippy'"
+}
+
+# Test command variants
+test_command_variants() {
+    echo -e "${YELLOW}🔧 Testing Command Variants${NC}"
+    
+    local test_dir="$TEST_BASE_DIR/test-variants"
+    mkdir -p "$test_dir"
+    cd "$test_dir"
+    
+    # Test all command aliases
+    run_test "claude-code-templates command" \
+        "claude-code-templates --version > /dev/null 2>&1"
+    
+    run_test "create-claude-config command" \
+        "create-claude-config --version > /dev/null 2>&1"
+    
+    run_test "claude-code-template command" \
+        "claude-code-template --version > /dev/null 2>&1"
+    
+    run_test "claude-init command" \
+        "claude-init --version > /dev/null 2>&1"
+}
+
+# Run all tests
+echo "🏁 Starting test execution..."
+test_scenarios
+test_hooks_functionality
+test_error_scenarios
+test_command_variants
+
+# Summary
+echo -e "${YELLOW}📊 Test Summary${NC}"
+echo -e "Total tests: $TOTAL_TESTS"
+echo -e "Passed: ${GREEN}$PASSED_TESTS${NC}"
+echo -e "Failed: ${RED}$((TOTAL_TESTS - PASSED_TESTS))${NC}"
+
+if [ $PASSED_TESTS -eq $TOTAL_TESTS ]; then
+    echo -e "${GREEN}🎉 All tests passed!${NC}"
+    exit_code=0
+else
+    echo -e "${RED}💥 Some tests failed!${NC}"
+    exit_code=1
+fi
+
+# Cleanup
+echo -e "${YELLOW}🧹 Cleaning up...${NC}"
+rm -rf "$TEST_BASE_DIR"
+
+exit $exit_code

package/dev-server.js

@@ -0,0 +1,46 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+const port = 3001;
+
+// Serve static files from docs directory
+app.use(express.static('docs'));
+
+// Handle filter routes - redirect to index.html
+const filterRoutes = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'templates'];
+filterRoutes.forEach(filter => {
+    app.get(`/${filter}`, (req, res) => {
+        res.sendFile(path.join(__dirname, 'docs', 'index.html'));
+    });
+});
+
+// Handle component routes
+app.get('/component/:type/:name', (req, res) => {
+    res.sendFile(path.join(__dirname, 'docs', 'component.html'));
+});
+
+// Handle blog routes
+app.get('/blog/*', (req, res) => {
+    const blogPath = req.path.replace('/blog', '');
+    res.sendFile(path.join(__dirname, 'docs', 'blog', blogPath, 'index.html'), (err) => {
+        if (err) {
+            res.status(404).send('Blog post not found');
+        }
+    });
+});
+
+// Default route
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'docs', 'index.html'));
+});
+
+app.listen(port, () => {
+    console.log(`Development server running at http://localhost:${port}`);
+    console.log('Testing URLs:');
+    console.log(`- http://localhost:${port}/ (agents)`);
+    console.log(`- http://localhost:${port}/mcps`);
+    console.log(`- http://localhost:${port}/commands`);
+    console.log(`- http://localhost:${port}/settings`);
+    console.log(`- http://localhost:${port}/hooks`);
+    console.log(`- http://localhost:${port}/templates`);
+});

package/docs/CLAUDE.md

@@ -0,0 +1,363 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This directory contains the static website (aitmpl.com) that serves as the public web interface for browsing and installing Claude Code components. The site is a vanilla JavaScript application that loads component data dynamically and provides an interactive browsing experience for 500+ components including agents, commands, settings, hooks, MCPs, and templates.
+
+## Development Commands
+
+### Local Development
+```bash
+# Serve locally with any static file server
+python -m http.server 8000
+# or
+npx http-server
+
+# Open browser to http://localhost:8000
+```
+
+### Component Data Generation
+```bash
+# From project root - regenerate components.json
+cd ..
+python generate_components_json.py
+
+# This creates/updates docs/components.json with all components
+```
+
+### Deployment
+- Site is automatically deployed to GitHub Pages when changes are pushed to `docs/` directory
+- Deployed at: https://aitmpl.com (davila7.github.io/claude-code-templates)
+- Vercel configuration in `vercel.json` for routing
+
+## Architecture
+
+### Data Flow
+1. **Component Generation**: Python script (`generate_components_json.py`) scans `cli-tool/components/` and generates `docs/components.json` (~2MB file with embedded content)
+2. **Static Loading**: Website loads `components.json` on page load (with mobile optimization and progress indicators)
+3. **Dynamic Rendering**: JavaScript renders component cards based on user filters and search
+4. **Download Tracking**: Supabase integration tracks component installations via backend API
+
+### Key Files
+
+#### HTML Pages
+- `index.html` - Main page with component browser and search
+- `component.html` - Individual component detail pages
+- `plugin.html` - Plugin marketplace interface
+- `trending.html` - Trending components dashboard
+- `download-stats.html` - Analytics and download statistics
+
+#### JavaScript Architecture (`js/`)
+- `data-loader.js` - Loads and caches components.json, handles data fetching
+- `search-functionality.js` - Real-time search across all components with fuzzy matching
+- `cart-manager.js` - Shopping cart for batch component installation
+- `stack-router.js` - Client-side routing for company stacks and plugins
+- `index-events.js` - Event handlers for filters, modals, and user interactions
+- `plugin-page.js` - Plugin marketplace functionality
+- `trending.js` - Trending components data visualization
+
+#### CSS (`css/`)
+- Modular CSS with separate files for components, modals, responsive design
+- Terminal-themed design system with monospace fonts and CLI aesthetics
+
+#### Data Files
+- `components.json` - Main component catalog (~2MB, generated file)
+- `trending-data.json` - Trending components rankings
+- `claude-jobs.json` - Job postings data
+
+### Component System
+
+#### Component Types
+Each component type has specific structure:
+
+**Agents** (162 total)
+- AI specialists organized by category (Development, Data/AI, Security, Business, etc.)
+- Stored in `cli-tool/components/agents/{category}/{name}.md`
+- Installation: `--agent <name>`
+
+**Commands** (210 total)
+- Custom slash commands organized by category
+- Stored in `cli-tool/components/commands/{category}/{name}.md`
+- Installation: `--command <name>`
+
+**Settings** (60 total)
+- Claude Code configuration files
+- Includes statuslines with accompanying Python scripts
+- Stored in `cli-tool/components/settings/{category}/{name}.json`
+- Installation: `--setting <name>`
+
+**Hooks** (39 total)
+- Event-driven automation triggers
+- Stored in `cli-tool/components/hooks/{category}/{name}.md`
+- Installation: `--hook <name>`
+
+**MCPs** (55 total)
+- Model Context Protocol integrations
+- Stored in `cli-tool/components/mcps/{name}.json`
+- Installation: `--mcp <name>`
+
+**Templates** (14 total)
+- Complete project configurations
+- Organized by language and framework in `cli-tool/templates/`
+- Installation: `--template <language>`
+
+**Plugins** (10 total)
+- Component bundles with marketplace metadata
+- Defined in `.claude-plugin/marketplace.json`
+- Installation: `--plugin <name>`
+
+### Data Loading Strategy
+
+The site implements a multi-stage loading strategy for optimal mobile performance:
+
+1. **Initial Load**: Show loading indicator with progress bar
+2. **Lazy Parsing**: Load components.json in chunks to avoid blocking
+3. **Progressive Rendering**: Render visible cards first, lazy-load others
+4. **Search Indexing**: Build search index in background
+5. **Caching**: LocalStorage caching for repeat visits
+
+### Search Functionality
+
+Real-time search across all components:
+- **Fuzzy Matching**: Tolerates typos and partial matches
+- **Multi-field Search**: Searches name, description, category, type
+- **Filter Integration**: Combines with type filters (agents/commands/etc)
+- **Category Filtering**: Dynamic category chips based on active filter
+- **Sorting**: Alphabetical or by download count
+
+### Shopping Cart System
+
+Batch installation builder:
+- Add multiple components across types (agents, commands, settings, hooks, MCPs)
+- Generates single NPX command for installation
+- Supports sharing cart via URL parameters
+- Social sharing to Twitter/Threads
+
+### Plugin Marketplace
+
+Plugin system for component bundles:
+- Each plugin contains agents, commands, and MCPs
+- Defined in marketplace.json with metadata
+- Installation installs all plugin components
+- Examples: `supabase-toolkit`, `nextjs-vercel-pro`, `ai-ml-toolkit`
+
+### Download Analytics
+
+Supabase-powered analytics:
+- Tracks component installations via API endpoints
+- Aggregates download counts by component and type
+- Displays trending components and download stats
+- Real-time updates with background refresh
+
+## Important Implementation Patterns
+
+### Component Data Structure
+
+```javascript
+// components.json structure
+{
+  "agents": [{
+    "name": "agent-name",
+    "category": "category-name",
+    "content": "Full markdown content...",
+    "path": "agents/category/agent-name.md",
+    "url": "https://github.com/..."
+  }],
+  "commands": [...],
+  "mcps": [...],
+  "settings": [...],
+  "hooks": [...],
+  "templates": [...],
+  "plugins": [...]
+}
+```
+
+### Dynamic Component Loading
+
+```javascript
+// Loading pattern from data-loader.js
+async function loadAllComponentsData() {
+  const response = await fetch('components.json');
+  const data = await response.json();
+  componentsData = data;
+  collectAvailableCategories();
+  generateUnifiedComponentCards();
+}
+```
+
+### Filter and Category System
+
+```javascript
+// Current filter state
+let currentFilter = 'agents'; // or 'commands', 'mcps', etc.
+let currentCategoryFilter = 'all'; // or specific category
+
+// Update filters
+function handleFilterClick(event, filter) {
+  currentFilter = filter;
+  updateCategorySubFilters();
+  generateUnifiedComponentCards();
+}
+```
+
+### Installation Command Generation
+
+```javascript
+// Pattern from cart-manager.js
+function generateCartCommand(cart) {
+  const flags = [];
+  if (cart.agents.length) flags.push(...cart.agents.map(a => `--agent ${a}`));
+  if (cart.commands.length) flags.push(...cart.commands.map(c => `--command ${c}`));
+  // ... other types
+  return `npx claude-code-templates@latest ${flags.join(' ')} --yes`;
+}
+```
+
+## File Generation Workflow
+
+### Updating Component Catalog
+
+When components are added/modified in `cli-tool/components/`:
+
+1. Run component generation script:
+   ```bash
+   cd /path/to/project/root
+   python generate_components_json.py
+   ```
+
+2. This script:
+   - Scans all directories in `cli-tool/components/`
+   - Scans all templates in `cli-tool/templates/`
+   - Fetches download stats from Supabase
+   - Embeds file content inline
+   - Excludes Python scripts from public listings (but includes them as dependencies)
+   - Generates `docs/components.json`
+
+3. Commit changes:
+   ```bash
+   git add docs/components.json
+   git commit -m "Update component catalog"
+   ```
+
+### Testing Locally
+
+Before committing:
+1. Serve site locally: `python -m http.server 8000`
+2. Test component loading and search
+3. Verify filter functionality
+4. Check responsive design on mobile
+5. Test cart and installation command generation
+
+## SEO and Metadata
+
+### Structured Data
+- Schema.org markup for SoftwareApplication
+- Open Graph tags for social sharing
+- Twitter Card metadata
+- Sitemap.xml for search engines
+
+### Performance Optimization
+- Cache-busting query parameters for dynamic content
+- Progressive loading for large JSON files
+- LocalStorage caching for repeat visits
+- Lazy loading for images and components below fold
+
+## External Integrations
+
+### GitHub API
+- Fetches component files dynamically (legacy, now uses components.json)
+- Links to source files on GitHub
+
+### Supabase
+- Tracks component downloads
+- Aggregates download statistics
+- Powers trending components
+
+### Vercel
+- Handles routing for SPA-style URLs
+- Configured in `vercel.json`
+
+### Analytics
+- Hotjar for user behavior tracking
+- Counter.dev for page view analytics
+
+## Deployment Checklist
+
+Before deploying to production:
+
+1. **Component Data**: Run `python generate_components_json.py` to update components.json
+2. **Test Locally**: Verify all pages load correctly
+3. **Check Links**: Ensure GitHub links point to correct paths
+4. **Verify Search**: Test search functionality with various queries
+5. **Mobile Testing**: Check responsive design on multiple devices
+6. **Cart Testing**: Verify installation commands are generated correctly
+7. **Analytics**: Confirm tracking is working
+
+## Common Development Tasks
+
+### Adding New Component Type
+
+1. Update `generate_components_json.py` to scan new component directory
+2. Add new filter button in `index.html`
+3. Add icon configuration in `js/script.js` typeConfig
+4. Update cart-manager.js to handle new type
+5. Regenerate components.json
+
+### Modifying Search Behavior
+
+Edit `js/search-functionality.js`:
+- `performSearch()` - Main search logic
+- `fuzzyMatch()` - Matching algorithm
+- `highlightMatches()` - Result highlighting
+
+### Updating Styles
+
+CSS is modular:
+- `css/styles.css` - Main styles and variables
+- `css/components.css` - Component cards and grid
+- `css/responsive.css` - Mobile breakpoints
+- `css/modals.css` - Modal dialogs
+- `css/cart.css` - Shopping cart sidebar
+
+## Browser Compatibility
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- ES6+ JavaScript features (Fetch API, async/await, template literals)
+- CSS Grid and Flexbox for layout
+- No build step required (vanilla JavaScript)
+
+## Performance Considerations
+
+### Large File Handling
+- `components.json` is ~2MB - implement progressive loading
+- Use virtual scrolling for large component lists
+- Debounce search input to avoid excessive filtering
+- Cache parsed JSON in memory after initial load
+
+### Mobile Optimization
+- Lazy load images and component content
+- Reduce initial bundle size
+- Minimize re-renders during search/filter
+- Use CSS animations sparingly
+
+## Troubleshooting
+
+### Components Not Loading
+- Check browser console for fetch errors
+- Verify components.json is accessible
+- Ensure CORS is properly configured
+- Check GitHub API rate limits (if using legacy loading)
+
+### Search Not Working
+- Verify search index is built correctly
+- Check fuzzy match threshold in search-functionality.js
+- Ensure component data includes searchable fields
+
+### Cart Not Saving
+- Check LocalStorage is enabled
+- Verify cart data structure matches expected format
+- Clear cache and reload if data structure changed
+
+This website serves as the primary user interface for the Claude Code Templates ecosystem, providing an intuitive way to discover and install 500+ components through a terminal-themed, responsive web interface.

package/docs/CNAME

@@ -0,0 +1 @@
+aitmpl.com