## Search System ✨
- ✅ Real-time search across all components (agents, commands, settings, hooks, MCPs)
- ✅ Intelligent scoring algorithm with multi-field matching
- ✅ Search result cards with full flip functionality and compact design
- ✅ Proper integration with global event handlers
- ✅ Hover effects and copy button functionality matching normal cards
- ✅ Keyboard shortcuts (Escape, Enter) and responsive design
## Cart Manager Fixes 🛒
- ✅ Added support for settings and hooks categories (5 total categories)
- ✅ Updated cart initialization, UI, and command generation
- ✅ Fixed JavaScript errors when adding settings/hooks to cart
- ✅ Added proper cart sections and icons for all component types
## Technical Improvements 🔧
- ✅ Fixed showComponentDetails function calls with correct parameters
- ✅ Matching HTML structure with normal cards (command-display, command-code-container)
- ✅ Proper CSS styling with debug helpers for troubleshooting
- ✅ Compact card design optimized for available space
- ✅ Search button temporarily hidden per user request
## Additional Features 📋
- ✅ Added comprehensive ASCII roadmap for future development phases
- ✅ Enhanced component path handling and category conversions
- ✅ Improved error handling and component loading
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added search button to filter buttons section with toggle functionality
- Implemented real-time search across all component categories (except templates)
- Search triggers after 3+ characters with 300ms debouncing for performance
- Searches through component names, descriptions, categories, tags, and keywords
- Added comprehensive search UI with input field, clear button, and results info
- Display search results grouped by category with match scoring
- Shows "No results" with helpful search suggestions when no matches found
- Integrated with existing cart functionality and component installation commands
- Added keyboard shortcuts (Escape to close, Enter to focus first result)
- Responsive design with mobile-optimized search interface
- Search data loaded from main components.json with fallback mechanisms
Features:
✅ Search across agents, commands, settings, hooks, and MCPs
✅ Real-time results with intelligent scoring algorithm
✅ Category-based result grouping and filtering
✅ Keyboard navigation support
✅ Mobile-responsive search interface
✅ Integration with existing cart and installation workflows
✅ Performance optimized with debouncing and caching
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated title and meta descriptions to emphasize Anthropic Claude Code connection
- Added structured data (JSON-LD) for better search engine understanding
- Enhanced keywords to include "Claude Opus 4.1", "terminal velocity", "deep coding"
- Added "Official Claude Code" button linking to anthropic.com/claude-code
- Repositioned messaging to align with Anthropic's official Claude Code value propositions
- Improved OG and Twitter card descriptions for better social sharing
- Added product/platform meta tags for better categorization
SEO targeting: "Claude Code", "Anthropic Claude", "AI development", "Claude Opus 4.1"
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 9 Settings components (telemetry, permissions, model, cleanup)
- Add 6 Hooks components (formatting, git integration, backups, testing)
- Implement CLI installation with --setting and --hook flags
- Add conflict detection that prompts user before overwriting
- Merge settings into .claude/settings.json with intelligent deep merge
- Update data-loader.js to handle new component types
- Add filter buttons for Settings and Hooks in web interface
- Generate components.json with new Settings and Hooks sections
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Step 2 Enhancement:
✅ Updated "Choose & Run Template" to "Build Your Stack"
✅ Reflects new shopping cart functionality for complete stacks
✅ Cleaner messaging focused on multi-component solutions
## New Tool Added:
✅ **Live Chat Monitor**: npx claude-code-templates@latest --chats
✅ Real-time Claude message monitoring and tool execution analysis
✅ Third tool card for comprehensive development workflow
## Footer Redesign:
✅ **AITMPL ASCII branding** on the left with tagline
✅ **Removed Download Analytics** - cleaner link structure
✅ **Added docs.aitmpl.com** as Documentation link
✅ **Centered links** to avoid cart button overlap
✅ Better mobile responsive layout with proper spacing
## Stats Section:
✅ More compact spacing closer to header
✅ Reduced margins and padding for cleaner layout
✅ Better mobile optimization with smaller badges
## Mobile UX:
✅ Footer links avoid floating cart button interference
✅ Proper spacing and responsive breakpoints
✅ Clean ASCII art scaling on mobile devices
Professional, modern interface with improved visual hierarchy.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Disabled cart-sidebar::before overlay that was blurring background
- Removed backdrop-filter blur effect completely
- Cards remain fully visible and readable when cart is open
- Maintains JavaScript overlay for click-to-close functionality
- Background content no longer blocked or dimmed
## Critical Issues Resolved:
- **Lazy loading**: Components.json now loads in 50-item batches instead of 1.6MB at once
- **Timeouts**: Added 8-second timeouts to prevent hanging fetches
- **Loading states**: Visual progress indicators for better UX
- **MutationObserver**: Optimized with debouncing and selective monitoring
- **Background loading**: Non-blocking progressive loading
- **Error handling**: Comprehensive fallbacks and user-friendly error messages
## Technical Improvements:
- RequestAnimationFrame instead of setTimeout for smoother animations
- Debounced DOM updates to prevent excessive reflows
- Intelligent caching with cache-friendly timestamps
- Progressive enhancement with fallback data
- Memory-efficient pagination system
- Performance-optimized CSS animations
## Mobile-Specific Fixes:
- Reduced initial payload from 1.6MB to ~200KB
- Prevented UI thread blocking during data parsing
- Added mobile-optimized loading states
- Improved error handling for slow connections
This should resolve the mobile freezing issues completely.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Shopify-style cart sidebar with drag-from-right animation
- Implement Add to Stack buttons for all component cards
- Create dynamic command generation for agents, commands, and MCPs
- Add cart state management with localStorage persistence
- Implement notification system with auto-dismiss
- Add social sharing for X/Twitter and Threads
- Create overlay copy buttons for command text in cards and cart
- Optimize card layout grid system (4 columns desktop, 2 tablet, 1 mobile)
- Add cart floating button with item count badge
- Fix scroll prevention and notification persistence issues
- Remove quotes from agent parameters in generated commands
- Implement compact cart item design with Clear All repositioning
- Add comprehensive cart styling with responsive design
- Include share functionality with proper URL encoding
- Update CLI package version to 1.14.16 for npm compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Major Features Added
### 🏗️ Templates System Overhaul
- **New data source**: Templates now load from `components.json` generated from `cli-tool/templates/`
- **Enhanced structure**: Support for both language and framework templates
- **Recursive file scanning**: Includes `.claude/` folder contents (agents, commands, settings)
- **Smart categorization**: Language-based category filters for templates
- **Proper install commands**: `--template=python --yes` for languages, `--template=django --yes` for frameworks
### 📦 Template Management
- **Updated generate_components_json.py**: Scans `cli-tool/templates/` recursively
- **File inventory**: Tracks all template files including Claude Code configuration
- **Template modal**: Shows complete file list for each template
- **GitHub integration**: Direct links to template folders
### 🎨 UI/UX Improvements
- **Card flip animations**: Restored original template card functionality from script.js
- **MCP optimization**: Removed unnecessary descriptions from MCP cards and modals
- **Category filters**: Templates now show language-based filters (python, ruby, etc.)
- **Filter reset**: Switching main filters automatically resets category selection
- **Enhanced modals**: Comprehensive template contribution guide with language vs framework instructions
### 🔧 Code Organization
- **Structured directories**: Moved all CSS files to `css/` and JS files to `js/`
- **Updated references**: All HTML files now reference organized file paths
- **Better maintainability**: Cleaner project structure for future development
### 🚀 Enhanced Contribution Flow
- **Detailed template modal**: Step-by-step guide for contributing languages vs frameworks
- **Required file structure**: Clear documentation of Claude Code configuration files
- **GitHub workflow**: Proper git commands and testing instructions
## Technical Improvements
- Fixed card flip functionality conflicts
- Enhanced pagination system
- Improved modal management
- Better error handling and fallbacks
- Consistent styling across components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 🔧 Workflow Builder Web Interface
- **Drag-and-Drop Canvas**: Visual workflow building with sortable steps
- **Component Library**: Browse and search all agents, commands, and MCPs
- **Real-time Preview**: Live workflow statistics and step management
- **Hash Generation**: Secure workflow encoding with CryptoJS
- **YAML Export**: Generate executable workflow files
- **Modal Interface**: Professional workflow generation dialog
## ⚡ CLI Workflow Installation
- **--workflow option**: Install workflows from hash (format: #hash)
- **Batch Installation**: Download all workflow components automatically
- **Silent Mode**: Clean output when installing multiple components
- **YAML Generation**: Create step-by-step execution files
- **Error Handling**: Comprehensive validation and user guidance
## 🎨 UI/UX Features
- **Responsive Design**: Works on desktop and mobile devices
- **Professional Styling**: Clean, modern interface with proper theming
- **Interactive Components**: Hover effects, drag feedback, and animations
- **Search Functionality**: Filter components by name and category
- **Navigation Integration**: Added workflows link to main header
## 🔗 Architecture
- **Modular Frontend**: Separate CSS and JS files for maintainability
- **GitHub Integration**: Dynamic component loading from organized categories
- **Local Storage**: Workflow state management for hash generation
- **Component Tracking**: Analytics integration for usage monitoring
## 🚀 Workflow Execution Flow
1. **Build**: Create workflows in drag-and-drop interface
2. **Generate**: Export hash and YAML configuration
3. **Install**: Use CLI with generated hash to download all components
4. **Execute**: Use YAML file with Claude Code for step-by-step automation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- ✨ Add comprehensive download tracking infrastructure
- 📊 Create detailed analytics dashboard at /download-stats.html
- 🔧 Implement GitHub Actions workflow for stats processing
- 🎨 Add elegant footer link instead of main page widget
- 📈 Support interactive charts with Chart.js integration
- 🔒 Maintain privacy-first approach with anonymous tracking
- 📱 Responsive design for mobile and desktop
- 🚀 Ready for production deployment
Components added:
- GitHub Actions workflow for manual tracking triggers
- Analytics JSON data structure and processing
- Interactive dashboard with doughnut and line charts
- Progress bars and detailed component metrics
- Terminal-style design consistent with site theme
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Major Changes
### 🔄 GitHub Download System
- All templates now download directly from GitHub instead of local files
- Components (agents, commands, MCPs) download from `components/` directory
- Templates download from `templates/` directory
- Added download caching to avoid repeated requests
- Show clear GitHub URLs for transparency
### 🆕 New --template Parameter
- Added `--template` parameter as modern replacement for `--language`/`--framework`
- Maintains backward compatibility with deprecated `--language`/`--framework`
- Updated web interface to use new syntax: `npx claude-code-templates@latest --template=python --yes`
### 🎯 Component vs Template Separation
- `--agent=name`: Downloads individual component to `.claude/agents/`
- `--command=name`: Downloads individual component to `.claude/commands/`
- `--mcp=name`: Downloads individual component to `.mcp.json`
- `--template=name`: Downloads complete template with full configuration
### 📦 Web Interface Updates
- Updated installation commands to use `npx` with latest version
- Changed from `--language`/`--framework` to `--template` syntax
- Made global installation optional in step 1
- All template cards now show correct download commands
### ✅ Benefits
- Always up-to-date content from GitHub main branch
- No need to republish npm package for content updates
- Clear distinction between individual components and full templates
- Improved user experience with transparent download sources
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reorder HTML sections to show downloadStatsSection before unified-filter-section
- Community downloads statistics now appear above component filter buttons
- Maintains proper visual hierarchy as requested
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Comment out documentation button link to /docu/
- Prevents users from accessing broken documentation page
- Will restore once Docusaurus deployment is fixed
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix tsconfig.json by removing invalid @docusaurus/tsconfig extends
- Add proper TypeScript configuration for Docusaurus
- Complete download count badges for template, agent, command, and MCP cards
- Add analytics data integration with card regeneration
- Include tracking service and GitHub Actions workflow for analytics processing
- Update web interface with download statistics display
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added a new SVG file `undraw_docusaurus_tree.svg` to the static images directory for enhanced visual representation.
- Introduced a new TypeScript configuration file `tsconfig.json` to improve editor experience and project structure.
- Created responsive web interface for browsing available templates
- Dynamic template loading from GitHub repository's templates.js file
- Interactive card design with flip animation to show installation commands
- Integration with Devicon CDN for professional framework logos
- Copy-to-clipboard functionality with visual feedback
- Mobile-responsive design with modern UI/UX
- GitHub Pages configuration for automatic deployment
- Auto-refresh every 5 minutes to stay synchronized with repository
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
daniel