mirror of
https://github.com/davila7/claude-code-templates.git
synced 2026-09-19 01:30:23 +08:00
Daniel Avila
65156dda84
* feat: add session sharing and cloning functionality Implement complete session sharing system for Claude Code conversations: Features: - Share button in chats interface with QR code generation - Upload sessions to x0.at (temporary file hosting) - Clone sessions with --clone-session command - Limit shared sessions to last 100 messages - Security confirmation modal with service information - Resume command display after cloning Backend: - New SessionSharing class for export/upload/download/install - Integration with ConversationAnalyzer - x0.at upload service (tested and working) - JSONL format conversion for Claude Code compatibility Frontend: - Confirmation modal with x0.at security info - Centered QR code display - Improved button styling (Resume, Share, Search) - Real-time upload progress indication CLI: - Added --clone-session <url> parameter - Automatic session installation to ~/.claude/projects/ - Display resume command with conversation ID Dependencies: - Added qrcode package for QR generation 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: improve chats UI with project grouping and unified action buttons Major improvements to chats interface: Project Organization: - Group conversations by project with collapsible sections - Projects collapsed by default for cleaner interface - Auto-expand projects during search with matching results - Sticky project headers for better navigation - Project avatars with gradients and conversation counts Terminology Update: - Changed "conversations" to "sessions" throughout UI - Updated empty state messages - Consistent terminology in headers and labels Action Buttons Enhancement: - Unified Resume, Share, and Search buttons in center header - Replaced emojis with professional SVG icons - Grouped design with orange accent border - Individual hover states (green/blue/orange) - Responsive button group with smooth transitions Search Improvements: - Fixed search to work with grouped project structure - Search in both project names and session IDs - Auto-collapse all projects when clearing search - Proper filter clearing in advanced search - Maintained state management across search operations Visual Design: - Orange accent border highlighting action buttons (2px) - Subtle orange background for button group - Consistent hover effects with color coding - Enhanced visual hierarchy - Better spacing and alignment 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
Claude Code Templates
CLI tool for configuring and monitoring Claude Code - Quick setup for any project with framework-specific commands and real-time monitoring dashboard.
🚀 Quick Start
# Interactive setup (recommended)
npx claude-code-templates@latest
# Real-time analytics dashboard
npx claude-code-templates@latest --analytics
# System health check
npx claude-code-templates@latest --health-check
✨ Core Features
- 📋 Smart Project Setup - Auto-detect and configure any project with framework-specific commands
- 📊 Real-time Analytics - Monitor Claude Code sessions with live state detection and performance metrics
- 🔍 Health Check - Comprehensive system validation with actionable recommendations
- 🧩 Individual Components - Install specialized agents, commands, and MCPs individually
- 🌍 Global Agents - Create AI agents accessible from anywhere using Claude Code SDK
🎯 What You Get
| Component | Description | Example |
|---|---|---|
| CLAUDE.md | Project-specific Claude Code configuration | Framework best practices, coding standards |
| Commands | Custom slash commands for development tasks | /generate-tests, /check-file, /optimize-bundle |
| Agents | AI specialists for specific domains | API security audit, React performance, database optimization |
| MCPs | External service integrations | GitHub, databases, development tools |
| Skills | Modular capabilities with progressive disclosure | PDF processing, algorithmic art, MCP builder |
| Analytics | Real-time monitoring dashboard | Live session tracking, usage statistics, exports |
🛠️ Supported Technologies
| Language | Frameworks | Status |
|---|---|---|
| JavaScript/TypeScript | React, Vue, Angular, Node.js | ✅ Ready |
| Python | Django, Flask, FastAPI | ✅ Ready |
| Common | Universal configurations | ✅ Ready |
| Go | Gin, Echo, Fiber | 🚧 Coming Soon |
| Rust | Axum, Warp, Actix | 🚧 Coming Soon |
🌍 Global Agents (Claude Code SDK Integration)
Create AI agents that can be executed from anywhere using the Claude Code SDK:
# Create a global agent (one-time setup)
npx claude-code-templates@latest --create-agent customer-support
# Use the agent from anywhere
customer-support "Help me with ticket #12345"
sre-logs "Analyze error patterns in app.log"
code-reviewer "Review this PR for security issues"
Available Global Agents
| Agent | Usage | Description |
|---|---|---|
customer-support |
customer-support "query" |
AI customer support specialist |
api-security-audit |
api-security-audit "analyze endpoints" |
Security auditing for APIs |
react-performance-optimization |
react-performance-optimization "optimize components" |
React performance expert |
database-optimization |
database-optimization "improve queries" |
Database performance tuning |
Global Agent Management
# List installed global agents
npx claude-code-templates@latest --list-agents
# Update an agent to latest version
npx claude-code-templates@latest --update-agent customer-support
# Remove an agent
npx claude-code-templates@latest --remove-agent customer-support
How It Works
- Download Agent: Fetches the latest agent from GitHub
- Generate Executable: Creates a Node.js script that calls Claude Code SDK
- Add to PATH: Makes the agent available globally in your shell
- Ready to Use: Execute
agent-name "your prompt"from any directory
The agents use the Claude Code SDK internally to provide specialized AI assistance with domain-specific knowledge and best practices.
🎨 Skills (Anthropic Format)
Install modular capabilities that Claude loads dynamically using Anthropic's progressive disclosure pattern:
# Install individual skills
npx claude-code-templates@latest --skill pdf-processing-pro
npx claude-code-templates@latest --skill algorithmic-art
npx claude-code-templates@latest --skill mcp-builder
# Install multiple skills
npx claude-code-templates@latest --skill pdf-anthropic,docx,xlsx,pptx
Featured Skills
🎨 Creative & Design
- algorithmic-art - Create generative art using p5.js with seeded randomness
- canvas-design - Design beautiful visual art in .png and .pdf formats
- slack-gif-creator - Create animated GIFs optimized for Slack
💻 Development & Technical
- mcp-builder - Guide for creating high-quality MCP servers
- artifacts-builder - Build complex HTML artifacts with React and Tailwind
- webapp-testing - Test local web applications using Playwright
- skill-creator - Guide for creating effective skills
📄 Document Processing
- pdf-processing-pro - Production-ready PDF toolkit (forms, tables, OCR)
- pdf-anthropic - Anthropic's comprehensive PDF manipulation toolkit
- docx - Create, edit, and analyze Word documents
- xlsx - Create, edit, and analyze Excel spreadsheets
- pptx - Create, edit, and analyze PowerPoint presentations
🏢 Enterprise & Communication
- brand-guidelines - Apply Anthropic's official brand guidelines
- internal-comms - Write internal communications (reports, newsletters, FAQs)
- theme-factory - Style artifacts with professional themes
Skills Architecture
Skills follow Anthropic's progressive disclosure pattern:
- Metadata - Always loaded (name, description)
- Instructions - Loaded when skill is triggered
- Resources - Reference files loaded only when needed
- Scripts - Execute without loading code into context
Attribution
Skills from anthropics/skills:
- Open Source (Apache 2.0): algorithmic-art, mcp-builder, skill-creator, artifacts-builder, and more
- Source-Available (Reference): docx, pdf-anthropic, pptx, xlsx
See ANTHROPIC_ATTRIBUTION.md for complete license information.
📖 Documentation
📚 Complete Documentation - Comprehensive guides, examples, and API reference
Quick links:
- Getting Started - Installation and first steps
- Project Setup - Configure your projects
- Analytics Dashboard - Real-time monitoring
- Individual Components - Agents, Commands, MCPs
- CLI Options - All available commands
🤝 Contributing
We welcome contributions! Browse available templates and components at aitmpl.com, then check our contributing guidelines.
📄 License
MIT License - see the LICENSE file for details.
🔗 Links
- 🌐 Browse Components: aitmpl.com
- 📚 Documentation: docs.aitmpl.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
⭐ Found this useful? Give us a star to support the project!