Replace iframe-based featured pages with native dashboard layout using
tabbed navigation, sidebar with metadata, and partner-specific content.
- Rewrite dashboard featured/[slug].astro from iframe embed to native
Astro page with Overview content + Website external link tab
- Expand FeaturedItem type with metadata, links, CTA, and badge data
- Add partner badge color variants (Partner/Database/Toolkit)
- Add sidebar cards: partner info, CTA button, install command, metadata, links
- Remove redundant metadata fields (Type/Category/Website already shown via dedicated fields)
- Update docs/ featured pages with component-page layout (legacy site)
- Create docs/css/featured-page.css for featured-specific styles
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Add tabbed layout (Overview/Code) with sidebar, integrate Giscus for
GitHub Discussions-based commenting, and move validation section into
the Overview tab for better content organization.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Restructure footer from flat link list to categorized columns
(Product, Community, Resources). Add Blog and npm Package links.
Update copyright from 2025 to 2026.
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
* feat(blog): Add SVG cover and fix header/footer for security-hooks-secrets article
- Create SVG cover image with black background, terminal on left, security shield on right
- Rewrite blog HTML to use external CSS (styles.css, blog.css) instead of inline styles
- Fix header to match other blogs (container, header-content, header-actions with SVG icons)
- Fix footer to match other blogs (footer-left, footer-right, proper links with icons)
- Add Google Analytics, Hotjar, favicon, structured data, and SEO metadata
- Add CodeCopy and MarkdownCopier JavaScript functionality
- Update blog-articles.json to reference new SVG cover
https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5
* fix(blog): Add table styles for article content in blog CSS
Tables inside .article-content-full had no styling since the blog
uses external CSS. Added proper th/td padding, borders, and hover states.
https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5
* fix(blog): Update info box text to clarify blog explains the hook
The blog explains how the hook works, not manual setup instructions.
Updated text to encourage direct CLI installation while reading on.
https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5
* fix(blog): Sort articles newest first in blog listing and featured carousel
Reverse default sort order from ascending to descending by order field,
so the most recently published article appears first in both the main
list and the featured posts carousel.
https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5
* feat(agents): Add blog-writer agent for creating blog articles from components
Agent follows a 6-step workflow:
1. Read the component file
2. Ask user to confirm title, tags, difficulty, category, cover style
3. Create SVG cover (black bg, terminal left, icon right, white title)
4. Create HTML article with proper header/footer structure
5. Update blog-articles.json with highest order number
6. Final verification checklist
Encodes all blog creation knowledge: external CSS only, installation
first, info-box wording, CodeCopy/MarkdownCopier scripts, table
styling, OG metadata, structured data, and article ordering.
https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5
---------
Co-authored-by: Claude <noreply@anthropic.com>
- Move featured projects section above search bar with compact horizontal design
- Make Skills the default filter (first position, active by default)
- Add redirect from / to /skills in vercel.json
- Fix search keywords bug when keywords is an array instead of string
- Update all JS files to default to 'skills' filter
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* feat: Add Featured Projects carousel with BrainGrid
- Added Featured section carousel below category filters in index.html
- Created docs/featured/braingrid/ with blog-style page design
- Implemented BrainGrid featured project page with product information
- Added CSS styles for featured carousel with responsive design
- Extended carousel.js with FeaturedCarousel class and scroll functionality
- Created SVG cover image for BrainGrid project
- Featured section includes card with image, description, and tags
* refactor: Make Featured carousel more compact with square cards
- Simplified Featured section title without command-block styling
- Changed featured cards to compact square design (280x280px)
- Replaced preview images with BrainGrid logo
- Added BrainGrid logo to article page
- Reduced card content to logo, name, minimal description, and arrow
- Updated carousel scroll amount for new card size
- Improved responsive breakpoints for mobile devices
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Changes Made:
### 1. Modal Text Display Improvements
- Increased error/warning message font size from 14px to 16px for better readability
- Improved line height from 1.5 to 1.6 for better spacing
- Increased margin-bottom from 4px to 8px for better visual separation
### 2. Code Preview Text Wrapping
- Removed horizontal scroll (`overflow-x: auto`) from code previews
- Added `white-space: normal` to prevent excessive whitespace at line start
- Added `word-wrap: break-word` and `overflow-wrap: break-word` for proper text wrapping
- Applied to all code preview sections:
- Error line text previews
- Warning line text previews
- Example line text in errors
- Example line text in warnings
### 3. Line Number Scroll Synchronization
- Added `position: relative` to `.code-body` for better layout control
- Added `overflow: hidden` and `max-height: 600px` to `.code-line-numbers`
- Added `max-height: 600px` to `.code-content`
- Implemented JavaScript scroll sync between line numbers and code content
- Line numbers now scroll perfectly in sync with code content
### 4. Clickable Error Line Numbers
- Added `cursor: pointer` to error/warning line numbers
- Added "Click to see details" tooltip on error/warning lines
- Implemented click event listeners on all error/warning lines
- Click handler searches through validators to find matching error
- Opens validation modal with correct validator details when clicked
- Added hover effects with `transform: translateX(-2px)` and `cursor: help`
## User Experience Improvements:
- ✅ Error messages are now larger and easier to read (16px)
- ✅ Code snippets wrap naturally without horizontal scroll
- ✅ No excessive whitespace at the beginning of code lines
- ✅ Line numbers stay synchronized during scroll
- ✅ Error line numbers are interactive and open detailed validation modals
- ✅ Better visual hierarchy with improved spacing and sizing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
- Add plugin marketplace system with 10 curated plugins
- Create plugin detail pages with installation instructions
- Add component installation modal with copy functionality
- Update Python script to extract plugin data with category/folder paths
- Add category filters that load correctly based on URL
- Update footer across all pages for consistency
- Fix install commands to use folder/name format
Features:
- Plugin cards with View Details button
- Individual component installation with proper paths
- Related plugins based on shared keywords
- Dynamic category loading for all filter types
- URL-based filter detection and category display
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Keep --studio as separate web interface command for Claude Code Studio
- Make --sandbox e2b pure CLI experience without opening web interface
- Add interactive agent selection when --agent not provided
- Agent list fetched from GitHub with option to continue without agent
- Maintain existing prompt collection and Y/n confirmation flow
- Real-time log display and folder download already working
This ensures --sandbox e2b follows the CLI workflow:
1. Check/download agents if missing
2. Prompt for input if --prompt not provided
3. Confirm E2B execution with Y/n
4. Execute and show logs
5. Download folder when complete
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Modal Structure:
✅ Basic Installation - Install component locally with brief description
✅ Global Agent (Claude Code SDK) - For agents only, with usage and features
✅ Run in E2B Sandbox (Cloud Execution) NEW - Cloud execution with simplified setup
E2B Sandbox Improvements:
- Added NEW badge to highlight the feature
- Simplified API key setup section with .env example
- Cleaner command structure without multiple methods
- Improved API key links styling with hover effects
- Better responsive design for mobile devices
Visual Enhancements:
- Clear section dividers and consistent spacing
- Improved typography and color hierarchy
- Better organized content flow matching the screenshot
- Enhanced readability with proper descriptions
This matches the exact structure requested based on the modal screenshot.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Modal Improvements:
- Added detailed API key setup section with two methods
- Method 1: Environment variables (.env file) - recommended
- Method 2: Command line parameters - for testing
- Enhanced visual structure with separate sections for each method
- Added responsive design for mobile devices
Main Page Layout:
- E2B sandbox tool card now spans full width (3 columns)
- Improved internal layout with side-by-side .env setup
- Better spacing and organization for the expanded card
- Responsive breakpoints for mobile and tablet
Users now have clear, easy-to-follow instructions for both modal
components and main page examples with API key management.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added E2B sandbox section to all component modal details
- Includes cloud execution command with component-specific parameters
- Features: isolated environment, extended timeouts, file downloads, monitoring
- Added requirements section with E2B and Anthropic API key links
- Styled E2B section with blue gradient background and warning styling
- Handles templates vs other component types correctly in command generation
- Updated components.json with latest component scan (2 sandbox components)
Users can now see E2B sandbox instructions for every component in the modal.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
🌍 Major new feature: Global AI Agents powered by Claude Code SDK
## New Features
- **Global Agent Creation**: `--create-agent <agent-name>`
- **Agent Management**: `--list-agents`, `--update-agent`, `--remove-agent`
- **Zero Configuration**: Agents install to /usr/local/bin (immediately available)
- **Auto Context Detection**: Smart project type detection and file context
- **Universal Access**: Works from any directory, in scripts, CI/CD, npm tasks
## Technical Implementation
- New global-agent-manager.js module with complete agent lifecycle
- Automatic PATH management across shell environments
- Executable script generation with Claude Code SDK integration
- Real-time loading indicators during AI processing
- Robust error handling and fallback mechanisms
## Frontend Integration
- Enhanced agent modals with Global Agent installation options
- New CSS styles for global agent sections
- Copy-to-clipboard functionality for all commands
- Usage examples and feature highlights
## User Experience
Before: Traditional project-based agent installation
After: `cct --create-agent security-auditor` → `security-auditor "prompt"` (anywhere)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added .vscode to .gitignore to prevent IDE settings from being tracked.
- Changed CodeGPT API key from "Ollama" to "OpenAI" in settings.json.
- Modified CSS styles for various components to enhance the terminal interface, including adjustments to padding, margins, and grid layouts.
- Introduced new terminal-style search functionality in index.html with improved search input handling and results display.
- Enhanced JavaScript event handling for category filters and search functionality, including debouncing and dynamic category display.
- Updated search results formatting to reflect terminal-style aesthetics.
- Updated descriptions for RPG status bar and virtual code garden to include display details.
- Modified component documentation to reflect new features and descriptions for various statuslines.
- Removed max-height restrictions in CSS for better component visibility.
- Adjusted modal helper to show full component descriptions instead of truncated versions.
- Implemented CompanyCarousel class to manage carousel behavior for company stacks.
- Added auto-scroll, button controls, and touch/swipe support for mobile.
- Included global functions for scrolling the carousel and reinitializing on content changes.
feat: introduce StackRouter for handling stack pages
- Created StackRouter class to manage routing for company and technology stack pages.
- Implemented methods to load company and technology stacks, including data fetching and rendering.
- Added functionality for navigating back to the main page and loading all companies.
- Enhanced SEO with dynamic meta tag updates for stack pages.
## 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>
- Added align-items: center to cart-clear-section-prominent
- Clear All button remains right-aligned with flex-end
- Better vertical alignment in the cart header section
- Maintains subtle styling and proper spacing
## Modal Button Improvements:
✅ **Consistent Sizing**:
- Both buttons now have min-width: 140px
- Same padding: 0.6rem 1.2rem
- Same font-size: 0.85rem
- Same border-radius: 6px
✅ **Better Layout**:
- Add to Cart no longer takes full width (was width: 100%)
- Added 1rem gap between buttons
- Both buttons centered and balanced
✅ **Professional Appearance**:
- Buttons are same height and visual weight
- Clean side-by-side layout
- Responsive with flex-wrap for mobile
The modal action buttons now look much more professional and balanced.
- 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>
- Remove problematic CSS ::before pseudo-element overlay on mobile
- Implement dynamic JavaScript-based overlay for desktop only
- Add display: none \!important for cart overlay on screens ≤768px
- Create overlay only when needed (openCart) and remove on close
- Prevent overlay from interfering with mobile touch events
- Maintain desktop blur overlay functionality with proper z-index
This fixes the issue where mobile users couldn't see content
after the Filter Components section due to invisible overlay blocking.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add pointer-events: none to cart-sidebar when not active
- Enable pointer-events when cart is active (.cart-sidebar.active)
- Reduce z-index from 2000 to 1000 to avoid interference
- Fix cart overlay pointer-events management
- Ensure cart notifications have proper z-index (1100)
- Prevent cart from blocking touch events on mobile when closed
This resolves the issue where mobile users saw a black screen due to
the cart sidebar intercepting touch events even when hidden.
🤖 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>
Daniel Avila