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:

Open Commands tab
Click Templates
Browse 41+ templates
Click Use on any template
Customize if needed
Save

Create Custom:

Click New
Enter name (without /)
Write content in markdown
Use variables: {{variable_name}}
Save

Use in Claude Code:

/your-command-name

Managing Skills

From Templates:

Open Skills tab
Click Templates
Browse 70+ skills across 9 categories
Click Use on any skill
Save

Create Custom:

Click New
Enter skill name
Write instructions/knowledge
Save

Skills automatically loaded by Claude Code agents.

Configuring Agents

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

Or use Templates for quick setup.

Setting Up Hooks

Quick Setup:

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

Custom Hooks:

Click Add Hook
Select type (pre/post/error)
Enter shell command
Save

Hooks run automatically during Claude Code operations.

MCP Servers

Vision-to-UI Setup:

Get Google API Key
Open MCP Servers tab
Click Templates → vision-ui-analyzer
Enter API key
Enable server
Go to Skills → Use ui-from-screenshot
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:

Go to Import/Export tab
Click Export Workspace
Download JSON file

Import Workspace:

Click Import Workspace
Upload JSON file or paste data
Confirm import

File Browser

Edit Files:

Go to Files tab
Browse .claude/ directory
Click file to open
Edit content
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)

Category	Count	Examples
Project Init	5	`/spec`, `/bootstrap`, `/plan`
Development	4	`/cook`, `/ask`, `/watzup`
Testing & Debug	3	`/test`, `/debug`, `/fix:test`
Bug Fixes	6	`/fix:fast`, `/fix:hard`, `/fix:ci`
Documentation	3	`/docs:init`, `/docs:update`
Git Operations	4	`/git:cm`, `/git:pr`
Design	6	`/design:screenshot`, `/design:3d`
Content	5	`/content:cro`, `/content:enhance`
Integrations	2	`/integrate:polar`, `/integrate:sepay`
Utilities	3	`/journal`, `/skill:create`

Skills (70+ templates)

Category	Count	Examples
Development	16	Next.js, React, TypeScript, Tailwind
Creative	8	Logo Design, UX Writing, Animation
Cloud & Edge	12	Vercel, AWS, Docker, Kubernetes
Enterprise	6	Microservices, API Gateway, CQRS
AI & Media	9	OpenAI, Claude API, Image Processing
Documents	5	PDF, Excel, Word
Thinking	8	System Thinking, Design Thinking
Utilities	4	Error Handling, Logging, Caching

⚙️ 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:

Verify Google API key is correct
Check API quota at Google AI Studio
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:

Select items with checkboxes
Click Export Selected

Duplicate templates:

Click Duplicate on any item
Auto-renamed (e.g., "command-copy")
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:

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

Example Workflow:

Use /spec to generate requirements
Use /plan to create implementation plan
Use /cook to develop features
Use /test to run tests
Use /git:pr to create pull request

🔗 Useful Links

📄 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?

Check Troubleshooting section
Review Documentation
Open GitHub issue
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. 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.claude		.claude
.kiro/specs/devx-ui-ux-enhancement		.kiro/specs/devx-ui-ux-enhancement
bin		bin
docs		docs
src		src
.gitignore		.gitignore
.npmignore		.npmignore
CLAUDE.md		CLAUDE.md
FEATURE_ORCHESTRATION_GUIDE.md		FEATURE_ORCHESTRATION_GUIDE.md
INTRODUCTION.md		INTRODUCTION.md
LICENSE		LICENSE
MARKDOWN_TEST.md		MARKDOWN_TEST.md
README.md		README.md
append-skill.js		append-skill.js
claudex-1.0.0.tgz		claudex-1.0.0.tgz
pack-output.txt		pack-output.txt
package-lock.json		package-lock.json
package.json		package.json

License

tct68/claudex

Folders and files

Latest commit

History

Repository files navigation