- Fix root cause of X/Twitter preview not showing: image path was
/social-preview.png but file is at /images/social-preview.png
- Fix component.html referencing non-existent og-image.png
- Change twitter meta tags from property= to name= (correct spec) in
14 files (all blog articles, blog index, featured, jobs)
- Standardize image URLs from www.aitmpl.com to aitmpl.com
- Update jobs.html URLs from davila7.github.io to aitmpl.com
- Update structured data URL in index.html to aitmpl.com
- Add complete OG + Twitter Card meta tags to 5 pages that were
missing them: trending, download-stats, plugin, sandbox-interface,
workflows
https://claude.ai/code/session_01CXzS5mzoK3rZB6PW3QSPPd
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>
- Add updateCategorySubFilters() method to dynamically generate category filter buttons
- Restore availableCategories system to track component categories
- Implement setCategoryFilter() for category-specific filtering
- Update generateComponentCard() to use template-card structure with flip functionality
- Add collectAvailableCategories() to populate category sets
- Add global setCategoryFilter function for onclick events
- Restore card flip event listeners and ESC key handling
- Update grid class names for proper CSS styling
## 🎨 Professional Header Design
- **Elegant Layout**: Gradient background with proper spacing and shadows
- **Logo Section**: Enhanced icon and gradient text styling
- **Navigation**: Clean nav buttons with icons and active states
- **Responsive**: Proper container and mobile-friendly design
## 🗂️ Accordion Component Organization
- **Main Categories**: Agents, Commands, MCPs with collapsible sections
- **Subcategory Accordions**: Each component type organized by functionality
- **Component Counts**: Real-time counters for each section and subcategory
- **Visual Hierarchy**: Clear nested structure with proper indentation
## 📋 Component Details Modal
- **Info Button**: Clean "ℹ️" button on each component item
- **Comprehensive Details**: Type, category, path, and usage information
- **Dynamic Description**: Fetches and displays component descriptions from GitHub
- **Usage Commands**: Copy-to-clipboard functionality for CLI commands
- **Add to Workflow**: Direct addition from modal to workflow canvas
## 🔧 GitHub API Error Handling
- **Rate Limit Protection**: Graceful handling of 403 errors
- **Fallback Behavior**: Continue loading other components if one fails
- **User-Friendly**: No more console errors for API limitations
- **Robust Loading**: Better error handling throughout the app
## 🎯 UI/UX Improvements
- **Clean Component Cards**: Removed category badges, added details button
- **Smooth Animations**: Accordion open/close with arrow rotation
- **Better Typography**: Improved font sizes and spacing
- **Professional Modals**: Enhanced modal design with proper structure
- **Consistent Styling**: Unified color scheme and spacing
## 📱 Responsive Features
- **Mobile-Friendly**: Accordions work well on smaller screens
- **Touch-Friendly**: Proper button sizes and touch targets
- **Flexible Layout**: Adapts to different screen sizes
- **Accessible**: Proper keyboard navigation and ARIA attributes
The workflow builder now provides a professional, intuitive interface for creating complex automation workflows with a clean, organized component library.
🤖 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>
Daniel Avila