# Claude Code Customization Suite

> 40+ specialized AI agents, MCP tools, and enterprise-grade automation scripts for Claude Code.

[![Agents](https://img.shields.io/badge/Agents-40+-purple)](agents/)
[![MCP Tools](https://img.shields.io/badge/MCP_Tools-15+-blue)](#mcp-tools)
[![License](https://img.shields.io/badge/License-MIT-green)](LICENSE)

## 🚀 Quick Start

```bash
# Clone the repository
git clone https://github.rommark.dev/admin/Enhance-Claude-Code-with-30--Agentic-Tools.git
cd Enhance-Claude-Code-with-30--Agentic-Tools

# Run the interactive installer
chmod +x interactive-install-claude.sh
./interactive-install-claude.sh

# Follow the prompts:
# ✅ Choose model (Anthropic/Z.AI)
# ✅ Select agent categories to install
# ✅ Configure MCP tools
# ✅ Enter your API key
# ✅ Launch Claude Code
```

## ✨ What's Included

- **🤖 40+ Custom Agents** across 8 categories
- **🔧 15+ MCP Tools** for vision, search, and GitHub integration
- **⚡ Auto-Triggering** test writer and UI enhancement agents
- **🎛️ Interactive Installation** with model selection (Anthropic/Z.AI)
- **🛡️ One-Click Setup** with comprehensive verification

## 📋 Complete Integration Guide

### Step 1: Choose Your Model Provider

Choose **Option A** (Anthropic) or **Option B** (Z.AI/GLM Plan) below.

---

### 🔵 Option A: Anthropic Claude (Official API)

**Best for:** Production, highest quality, official support

#### 1.1 Get Your API Key

```bash
# Visit: https://console.anthropic.com/
# Create an account and get your API key
```

#### 1.2 Configure Claude Code

```bash
# Create/update your Claude Code settings
mkdir -p ~/.claude
cat > ~/.claude/settings.json << 'EOF'
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "sk-ant-your-actual-api-key-here",
    "ANTHROPIC_BASE_URL": "https://api.anthropic.com"
  }
}
EOF
```

#### 1.3 Install Claude Code (if not installed)

```bash
# Using npm
npm install -g @anthropic-ai/claude-code

# Or using curl
curl -fsSL https://claude.ai/install.sh | sh
```

#### 1.4 Verify Installation

```bash
# Test Claude Code
claude --version

# Test API connection
echo "Hello, Claude!" | claude
```

---

### 🟢 Option B: Z.AI / GLM Coding Plan (Cost-Effective)

**Best for:** Development, testing, cost savings (up to 90% cheaper)

#### 1.1 Get Your API Key

```bash
# Visit: https://z.ai/
# Create an account and get your GLM Coding Plan API key
```

#### 1.2 Configure Claude Code

```bash
# Create/update your Claude Code settings
mkdir -p ~/.claude
cat > ~/.claude/settings.json << 'EOF'
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "your-zai-api-key-here",
    "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic",
    "API_TIMEOUT_MS": "3000000"
  }
}
EOF
```

#### 1.3 Install Claude Code

```bash
# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Or use curl
curl -fsSL https://claude.ai/install.sh | sh
```

#### 1.4 Verify Installation

```bash
# Test Claude Code with Z.AI
claude --version

# Test connection
echo "Test connection" | claude
```

---

### Step 2: Install This Customization Suite

```bash
# Clone this repository
git clone https://github.rommark.dev/admin/Enhance-Claude-Code-with-30--Agentic-Tools.git
cd Enhance-Claude-Code-with-30--Agentic-Tools

# Run the interactive installer
chmod +x interactive-install-claude.sh
./interactive-install-claude.sh
```

**The installer will:**
- ✅ Detect your Claude Code installation
- ✅ Backup existing customizations
- ✅ Let you choose agent categories to install
- ✅ Configure MCP tools
- ✅ Set up auto-triggering agents
- ✅ Verify everything works

**Installation options:**
```
Step 1: Model Selection
  [ ] Already configured - skip model setup
  [ ] Anthropic Claude (official API)
  [ ] Z.AI / GLM Coding Plan

Step 2: Agent Categories
  [ ] Engineering (7 agents) - RECOMMENDED
  [ ] Marketing (7 agents)
  [ ] Product (3 agents)
  [ ] Project Management (3 agents)
  [ ] Studio Operations (5 agents)
  [ ] Testing (5 agents) - RECOMMENDED
  [ ] Design (5 agents)
  [ ] Bonus (2 agents)

Step 3: MCP Tools
  [ ] Vision Tools (8 tools) - RECOMMENDED
  [ ] Web Tools (search, reader)
  [ ] GitHub Tools (zread)

Step 4: Plugins & Hooks
  [ ] Auto-triggering agents
  [ ] Custom hooks
```

---

### Step 3: Install MCP Tools (Optional but Recommended)

#### 3.1 Vision Tools (8 tools)

```bash
# Install Z.AI MCP server for vision tools
npm install -g @z_ai/mcp-server

# Verify installation
npx @z_ai/mcp-server --help
```

#### 3.2 Web & GitHub Tools

```bash
# Install Z.AI coding helper
npm install -g @z_ai/coding-helper

# Verify installation
npx @z_ai/coding-helper --help
```

---

### Step 4: Verify Your Installation

```bash
# Run the verification script
chmod +x verify-claude-setup.sh
./verify-claude-setup.sh
```

**Expected output:**
```
✅ Claude Code installed
✅ Settings configured
✅ Agents directory exists
✅ 37 agent files found
✅ MCP tools available
✅ Configuration valid
```

---

### Step 5: Test Your Setup

#### 5.1 Test Basic Functionality

```bash
# Start Claude Code
claude

# Try a simple command
> List all available agents
```

#### 5.2 Test an Agent

```bash
# In Claude Code, try:
> Use the frontend-developer agent to create a React component
```

#### 5.3 Test MCP Tools (if installed)

```bash
# In Claude Code, try:
> Analyze this image: [path to image]
> Search the web for "latest AI trends"
> Read the documentation from https://example.com
```

---

## 📦 Installation Scripts

| Script | Description | Size |
|--------|-------------|------|
| `interactive-install-claude.sh` | Full interactive installer (recommended) | 33KB |
| `claude-setup-manager.sh` | Menu-driven setup manager | 11KB |
| `create-complete-package.sh` | Create distributable packages | 16KB |
| `verify-claude-setup.sh` | Verify your installation | 9KB |
| `export-claude-customizations.sh` | Export existing customizations | 6.5KB |

---

## 🤖 Agent Categories

### Engineering (7 agents)
- **AI Engineer** - ML & LLM integration, prompt engineering
- **Backend Architect** - API design, database architecture, microservices
- **DevOps Automator** - CI/CD pipelines, infrastructure as code
- **Frontend Developer** - React/Vue/Angular, responsive design
- **Mobile Builder** - iOS/Android React Native apps
- **Rapid Prototyper** - Quick MVPs in 6-day cycles
- **Test Writer/Fixer** - Auto-write and fix tests

### Marketing (7 agents)
- **TikTok Strategist** - Viral TikTok marketing strategies
- **Growth Hacker** - Growth strategies and user acquisition
- **Content Creator** - Multi-platform content creation
- **Instagram Curator** - Instagram strategy and engagement
- **Reddit Builder** - Reddit community building
- **Twitter Engager** - Twitter strategy and tactics
- **App Store Optimizer** - ASO optimization

### Product (3 agents)
- **Feedback Synthesizer** - User feedback analysis
- **Sprint Prioritizer** - 6-day sprint planning
- **Trend Researcher** - Market trend analysis

### Project Management (3 agents)
- **Experiment Tracker** - A/B test tracking
- **Project Shipper** - Launch coordination
- **Studio Producer** - Team workflow optimization

### Studio Operations (5 agents)
- **Analytics Reporter** - Data analysis and reporting
- **Finance Tracker** - Financial tracking
- **Infrastructure Maintainer** - Infrastructure management
- **Legal Compliance Checker** - Compliance checks
- **Support Responder** - Customer support automation

### Testing (5 agents)
- **API Tester** - API testing
- **Performance Benchmarker** - Performance testing
- **Test Results Analyzer** - Test analysis
- **Tool Evaluator** - Tool evaluation
- **Workflow Optimizer** - Workflow optimization

### Design (5 agents)
- **Brand Guardian** - Brand consistency
- **UI Designer** - UI design and implementation
- **UX Researcher** - User experience research
- **Visual Storyteller** - Visual communication
- **Whimsy Injector** - Delightful UI enhancements

### Bonus (2 agents)
- **Joker** - Humor and team morale
- **Studio Coach** - Team coaching and motivation

---

## 🔧 MCP Tools

### Vision Tools (8 tools)
| Tool | Function | Input |
|------|----------|-------|
| `analyze_image` | General image analysis | PNG, JPG, JPEG |
| `analyze_video` | Video content analysis | MP4, MOV, M4V |
| `ui_to_artifact` | UI screenshot to code | Screenshots |
| `extract_text` | OCR text extraction | Any image |
| `diagnose_error` | Error screenshot diagnosis | Error screenshots |
| `ui_diff_check` | Compare UI screenshots | Before/after |
| `analyze_data_viz` | Data visualization insights | Dashboards, charts |
| `understand_diagram` | Technical diagram analysis | UML, flowcharts |

### Web & GitHub Tools
| Tool | Function | Source |
|------|----------|--------|
| `web-search-prime` | AI-optimized web search | [claude-codex-settings](https://github.com/fcakyon/claude-codex-settings) |
| `web-reader` | Web page to markdown conversion | [claude-codex-settings](https://github.com/fcakyon/claude-codex-settings) |
| `zread` | GitHub repository reader | [claude-codex-settings](https://github.com/fcakyon/claude-codex-settings) |
| `@z_ai/mcp-server` | Vision and analysis tools | [@z_ai/mcp-server](https://github.com/zai-ai/mcp-server) |
| `@z_ai/coding-helper` | Web and GitHub integration | [@z_ai/mcp-server](https://github.com/zai-ai/mcp-server) |

---

## 📚 Advanced Configuration

### Auto-Triggering Agents

Enable automatic test writing when code changes:

```bash
# Configure hooks
cat > ~/.claude/hooks.json << 'EOF'
{
  "userPromptSubmitHook": "test-writer-fixer@agent",
  "toolOutputHook": "whimsy-injector@agent"
}
EOF
```

### Custom Model Selection

Use specific models for different tasks:

```bash
# Add to settings.json
{
  "env": {
    "MODEL_DEFAULT": "claude-sonnet-4-20250514",
    "MODEL_FAST": "claude-haiku-4-20250514",
    "MODEL_EXPENSIVE": "claude-opus-4-20250514"
  }
}
```

---

## 📚 Documentation

- **[CLAUDE-CUSTOMIZATIONS-README.md](CLAUDE-CUSTOMIZATIONS-README.md)** - Complete feature documentation
- **[FINAL-SETUP-GUIDE.md](FINAL-SETUP-GUIDE.md)** - Detailed setup instructions
- **[SCRIPTS-GUIDE.md](SCRIPTS-GUIDE.md)** - Script usage guide

---

## 🙏 Acknowledgments & Sources

This customization suite is built upon excellent open-source projects and community contributions.

### Core Inspiration

- **[claude-codex-settings](https://github.com/fcakyon/claude-codex-settings)** by [fcakyon](https://github.com/fcakyon)
  - Comprehensive Claude Code settings and MCP configurations
  - Foundation for MCP tool integration patterns

- **[ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)** by [nextlevelbuilder](https://github.com/nextlevelbuilder)
  - Professional UI/UX design patterns and agent behaviors
  - Inspired design-focused agents and whimsy-injector

- **[Ralph](https://github.com/iannuttall/ralph)** by [iannuttall](https://github.com/iannuttall)
  - AI assistant framework and agent patterns
  - Inspired multi-agent coordination and studio operations workflows

### MCP Tool Sources

- **[@z_ai/mcp-server](https://github.com/zai-ai/mcp-server)** - Vision analysis, OCR, UI comparison, video analysis, and diagram understanding
- **[Model Context Protocol](https://github.com/modelcontextprotocol)** - Open standard for connecting AI models to tools
- **[Claude Code](https://github.com/anthropics/claude-code)** - Official Claude Code CLI by Anthropic

### Agent Architecture

- **6-Day Development Cycle** - Inspired by rapid iteration methodologies and startup best practices
- **Studio Operations** - Professional studio management patterns applied to software development
- **Auto-Triggering Agents** - Proactive agent invocation patterns for test writing and UI enhancement

---

## 🤝 Community & Contributing

This suite is **100% open source** and available on [GitHub](https://github.rommark.dev/admin/Enhance-Claude-Code-with-30--Agentic-Tools).

- ⭐ Star the repo
- 🐛 Report issues
- 🔄 Submit pull requests
- 💡 Contribute your own agents!

---

## 📝 License

MIT License - Feel free to use and modify for your needs.

---

**Built for developers who ship.** 🚀