Claude Code Customization Suite

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

🚀 Quick Start

# 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

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

1.2 Configure Claude Code

# 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)

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

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

1.4 Verify Installation

# 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

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

1.2 Configure Claude Code

# 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

# 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

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

# Test connection
echo "Test connection" | claude

---

Step 2: Install This Customization Suite

# 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)

# 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

# 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

# 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

# Start Claude Code
claude

# Try a simple command
> List all available agents

5.2 Test an Agent

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

5.3 Test MCP Tools (if installed)

# 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
web-reader	Web page to markdown conversion	claude-codex-settings
zread	GitHub repository reader	claude-codex-settings
@z_ai/mcp-server	Vision and analysis tools	@z_ai/mcp-server
@z_ai/coding-helper	Web and GitHub integration	@z_ai/mcp-server

---

📚 Advanced Configuration

Auto-Triggering Agents

Enable automatic test writing when code changes:

# 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:

# 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 - Complete feature documentation
• FINAL-SETUP-GUIDE.md - Detailed setup instructions
• 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 by fcakyon

  • Comprehensive Claude Code settings and MCP configurations
  • Foundation for MCP tool integration patterns

• ui-ux-pro-max-skill by nextlevelbuilder

  • Professional UI/UX design patterns and agent behaviors
  • Inspired design-focused agents and whimsy-injector

• Ralph by iannuttall

  • AI assistant framework and agent patterns
  • Inspired multi-agent coordination and studio operations workflows

MCP Tool Sources

• @z_ai/mcp-server - Vision analysis, OCR, UI comparison, video analysis, and diagram understanding
• Model Context Protocol - Open standard for connecting AI models to tools
• 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.

• ⭐ 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. 🚀