v1.28.3 - Plugin Skills Support in Skills Manager

🎯 Skills Manager: Plugin Skills Support

The Skills Manager Dashboard now detects and displays skills installed from Claude Code plugins!

✨ New Features

• 3-Source Skill Detection: Skills Manager now scans three locations:

  • 📁 Personal: ~/.claude/skills/ - Manually installed skills
  • 📂 Project: .claude/skills/ - Project-specific skills
  • 🔌 Plugin: ~/.claude/plugins/marketplaces/*/plugins/*/skills/*/ - Plugin-installed skills

• Plugin Skills Integration: Skills installed via /plugin install <skill>@<marketplace> now appear automatically in the dashboard

🔧 Improvements

• Fixed Filter Counts: Filter badges now show consistent totals regardless of active filter

  • All (5) shows total count
  • Personal (4) shows personal count
  • Project (0) shows project count
  • Plugin (1) shows plugin count

• Enhanced Logging: Detailed console output for troubleshooting skill detection:

  • Shows directories being scanned
  • Displays marketplace and plugin counts
  • Reports successful skill loads
  • Identifies missing SKILL.md files

📊 Usage

```bash

Launch Skills Manager

npx claude-code-templates@latest --skills-manager

Opens dashboard at http://localhost:3337

Now shows skills from all three sources!

```

🐛 Bug Fixes

• Fixed filter count numbers changing incorrectly when switching filters
• Skills installed from marketplaces now properly detected
• Improved error handling for missing directories

📦 What's Changed

• Added `loadPluginSkills()` method to scan marketplace installations
• Updated `updateStats()` to use total counts instead of filtered counts
• Enhanced logging throughout skill detection process

---

Full Changelog: v1.28.2...v1.28.3

🤖 Generated with Claude Code

v1.27.0 - Docker Sandbox Provider

🐳 Docker Sandbox Provider - Version 1.27.0

Execute Claude Code in isolated local Docker containers with complete control over your development environment.

✨ New Features

Docker Sandbox Provider

• Fully Local Execution: Run Claude Code in isolated Docker containers
• Claude Agent SDK Integration: Correct async generator implementation for reliable code generation
• Multi-Directory File Detection: Automatically finds and exports generated files from /app and /tmp
• Specialized Agent Support: Works with all 160+ agents from the marketplace
• Automated Execution: --yes flag for CI/CD and scripting workflows
• Custom Environments: Bring your own Docker images

📦 What's Included

Core Files

• Dockerfile - Node.js 22 Alpine base image with development tools
• docker-launcher.js - Container lifecycle orchestration
• execute.js - Claude SDK execution with async generator support
• package.json - Runtime dependencies
• README.md - Complete documentation and troubleshooting guide

Web Documentation

• Docker provider section on component pages
• Provider comparison table (E2B vs Cloudflare vs Docker)
• Installation instructions and prerequisites
• Usage examples and best practices

🚀 Usage

Basic Usage

npx claude-code-templates@latest \
  --sandbox docker \
  --prompt "Write a REST API with Express" \
  --yes

With Specialized Agent

npx claude-code-templates@latest \
  --sandbox docker \
  --agent programming-languages/javascript-pro \
  --prompt "Create a function to add two numbers" \
  --yes

📋 Requirements

• Docker Desktop installed and running
• Anthropic API key configured
• Node.js 14+ (for CLI)

📊 Provider Comparison

Feature	E2B	Cloudflare	Docker
Location	☁️ Cloud	🌍 Edge	🏠 Local
Setup	Easy	Easy	Medium
Best For	Full stack	Serverless	Local dev
API Keys	Anthropic + E2B	Anthropic	Anthropic

🔧 Technical Improvements

• Correct SDK Usage: Implemented async generator iteration for query()
• Enhanced File Search: Scans multiple directories with find command
• Smart Prompts: Informs Claude about working directory context
• Flag Support: --yes flag now works correctly for sandbox execution
• Error Handling: Comprehensive error messages and troubleshooting

🐛 Bug Fixes

• Fixed async generator iteration in Claude Agent SDK
• Fixed --yes flag not skipping agent selection prompts
• Fixed file detection to include /tmp directory
• Removed misleading "works offline" messaging

📚 Documentation

• Component Page: https://aitmpl.com/component.html (Docker tab)
• README: cli-tool/components/sandbox/docker/README.md
• NPM: https://www.npmjs.com/package/claude-code-templates

🎯 Use Cases

• Local development without cloud dependencies
• Testing code in isolated environments
• Custom Docker environments with specific tools
• CI/CD integration with containerized testing
• Offline development (after initial setup)

📈 Stats

• Package Size: 375.9 kB
• Total Files: 92
• New Files: 5 (Docker sandbox components)
• Lines Changed: 1,671 insertions, 62 deletions

🔗 Links

• NPM Package: https://www.npmjs.com/package/claude-code-templates
• Documentation: https://aitmpl.com
• GitHub: https://github.com/davila7/claude-code-templates

💬 Feedback

Found a bug or have a feature request? Open an issue

---

Full Changelog: v1.26.4...v1.27.0

🤖 Generated with Claude Code

📊 v1.26.4 - Command Usage Analytics

📊 Command Usage Analytics System

This release introduces comprehensive tracking of CLI command executions to understand community usage patterns.

✨ What's New

Command Usage Tracking

• Track execution of major CLI commands (--chats, --analytics, --health-check, --plugins, --sandbox, etc.)
• Store analytics in Neon PostgreSQL database with auto-aggregated statistics
• Fire-and-forget tracking (non-blocking, respects user privacy)
• Includes metadata: tunnel usage, platform, Node version, session IDs

Database & Analytics

• New Neon database tables: command_usage_logs, command_usage_stats
• Auto-updating statistics via PostgreSQL triggers
• Useful views: daily usage, platform distribution, popular commands (30 days)
• Independent from component download tracking (Supabase)

API Endpoint

• New endpoint: /api/track-command-usage
• Validates command names against whitelist
• Handles metadata as JSONB for flexible analytics
• CORS-enabled for cross-origin requests

🧪 Testing

Comprehensive Test Suite

• ✅ 18/18 tests passing
• Added 6 new tests for command tracking endpoint
• Validates all 11 supported commands
• Tests metadata handling, validation, error cases
• Response time checks (<30s for all endpoints)

🔒 Privacy & Security

• Respects Privacy: Users can opt-out with CCT_NO_TRACKING=true
• No Secrets: All sensitive data uses environment variables
• Anonymous: No personally identifiable information collected
• Non-blocking: Tracking failures never impact CLI functionality

📦 What's Tracked

Commands tracked for community analytics:

• --chats (with tunnel metadata)
• --analytics (with tunnel metadata)
• --health-check
• --plugins
• --sandbox (with provider and prompt metadata)
• --agents (with tunnel metadata)
• --chats-mobile (with tunnel metadata)
• command-stats, hook-stats, mcp-stats

🔧 Technical Details

Database Architecture

• Platform: Neon PostgreSQL (serverless)
• Auto-scaling with connection pooling
• Automatic stats aggregation via triggers
• Efficient indexing for fast queries

Files Changed

• api/track-command-usage.js - New API endpoint
• database/migrations/002_create_command_usage_logs.sql - Database schema
• cli-tool/src/tracking-service.js - Added trackCommandExecution()
• cli-tool/src/index.js - Integrated tracking for 10+ commands
• api/__tests__/endpoints.test.js - Added comprehensive tests

📊 Analytics Queries

View command usage:
```sql
SELECT command_name, total_executions, unique_sessions
FROM command_usage_stats
ORDER BY total_executions DESC;
```

View daily trends:
```sql
SELECT * FROM daily_command_usage
ORDER BY date DESC;
```

🚀 Installation

```bash
npx claude-code-templates@latest

Or install globally

npm install -g [email protected]
```

🌐 Links

• Website
• Documentation
• NPM Package
• GitHub

---

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

v1.26.2 - Session Analytics (Beta)

🎉 What's New

Session Analytics (Beta)

Added a comprehensive analytics modal for each chat session with detailed insights into your Claude Code interactions.

Overview Metrics:

• Total messages count
• Total tokens used
• Tool calls executed
• Unique tools used
• Models utilized
• Cache efficiency percentage

Detailed Analytics:

• 📊 Token Usage Breakdown: Input/output tokens, cache creation/reads, and cost estimation
• ⏱️ Session Timeline: Start time, last activity, duration, and status
• ⚡ Time Breakdown: Claude execution time vs user conversing time with intelligent filtering
• 🤖 Model Information: Detailed usage of each model (Sonnet/Haiku) with message counts and percentages
• 🛠️ Tool Usage: Statistics and breakdown of all tools used
• 🧩 Components Used: Tracking of agents, slash commands, and skills

Key Features:

• Real-time analytics calculation from JSONL conversation files
• Multi-model usage detection (automatically identifies Sonnet/Haiku switching)
• Intelligent time filtering (excludes long breaks and overnight pauses)
• Accurate cost estimation based on Claude API pricing
• Component detection from tool_use blocks

Access: Click the "Analytics" button next to any session in the Chats interface (--chats mode)

📦 Installation

```bash
npm install -g [email protected]
```

🚀 Usage

```bash

Launch chats interface

cct --chats

Click Analytics button on any session to view detailed metrics

```

🔗 Links

• 📚 Documentation
• 🌐 Component Library
• 💬 Discord Community

---

Full Changelog: v1.26.1...v1.26.2

🚀 Session Sharing & UI Improvements - v1.25.0

🎉 What's New in v1.25.0

✨ Session Sharing System

Share your Claude Code conversations with the community! Export, upload, and clone complete sessions with a single command.

Features:

• 📤 Export & Share: Share sessions via URL with QR code support
• 📥 Clone Sessions: Download and resume shared conversations
• 🔒 Smart Limiting: Automatically limits to last 100 messages for optimal sharing
• 🌐 Public Hosting: Uses x0.at for reliable file hosting

Usage:
Share a session from the dashboard - Click Share button to get shareable URL with QR code
Clone a shared session - npx claude-code-templates --clone-session URL

🎨 Mobile Dashboard UI Improvements

Project Grouping:

• 📁 Sessions now organized by project with collapsible groups
• 🔍 Smart search with auto-expand/collapse functionality
• 📊 Session counts per project

Redesigned Action Buttons:

• 🎯 Unified button group with orange accent styling
• Resume, Share, Search buttons with SVG icons
• Smooth animations and hover effects

Terminology Update:

• Changed Conversations to Sessions throughout the interface

🔧 Technical Improvements

• New SessionSharing class for complete sharing workflow
• Enhanced mobile dashboard with modular architecture
• Improved state management for project groups

📦 Installation

npm install -g claude-code-templates

🔗 Resources

• Documentation: https://aitmpl.com
• GitHub: https://github.com/davila7/claude-code-templates
• Discord: Join our community to share sessions and tips!

🤖 Built with Claude Code

v1.24.16 - Cloudflare Sandbox Integration with Claude Agent SDK

Release v1.24.16 - Cloudflare Sandbox Integration with Claude Agent SDK

🎉 Major New Feature: Cloudflare Workers Sandbox

We're excited to announce the complete implementation of Cloudflare Workers Sandbox - a new execution environment for AI-powered code generation alongside our existing E2B sandbox support.

🚀 What's New

Cloudflare Sandbox Implementation

Run AI-generated code using Cloudflare's edge network infrastructure with full agent support.

Quick Start:

npx claude-code-templates@latest --sandbox cloudflare \
  --agent development-team/frontend-developer \
  --prompt "Create a contact form with validation"

Key Features:

• ✅ Full Agent Support - Use any of 600+ specialized agents
• ✅ Claude Agent SDK Integration - Powered by @anthropic-ai/claude-agent-sdk v0.1.23
• ✅ Automatic Agent Loading - Uses settingSources: ['project'] for seamless agent integration
• ✅ Multi-file Generation - Automatically extracts and saves HTML, CSS, JavaScript files
• ✅ Timestamped Directories - Files saved to cloudflare-{timestamp}/ for easy organization
• ✅ Clean Progress Logs - Essential progress indicators without code dumps

📦 What's Included

Sandbox Architecture:

cli-tool/components/sandbox/cloudflare/
├── launcher.ts              # Main execution launcher with Agent SDK integration
├── monitor.ts               # Sandbox monitoring utilities
├── src/index.ts            # Cloudflare Worker implementation
├── package.json            # Dependencies (@anthropic-ai/claude-agent-sdk ^0.1.23)
├── wrangler.toml           # Cloudflare Worker configuration
├── README.md               # Complete documentation
├── QUICKSTART.md           # Quick start guide
├── SANDBOX_DEBUGGING.md    # Debugging guide
└── IMPLEMENTATION_SUMMARY.md # Technical implementation details

🔧 Technical Highlights

Agent SDK Migration (v1.24.15)

• Migrated from basic @anthropic-ai/sdk to @anthropic-ai/claude-agent-sdk
• Implemented automatic agent loading via settingSources: ['project']
• Proper message handling for SDK's result type responses
• Agent files automatically downloaded from GitHub to .claude/agents/

Code Generation Workflow

1. Agent Installation: Downloads specified agents to .claude/agents/
2. Settings Creation: Generates .claude/settings.json with agent references
3. Code Generation: Claude generates code using loaded agent expertise
4. File Extraction: Parses code blocks and extracts individual files
5. Local Download: Saves files to cloudflare-{timestamp}/ directory

Clean Logging (v1.24.16)

• Removed unnecessary code output from console
• Simplified file download logs (show only essential progress)
• Clean, user-friendly execution feedback

📊 How It Works

# Example execution flow:
npx claude-code-templates@latest --sandbox cloudflare \
  --agent development-team/frontend-developer \
  --prompt "Create a todo list app"

# Output structure:
cloudflare-mgzrzugb/
├── index.html       # Complete HTML structure
├── styles.css       # Modern responsive CSS
└── script.js        # Interactive JavaScript

🆚 Cloudflare vs E2B Sandbox

Feature	Cloudflare	E2B
Execution Environment	Direct (local) + Worker option	Python sandboxed environment
Agent Support	✅ Full support (600+ agents)	✅ Full support
SDK	Claude Agent SDK	Anthropic SDK + E2B SDK
File Output	cloudflare-{timestamp}/	sandbox-{id}/
Deployment	Optional Worker deployment	Cloud-based execution
Use Case	Web apps, frontend code	Python scripts, data analysis

🐛 Bug Fixes

• Fixed component parameter passing to launcher
• Resolved Agent SDK message type handling
• Corrected file download directory structure
• Improved error handling and logging
• Enhanced environment variable validation

📝 Breaking Changes

None - This release is fully backward compatible with existing E2B sandbox functionality.

📚 Documentation

Comprehensive documentation included:

• Cloudflare Sandbox README
• Quick Start Guide
• Debugging Guide
• Implementation Summary

🎯 Usage Examples

Basic Web Application:

npx claude-code-templates@latest --sandbox cloudflare \
  --agent development-team/frontend-developer \
  --prompt "Create a responsive landing page"

With Multiple Components:

npx claude-code-templates@latest --sandbox cloudflare \
  --agent development-team/frontend-developer \
  --command code-review \
  --prompt "Create a dashboard with charts"

Environment Variable:

export ANTHROPIC_API_KEY="your-key-here"
npx claude-code-templates@latest --sandbox cloudflare \
  --agent development-team/fullstack-developer \
  --prompt "Create a REST API client"

🔄 Migration from Previous Versions

No migration needed! Simply update to v1.24.16:

npm install -g claude-code-templates@latest

🙏 Acknowledgments

Built with:

• @anthropic-ai/claude-agent-sdk v0.1.23
• @cloudflare/sandbox v0.1.0
• TypeScript, Node.js, and Cloudflare Workers

📈 What's Next

• Enhanced Worker deployment automation
• Real-time streaming output support
• Sandbox execution analytics
• Custom agent creation tools

---

📦 Installation

# Global installation
npm install -g claude-code-templates@latest

# NPX (no installation)
npx claude-code-templates@latest --help

---

Full Changelog: v1.24.14...v1.24.16

v1.24.0 - Skills Integration 🎨

🎨 Skills Integration Release

This release adds comprehensive support for Anthropic's official skills to the Claude Code Templates ecosystem.

✨ New Features

Skills Support

• 🎨 Added 19 official Anthropic skills to components library
• 📦 Organized skills into 4 meaningful categories
• 🌐 Full web interface integration at aitmpl.com
• 📊 Supabase analytics tracking for skill downloads
• 🔗 URL routing support for /skills path
• 🛒 Shopping cart support for batch skill installation

📁 Skills Categories

Creative Design (4 skills)

• algorithmic-art - Generate algorithmic art and visualizations
• canvas-design - Create canvas-based designs
• slack-gif-creator - Create animated GIFs for Slack
• theme-factory - Generate color themes and design systems

Development (5 skills)

• artifacts-builder - Build Claude artifacts
• git-commit-helper - Smart git commit messages
• mcp-builder - Create MCP integrations
• skill-creator - Build new custom skills
• webapp-testing - Web application testing

Document Processing (6 skills)

• docx - Microsoft Word document creation/editing
• xlsx - Excel spreadsheet manipulation
• pptx - PowerPoint presentation generation
• pdf-anthropic - PDF processing with Anthropic
• pdf-processing - Standard PDF operations
• pdf-processing-pro - Advanced PDF processing

Enterprise Communication (4 skills)

• brand-guidelines - Brand guideline management
• email-composer - Professional email composition
• excel-analysis - Excel data analysis
• internal-comms - Internal communications

🚀 Installation

Install individual skills:

npx claude-code-templates@latest --skill=creative-design/algorithmic-art
npx claude-code-templates@latest --skill=development/mcp-builder
npx claude-code-templates@latest --skill=document-processing/pdf-processing-pro

Batch installation:

npx claude-code-templates@latest \
  --skill=creative-design/algorithmic-art \
  --skill=development/git-commit-helper \
  --skill=document-processing/docx \
  --yes

📊 Package Information

• Package size: 319.2 kB (compressed), 1.6 MB (unpacked)
• Total files: 74
• Optimization: Components downloaded on-demand from GitHub
• npm: [email protected]

🔗 Links

• 🌐 Web Interface: aitmpl.com/skills
• 📦 npm Package: claude-code-templates
• 📖 Documentation: GitHub Repository
• 🎯 Skills Repository: anthropics/skills

🙏 Attribution

Skills are based on Anthropic's official skills repository. Licensed under Apache 2.0 and Source-Available licenses. See ANTHROPIC_ATTRIBUTION.md for details.

📝 Full Changelog

Added:

• Skills component type support in CLI
• Skills scanning in component generation script
• Skills filter and cards in web interface
• Skills category organization system
• Skills installation via --skill flag
• Supabase tracking for skill downloads
• URL routing for /skills path

Fixed:

• Skills validation in download tracking API
• Skills search functionality
• Skills cart integration

Technical:

• Updated generate_components_json.py with skills scanning logic
• Enhanced installIndividualSkill() for category/skill-name paths
• Added skills to all web interface components
• Updated Vercel routing configuration

---

Previous Release: v1.23.0 - Component Security Validation System

🔒 v1.23.0 - Component Security Validation System

🔒 Component Security Validation System

Major Features

🛡️ Comprehensive Security Validation Framework

This release introduces a complete security validation system for all Claude Code components, ensuring quality, safety, and integrity across 500+ components.

5-Layer Validation Architecture

1. Structural Validator - Verifies file format, YAML frontmatter, required fields, and encoding
2. Integrity Validator - Checks for tampering using SHA256 hash and version tracking
3. Semantic Validator - Detects malicious patterns, prompt injection, and dangerous commands
4. Reference Validator - Validates external URLs and prevents SSRF attacks
5. Provenance Validator - Confirms author metadata and repository information

📊 Interactive Quality Dashboard

• Quality Score Display (0-100) with visual indicators
• Real-time Validation Status for each component
• Detailed Error/Warning Reporting with line-level precision
• Clickable Error Lines - Click on error line numbers to see detailed validation issues
• Security Badges - Visual indicators in component headers

🎨 Enhanced User Experience

• Improved Modal Text Display - Larger, more readable error messages (16px font)
• Smart Text Wrapping - Code snippets wrap naturally without horizontal scroll
• Synchronized Scroll - Line numbers stay perfectly aligned with code content
• Interactive Error Navigation - Click error line numbers to jump to validation details
• Better Visual Hierarchy - Improved spacing and typography throughout

🔧 Technical Implementation

• ValidationOrchestrator - Coordinates all validation processes
• BaseValidator - Extensible validation framework
• GitHub Actions Integration - Automated validation on component changes
• Comprehensive Test Suite - 100% coverage for all validators
• Security Report Generation - Detailed JSON reports for all components

Component Improvements

Web Interface (docs/)

• ✅ Enhanced validation modal with better readability
• ✅ Code preview text wrapping without horizontal scroll
• ✅ Synchronized line number scrolling
• ✅ Clickable error line numbers
• ✅ Hover effects for interactive elements
• ✅ Accordion-style validation details

CLI Tool (cli-tool/)

• ✅ New security-audit.js command for component validation
• ✅ Validation orchestrator with plugin architecture
• ✅ Five specialized validator classes
• ✅ Comprehensive test coverage (Jest)
• ✅ Security report generation

Automation

• ✅ GitHub Actions workflow for automated validation
• ✅ Component validation on push/PR
• ✅ Security report updates
• ✅ Marketplace metadata validation

Files Changed

• 29 files modified with 131,354 insertions
• New validation system in cli-tool/src/validation/
• Enhanced web interface in docs/
• Test suite in cli-tool/tests/validation/
• GitHub Actions workflow for automation

Breaking Changes

None - All changes are additive and backward compatible

Installation

# Install latest version
npx claude-code-templates@latest

# Or update existing installation
npm update -g claude-code-templates

What's Next

• 🔄 Continuous validation improvements
• 📈 Enhanced security scoring algorithms
• 🎯 More granular validation rules
• 🌐 Community contribution guidelines for validation

Contributors

Special thanks to all contributors who helped make this release possible!

---

Full Changelog: v1.22.0...v1.23.0

🤖 Generated with Claude Code

v1.22.0 - Plugin Dashboard with Real-time Monitoring

🎉 New Features

Plugin Dashboard

A comprehensive web-based dashboard for managing Claude Code plugins with real-time monitoring capabilities.

Key Features:

• 🖥️ Modern Web Interface - Beautiful, responsive dashboard with sidebar navigation
• 🔄 Real-time State Detection - Automatically detects enabled/disabled plugin states
• 📊 Plugin Management - Install, enable, disable, and uninstall plugins with one click
• 🔍 Smart Filtering - Filter plugins by status and search functionality
• 📋 Command Reference - Copy plugin commands with one click
• ⚡ Auto-refresh - Updates every 30 seconds + manual refresh button
• 🎨 Status-based Sorting - Enabled plugins appear first by default

Usage:

npx claude-code-templates@latest --plugins

Then open your browser at http://localhost:3333

Documentation Updates

• Added Plugin Dashboard to additional tools section
• Improved banner interaction with smooth scroll to plugins section

📦 Installation

npm install -g [email protected]

Or use directly with npx:

npx claude-code-templates@latest

🔗 Links

• NPM Package
• Documentation
• GitHub Repository

---

Full Changelog: v1.21.13...v1.22.0

v1.21.11 - Enhanced Chats Mobile Interface

🚀 New Features

Enhanced Chats Mobile Interface

• Resume Conversation Modal: Beautiful modal dialog for resuming Claude Code conversations
• Centered Resume Button: Resume button now centered in chat view header
• GitHub Star Button: Added prominent ⭐️ GitHub button in main chat header
• Three-Column Layout: Clean header organization (left, center, right sections)

🎨 Interface Updates

• Enhanced mobile chat interface with better navigation
• Improved button positioning and visual hierarchy
• Modal shows clear instructions with copy functionality

📱 Usage

Run npx claude-code-templates@latest --chats to try the new interface!