ClaudeX - Claude Code Workspace Manager

Beautiful visual workspace manager for Claude Code. Access 136+ professional templates, automate workflows with hooks, and manage your AI development environment through an elegant web interface.

Created by Thuong Truong

🎯 What is ClaudeX?

ClaudeX transforms Claude Code from a command-line tool into a complete visual workspace manager. Get instant access to:

• 41 Command Templates - Project initialization, development, debugging, git operations
• 70+ Skill Templates - Development frameworks, cloud platforms, AI integrations
• 14 Agent Templates - Specialized AI assistants for different tasks
• 19 Hook Templates - Workflow automation (pre-command, post-command, error handling)
• Web-based Management - Beautiful interface with dark/light mode

Save 100+ hours of manual setup. Go from zero to productive in 60 seconds.

✨ Key Features

📦 Template Library (136+ Templates)

Commands (41 templates)

• Project Initialization: /spec, /bootstrap, /plan
• Development: /cook, /ask, /watzup
• Bug Fixes: /fix:fast, /fix:hard, /fix:ci
• Git Operations: /git:cm, /git:pr
• Design: /design:screenshot, /design:3d
• Documentation: /docs:init, /docs:update

Skills (70+ templates)

• Development: Next.js, React, TypeScript, Tailwind CSS
• Cloud & Edge: Vercel, AWS, Docker, Kubernetes
• AI & Media: OpenAI, Claude API, Image Processing
• Thinking Frameworks: System Thinking, Design Thinking

Agents (14 templates)

• Planner, Scout, Debugger, Tester, Code Reviewer
• UI/UX Designer, Copywriter, Database Admin
• And more...

🎨 Visual Management

Web Interface

• Beautiful flat design with dark/light mode
• Real-time markdown preview
• Advanced search & filtering
• Grid/List view modes
• Live reload support

File Browser

• Edit .claude files directly in browser
• Syntax highlighting
• Auto-save functionality
• Full markdown support

⚡ Workflow Automation

Hooks System (19 templates)

Pre-Command Hooks (5)

• Log start time
• Check git status
• Backup files
• Validate environment
• Check dependencies

Post-Command Hooks (8)

• Auto-format with Prettier
• Auto-lint with ESLint
• Run tests automatically
• Build project
• Git auto-commit
• Generate documentation
• Type checking
• Deploy to staging

Error Hooks (6)

• Log errors
• Git restore
• Restore backups
• Send alerts
• Clean cache
• Rollback changes

🔌 Extensibility

MCP Server Support

• Vision-to-UI (Screenshot → Code with Gemini Vision)
• Filesystem access
• SQLite database queries
• Custom server integration

Import/Export

• Backup entire workspace as JSON
• Share configurations with team
• Restore from backup
• Version control friendly

🚀 Quick Start

Prerequisites

• Node.js 18+ - Download here
• Claude Code CLI - Required first

Install Claude Code CLI

# macOS/Linux/WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows PowerShell
irm https://claude.ai/install.ps1 | iex

Install ClaudeX

npm install -g claudex

Or with npx (no installation required):

npx claudex init
npx claudex start

Initialize Workspace

Navigate to your project directory:

cd /path/to/your/project
claudex init

This creates a .claude/ workspace:

.claude/
├── commands/       # Your slash commands
├── skills/         # Reusable skills
└── config.json     # Workspace configuration

Start Web UI

claudex start

Options:

• --port <port> - Specify port (default: auto-detect)
• --watch - Enable live reload

Example:

claudex start --port 4200 --watch

The web UI opens at http://localhost:<port> 🎉

📚 How to Use

Managing Commands

From Templates:

1. Open Commands tab
2. Click Templates
3. Browse 41+ templates
4. Click Use on any template
5. Customize if needed
6. Save

Create Custom:

1. Click New
2. Enter name (without /)
3. Write content in markdown
4. Use variables: {{variable_name}}
5. Save

Use in Claude Code:

/your-command-name

Managing Skills

From Templates:

1. Open Skills tab
2. Click Templates
3. Browse 70+ skills across 9 categories
4. Click Use on any skill
5. Save

Create Custom:

1. Click New
2. Enter skill name
3. Write instructions/knowledge
4. Save

Skills automatically loaded by Claude Code agents.

Configuring Agents

1. Open Agents tab
2. Choose agent type:
   • Planner - Research & implementation plans
   • Scout - Fast codebase navigation
   • Debugger - Issue investigation
   • Tester - Comprehensive testing
   • Code Reviewer - Code quality review
3. Configure settings
4. Save

Or use Templates for quick setup.

Setting Up Hooks

Quick Setup:

1. Open Hooks tab
2. Click Templates
3. Choose from 19 templates:
   • Pre-command (5)
   • Post-command (8)
   • On-error (6)
4. Click Use
5. Customize command if needed
6. Save

Custom Hooks:

1. Click Add Hook
2. Select type (pre/post/error)
3. Enter shell command
4. Save

Hooks run automatically during Claude Code operations.

MCP Servers

Vision-to-UI Setup:

1. Get Google API Key
2. Open MCP Servers tab
3. Click Templates → vision-ui-analyzer
4. Enter API key
5. Enable server
6. Go to Skills → Use ui-from-screenshot
7. In Claude Code: paste screenshot → "Generate React component"

Other Servers:

• filesystem - File operations
• sqlite - Database queries

🎯 Use Cases

Solo Developers

• Organize Claude Code workflows
• Access 136+ professional templates
• Automate repetitive tasks
• Manage multiple projects

Development Teams

• Share standardized workflows
• Export/import team configurations
• Consistent code quality with hooks
• Collaborative agent setups

Agencies & Consultants

• Client-specific configurations
• Reusable project templates
• Quick project initialization
• Professional deliverables

Students & Learners

• Learn from 136+ templates
• Understand best practices
• Explore different frameworks
• Build portfolio projects

🛠️ Advanced Features

Import/Export

Export Workspace:

1. Go to Import/Export tab
2. Click Export Workspace
3. Download JSON file

Import Workspace:

1. Click Import Workspace
2. Upload JSON file or paste data
3. Confirm import

File Browser

Edit Files:

1. Go to Files tab
2. Browse .claude/ directory
3. Click file to open
4. Edit content
5. Save (auto-save available)

Live Reload

Enable watching:

claudex start --watch

Changes to .claude/ auto-refresh the UI via WebSocket.

📊 Template Categories

Commands (41 templates)

Skills (70+ templates)

⚙️ Configuration

Port Selection

ClaudeX auto-detects available ports:

Preferred: 4200, 4300, 4400, 4500, 5000-9000 Avoided: 3000, 5173, 8080, 8081

Manual:

claudex start --port 5000

Theme

Auto-detect: System preference (dark/light) Manual: Click theme toggle in top-right

Theme persists in localStorage.

🔍 Troubleshooting

Claude CLI not found

Install Claude Code first:

curl -fsSL https://claude.ai/install.sh | bash

Port already in use

Use different port:

claudex start --port 5000

ClaudeX auto-detects if port is busy.

Templates not loading

Check internet connection - Templates are embedded but may need initial fetch.

Clear cache:

rm -rf node_modules
npm install

Hooks not executing

Check permissions:

chmod +x .claude/hooks/*

Verify shell syntax in hook commands.

MCP server connection failed

For vision-ui-analyzer:

1. Verify Google API key is correct
2. Check API quota at Google AI Studio
3. Restart ClaudeX server

📖 Documentation

Workspace Structure

.claude/
├── commands/              # Slash commands (*.md)
├── skills/                # Reusable skills (*.md)
├── hooks/                 # Hook scripts (optional)
├── mcp-servers/           # MCP configs (optional)
├── config.json            # Main configuration
├── settings.local.json    # Local settings (optional)
└── prompt-history.json    # Enhancement history

Config File Structure

config.json:

{
  "version": "1.0",
  "created": "2025-11-04T00:00:00.000Z",
  "agents": {
    "defaultAgent": "general-purpose",
    "customAgents": {}
  },
  "hooks": {
    "pre-command": [],
    "post-command": [],
    "on-error": []
  },
  "mcp_servers": {}
}

🎨 Design Philosophy

Flat UI Design

• No shadows
• Minimal rounded corners
• Clean lines
• Consistent spacing

Dark Mode First

• System preference detection
• Manual toggle
• Full theme support
• Optimized contrast

Performance

• Fast builds (Vite)
• Efficient rendering
• Live reload
• Minimal bundle size

📱 Browser Support

Supported Browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile Safari
• Chrome Android

Requirements:

• ES6+ JavaScript
• CSS Grid & Flexbox
• LocalStorage
• WebSocket (for live reload)

💡 Tips & Tricks

Fast Template Access

Use search: Type keywords to filter templates instantly

Favorites: Star frequently used templates (coming soon)

Keyboard Shortcuts

• Ctrl/Cmd + S - Save current file
• Ctrl/Cmd + F - Search
• Esc - Close modals

Bulk Operations

Export selective items:

1. Select items with checkboxes
2. Click Export Selected

Duplicate templates:

1. Click Duplicate on any item
2. Auto-renamed (e.g., "command-copy")
3. Edit and save

Template Variables

Use in commands/skills:

# Welcome {{user_name}}!

Project: {{project_name}}

ClaudeX prompts for values when using template.

🚀 Performance

Expected Metrics:

• Server start: < 2s
• Page load: < 1.5s
• Template search: < 100ms
• File save: < 200ms
• Live reload: < 500ms

Optimizations:

• Vite for fast HMR
• Code splitting
• Lazy loading
• Efficient routing
• WebSocket for updates

🔒 Security

Path Validation:

• All file operations restricted to .claude/
• No arbitrary file system access
• Sandboxed execution

No External Requests:

• Templates embedded locally
• No telemetry
• No analytics tracking

Environment Variables:

• MCP server credentials never logged
• Stored securely in config files
• Not exposed to frontend

📦 What's Included

136+ Total Templates:

• ✅ 41 Command Templates
• ✅ 70+ Skill Templates
• ✅ 14 Agent Templates
• ✅ 19 Hook Templates
• ✅ 3+ MCP Server Templates

Tools:

• ✅ Visual workspace manager
• ✅ Markdown editor with preview
• ✅ File browser
• ✅ Import/Export system
• ✅ Template library
• ✅ Live reload support

🎓 Learning Resources

Getting Started:

1. Install → npm install -g claudex
2. Initialize workspace → claudex init
3. Start UI → claudex start
4. Browse templates → Explore categories
5. Try a command → Use /spec or /plan
6. Customize → Edit templates to fit your workflow

Example Workflow:

1. Use /spec to generate requirements
2. Use /plan to create implementation plan
3. Use /cook to develop features
4. Use /test to run tests
5. Use /git:pr to create pull request

🔗 Useful Links

• GitHub Repository
• Report Issues
• Claude Code Docs
• MCP Documentation
• Google AI Studio

📄 License

MIT License - Free to use, modify, and distribute.

🤝 Contributing

Contributions welcome!

Ways to contribute:

• Report bugs at GitHub Issues
• Suggest features
• Submit templates
• Improve documentation
• Fix issues via pull requests

Visit github.com/tct68/claudex to contribute.

💬 Support

Need help?

1. Check Troubleshooting section
2. Review Documentation
3. Open GitHub issue
4. Check Claude Code docs

Contact:

• Email: truongcongthuongz@gmail.com
• GitHub: @tct68

👨‍💻 Author

Thuong Truong

• GitHub: @tct68
• Email: truongcongthuongz@gmail.com

Built with ❤️ for the Claude Code community

Transform your Claude Code experience. Start in 60 seconds. 🚀