claude-code-glm-suite/MASTER-PROMPT.md

# 🚀 Claude Code & GLM Suite - Master Integration Prompt

> **Complete installation with ALL sources, explanations, and real-life examples**

---

## ⚠️ BEFORE YOU BEGIN - Read This First!

### **If Using Z.AI / GLM Coding Plan (90% cheaper):**

**You MUST configure GLM FIRST before using Claude Code!**

**🎯 EASIEST METHOD - Use Z.AI Coding Helper Wizard:**

```bash
# Step 1: Install the coding helper
npm install -g @z_ai/coding-helper

# Step 2: Run the interactive GLM setup wizard
npx @z_ai/coding-helper init

# The wizard will:
# - Ask for your Z.AI API key
# - Configure Claude Code for GLM automatically
# - Set up proper model mappings (glm-4.5-air, glm-4.7)
# - Verify everything works

# Step 3: Start Claude Code with GLM configured
claude

# Step 4: Verify GLM is working (enter /status when prompted)
/status
```

**📖 Official GLM Documentation:** https://docs.z.ai/devpack/tool/claude

---

**Alternative: Manual Configuration (if you prefer):**

```bash
# Step 1: Get your API key
# Visit: https://z.ai/
# Sign up for GLM Coding Plan and copy your API key

# Step 2: Install Claude Code (if not installed)
npm install -g @anthropic-ai/claude-code

# Step 3: Create 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",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.7",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.7"
  }
}
EOF

# Step 4: Start Claude Code
claude
```

---

### **If Using Anthropic Claude (Official API):**

```bash
# Step 1: Get your API key
# Visit: https://console.anthropic.com/

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

# Step 3: Install Claude Code (if not installed)
npm install -g @anthropic-ai/claude-code

# Step 4: Start Claude Code
claude
```

---

## 📋 HOW TO USE THE MASTER PROMPT

**Once Claude Code is running and configured:**

### **✂️ COPY FROM HERE:**

```text
═══════════════════════════════════════════════════════════════════════════════

I want to install the Ultimate Claude Code & GLM Customization Suite with ALL integrations including agents, MCP tools, code analysis, and automation. Please perform the following complete integration:

## Overview: What We're Installing

This suite includes 6 major components from open-source projects:

1. **contains-studio/agents** - 37 specialized AI agents with auto-triggering
2. **@z_ai/mcp-server** - 8 vision and analysis tools (screenshots, videos, diagrams)
3. **@z_ai/coding-helper** - Web search, GitHub integration, GLM setup wizard
4. **llm-tldr** - Token-efficient code analysis (95% reduction, semantic search)
5. **ui-ux-pro-max-skill** - Professional UI/UX design agent with PROACTIVELY auto-triggering
6. **claude-codex-settings** - MCP configuration patterns and best practices (reference)
7. **Ralph** - Autonomous agent coordination patterns (reference, integrated into contains-studio agents)

Each component is explained below with real-life examples showing the benefits.

---

## Step 1: Install Contains Studio Agents (37 agents with PROACTIVELY auto-triggering)

Source: https://github.com/contains-studio/agents

Clone the contains-studio/agents repository:
git clone https://github.com/contains-studio/agents.git /tmp/contains-studio-agents

Copy all agents to Claude Code agents directory:
cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/

### What This Provides:

37 specialized agents across 8 departments:
- **Engineering (7):** AI Engineer, Backend Architect, DevOps Automator, Frontend Developer, Mobile Builder, Rapid Prototyper, Test Writer/Fixer
- **Marketing (7):** TikTok Strategist, Growth Hacker, Content Creator, Instagram Curator, Reddit Builder, Twitter Engager, App Store Optimizer
- **Design (6):** Brand Guardian, UI Designer, UX Researcher, Visual Storyteller, Whimsy Injector, **UI/UX Pro Max**
- **Product (3):** Feedback Synthesizer, Sprint Prioritizer, Trend Researcher
- **Project Management (3):** Experiment Tracker, Project Shipper, Studio Producer
- **Studio Operations (5):** Analytics Reporter, Finance Tracker, Infrastructure Maintainer, Legal Compliance Checker, Support Responder
- **Testing (5):** API Tester, Performance Benchmarker, Test Results Analyzer, Tool Evaluator, Workflow Optimizer
- **Bonus (2):** Studio Coach, Joker

### Auto-Triggering System:

**5 PROACTIVELY Agents** (trigger automatically based on context):

1. **studio-coach** - Triggers on complex multi-agent tasks
   - Coordinates multiple specialists
   - Motivates and aligns agents
   - Example: "Build a viral TikTok app in 2 weeks" → studio-coach organizes frontend, backend, marketing agents

2. **test-writer-fixer** - Triggers after code modifications
   - Automatically writes comprehensive tests
   - Fixes broken tests
   - Example: You modify authentication code → test-writer-fixer writes unit tests automatically

3. **whimsy-injector** - Triggers after UI/UX changes
   - Adds delightful micro-interactions
   - Makes interfaces memorable
   - Example: You create a loading spinner → whimsy-injector adds bounce animation and encouraging messages

4. **experiment-tracker** - Triggers when feature flags added
   - Tracks A/B tests and experiments
   - Defines metrics and monitors results
   - Example: You add conditional logic for experiment → experiment-tracker sets up tracking

5. **ui-ux-pro-max** - Triggers on UI/UX design work
   - Professional design patterns and accessibility
   - Comprehensive styling guidelines
   - Example: "Create a pricing page" → ui-ux-pro-max applies professional design patterns

---

<div style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); border-left: 5px solid #667eea; padding: 30px; margin: 30px 0; border-radius: 8px">

## 📖 Real-Life Examples: How Auto-Triggering Works

<div style="background: #fff; padding: 20px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #e1e4e8">

> **⚠️ IMPORTANT: These are ILLUSTRATIVE EXAMPLES ONLY**
>
> The examples below demonstrate the conceptual difference between working without auto-triggering agents versus with auto-triggering agents. These are simplified scenarios to help you understand how the PROACTIVELY system improves your workflow.
>
> **These are not actual output promises** - actual results will vary based on your specific use case, context, and model capabilities.

</div>

### Example 1: Adding OAuth Authentication

<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">

**❌ WITHOUT Auto-Triggering Agents:**
```diff
You: Help me add OAuth to my app
Claude: [Writes code, but no tests]
You: [Manually write tests later]
Claude: [Fixes bugs]
You: [Deployment issues]
```

</div>

<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">

**✅ WITH Auto-Triggering Agents:**
```
You: Help me add OAuth to my app
Claude: [Writes code]
[test-writer-fixer auto-triggers]
Claude (as test-writer-fixer): Writing comprehensive tests for OAuth...
✓ Unit tests for login flow
✓ Integration tests for token refresh
✓ Error handling tests
✓ Edge case coverage
All tests passing!
[whimsy-injector auto-triggers]
Claude (as whimsy-injector): Adding delightful touches to OAuth UI...
✓ Smooth page transitions
✓ Encouraging error messages
✓ Celebration animation on successful login
Ready to deploy!
```

**Key Difference:** Auto-triggering agents proactively handle tasks (testing, UX refinement) that you'd otherwise need to remember and do manually.

</div>

---

### Example 2: UI Component Creation (ui-ux-pro-max)

<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">

**❌ WITHOUT Auto-Triggering:**
```
You: Create a modal for user settings
Claude: [Creates basic modal without accessibility]
[Missing: ARIA labels, focus trapping, keyboard support]
[Result: Modal doesn't work with screen readers]
```

</div>

<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">

**✅ WITH Auto-Triggering (ui-ux-pro-max):**
```
You: Create a modal for user settings
[ui-ux-pro-max PROACTIVELY triggers]
Claude (as ui-ux-pro-max): I'll create a professional, accessible modal...
✓ Proper ARIA labels and roles
✓ Focus trap implementation
✓ Escape key and backdrop click handling
✓ Smooth animations (150-300ms)
✓ Mobile-responsive sizing
✓ WCAG 2.1 AA compliant colors
[Result: Modal works perfectly for all users]
```

</div>

---

### Example 3: Error Diagnosis from Screenshots

<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">

**❌ WITHOUT Vision Tools:**
```
You: [Paste error screenshot]
Claude: I can't see images. Please paste the text.
You: [Types error manually]
Claude: Let me help...
[Misses visual context like line numbers, file paths shown in screenshot]
```

</div>

<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">

**✅ WITH Vision Tools (diagnose_error):**
```
You: [Upload error-screenshot.png]
You: Analyze this error
Claude: [Using diagnose_error tool]
I can see this is a TypeError in user.service.ts at line 42.
The error "Cannot read property 'id' of undefined" occurs because
the user object is null when the API call fails.
The stack trace shows it originated in the login function.
Fix: Add null check after API call.
[Provides precise fix with visual context]
```

</div>

---

### Example 4: Understanding Large Codebases

<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">

**❌ WITHOUT Token-Efficient Analysis:**
```
You: Explain how authentication works in this 100K-line codebase
Claude: [Reading files... token limit exceeded...]
Cannot fit entire codebase in context.
```

</div>

<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">

**✅ WITH TLDR (95% Token Reduction):**
```
You: Explain how authentication works
Claude: [Using tldr context]
Analysis complete in 2 seconds, 12K tokens (vs 104K raw)

Authentication Flow:
1. login() (app/auth.py:45) - Entry point
   → validate_credentials() (app/auth.py:78)
      → hash_password() (app/crypto.py:23)
   → create_session() (app/session.py:12)
   → redirect_to_dashboard() (app/routes.py:156)

Key dependencies:
- Uses bcrypt for hashing
- Session stored in Redis
- 30-minute timeout
[Complete understanding with 89% fewer tokens]
```

</div>

---

### Example 5: Web Research for Current Information

<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 15px">

**❌ WITHOUT Web Search:**
```
You: What's the latest React version?
Claude: [Training cutoff knowledge] React 18 was released in 2022.
You: [Outdated information]
```

</div>

<div style="background: #d1e7dd; padding: 15px; border-left: 4px solid #198754; border-radius: 4px; margin-bottom: 15px">

**✅ WITH Web Search (web-search-prime):**
```
You: What's the latest React version and features?
Claude: [Using web-search-prime]
Searching current web...
React 19 was released in December 2024 with new features:
- Server Actions
- Enhanced useTransition
- New Suspense features
[Fully up-to-date information]
```

</div>

---

### Summary: The Auto-Triggering Advantage

| Aspect | Without Auto-Triggering | With Auto-Triggering |
|--------|------------------------|---------------------|
| **Testing** | Manual, forget to do it | Automatic after code changes |
| **UX Polish** | Basic, inconsistent | Professional, accessible |
| **Error Analysis** | Type text manually | Upload screenshot, instant diagnosis |
| **Large Codebases** | Token limits, incomplete | 95% reduction, complete understanding |
| **Research** | Outdated knowledge | Real-time web search |
| **Your Role** | Remember everything | Focus on core logic, agents handle rest |

**Bottom Line:** Auto-triggering agents handle the "should-do" tasks (testing, UX polish, documentation) that you know you should do but often forget or skip due to time constraints.

</div>

---

---

## Step 1.5: Install UI/UX Pro Max Agent (PROACTIVELY Auto-Triggers)

Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Clone the ui-ux-pro-max-skill repository:
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill

Install UI/UX Pro Max agent with PROACTIVELY triggers:
mkdir -p ~/.claude/agents/design
wget -O ~/.claude/agents/design/ui-ux-pro-max.md https://raw.githubusercontent.com/github.rommark.dev/admin/claude-code-glm-suite/main/agents/design/ui-ux-pro-max.md

Also install the SKILL file for enhanced compatibility:
mkdir -p ~/.claude/skills/ui-ux-pro-max
cp /tmp/ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/SKILL.md ~/.claude/skills/ui-ux-pro-max/

### What This Provides:

**ui-ux-pro-max agent** with PROACTIVELY auto-triggering for:
- UI component creation (buttons, modals, forms, cards, navbars)
- Page design (landing pages, dashboards, pricing pages)
- UI/UX review and audits
- Style guide application (colors, typography, spacing)
- Accessibility compliance (WCAG 2.1 AA/AAA)
- Tech-stack specific patterns (React, Next.js, Vue, Tailwind, shadcn/ui)

**Comprehensive design knowledge:**
- 50+ design styles (glassmorphism, minimalism, brutalism, etc.)
- 97 color palettes by industry
- 57 font pairings with Google Fonts imports
- Accessibility standards (contrast ratios, keyboard nav, ARIA labels)
- Professional design patterns (no emoji icons, proper hover states)

**Key Features:**
- Automatic UI/UX review during design work
- Professional design patterns applied proactively
- Accessibility-first approach (WCAG 2.1 AA/AAA)
- Comprehensive styling guidelines

---

## Step 2: Install MCP Vision & Analysis Tools

Source: https://github.com/zai-ai/mcp-server

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

Verify installation:
npx @z_ai/mcp-server --help

### What This Provides (8 MCP Tools):

1. **analyze_image** - Understand any image (screenshots, photos, designs)
2. **analyze_video** - Analyze video content for key moments
3. **ui_to_artifact** - Convert UI screenshots to code
4. **extract_text** - OCR text extraction from images
5. **diagnose_error** - Understand errors from screenshots
6. **ui_diff_check** - Compare two UI screenshots
7. **analyze_data_viz** - Extract insights from dashboards/charts
8. **understand_diagram** - Understand technical diagrams (UML, flowcharts)

**Key Features:**
- Screenshot-to-code conversion
- Error diagnosis from images
- Video and diagram understanding
- UI comparison and analysis

---

## Step 3: Install MCP Web & GitHub Tools

Source: https://github.com/fcakyon/claude-codex-settings (inspired by)

Install Z.AI coding helper:
npm install -g @z_ai/coding-helper

Verify installation:
npx @z_ai/coding-helper --help

### What This Provides (3 MCP Tools):

1. **web-search-prime** - AI-optimized web search for current information
2. **web-reader** - Convert any web page to clean markdown
3. **zread** - Read and analyze entire GitHub repositories

**Key Features:**
- Real-time web search for current information
- Repository analysis without manual file pasting
- Web page to clean markdown conversion

---

## Step 4: Install llm-tldr (Token-Efficient Code Analysis)

Source: https://github.com/parcadei/llm-tldr

Install llm-tldr:
pip install llm-tldr

Initialize for current directory:
tldr warm .

### What This Provides:

**95% token reduction** while preserving code understanding via 5-layer analysis:
- **Layer 1 (AST)** - Functions, classes, imports structure
- **Layer 2 (Call Graph)** - Who calls what (forward/backward)
- **Layer 3 (CFG)** - Control flow, complexity metrics
- **Layer 4 (DFG)** - Data flow, variable transformations
- **Layer 5 (PDG)** - Program dependence, slicing for debugging

**18 MCP Tools including:**
- `context` - LLM-ready summaries (95% token savings)
- `semantic` - Search by behavior, not just text
- `slice` - Show only code affecting a specific line
- `impact` - Who calls this function? (refactoring safety)
- `cfg` - Control flow graph
- `dfg` - Data flow graph
- And 12 more...

**Key Features:**
- 95% token reduction for large codebases
- Semantic search by behavior (not just text)
- Program slicing for precise debugging
- Impact analysis for safe refactoring

---

## Step 5: Configure MCP Servers in Claude Code

Create MCP configuration for TLDR:
mkdir -p ~/.claude
cat > ~/.claude/claude_desktop_config.json << 'EOF'
{
  "mcpServers": {
    "tldr": {
      "command": "tldr-mcp",
      "args": ["--project", "."]
    },
    "zai-vision": {
      "command": "npx",
      "args": ["@z_ai/mcp-server"]
    }
  }
}
EOF

Note: TLDR MCP server provides 18 tools for code analysis.
Vision tools from @z_ai/mcp-server are automatically available.

---

## Step 6: Configure Hooks-Based Auto-Triggering (Optional)

Create hooks.json for additional auto-triggering:
cat > ~/.claude/hooks.json << 'EOF'
{
  "userPromptSubmitHook": "test-writer-fixer@agent",
  "toolOutputHook": "whimsy-injector@agent"
}
EOF

Note: PROACTIVELY agents (studio-coach, experiment-tracker) work automatically without hooks.

---

## Step 7: Verify Complete Installation

Run comprehensive checks:

# 1. Verify agents (should be 38+ files)
ls -la ~/.claude/agents/
find ~/.claude/agents -name "*.md" | wc -l

# 2. Verify MCP tools
npx @z_ai/mcp-server --help
npx @z_ai/coding-helper --help
tldr --help

# 3. Verify TLDR indexing
tldr status .

# 4. Test Claude Code
claude --version

Expected results:
- ✅ 38+ agent files (37 agents + README)
- ✅ All 8 departments present
- ✅ MCP tools accessible
- ✅ TLDR indexed current directory
- ✅ Settings configured

---

## Summary: What You Now Have

### 40+ AI Agents
Organized across 8 departments with PROACTIVELY auto-triggering

### 15+ MCP Tools
- 8 vision/analysis tools (@z_ai/mcp-server)
- 3 web/GitHub tools (@z_ai/coding-helper)
- 18 code analysis tools (llm-tldr)

### Two Auto-Triggering Systems
- PROACTIVELY keyword (context-aware)
- Hooks-based (event-driven)

### Complete Integration Benefits

**Token Efficiency:**
- TLDR reduces code context by 95%
- $100/month savings on API costs for large codebases

**Code Understanding:**
- 5-layer analysis (AST → PDG)
- Semantic search by behavior
- Impact analysis for safe refactoring

**Visual Capabilities:**
- Screenshot-to-code conversion
- Error diagnosis from images
- Video and diagram understanding

**Automation:**
- Auto-test writing after code changes
- Auto-UI enhancement after design changes
- Auto-coordination for complex tasks

**Up-to-Date Information:**
- Real-time web search
- Repository analysis
- Current documentation

Please execute this complete integration step by step and confirm when each component is installed.

═══════════════════════════════════════════════════════════════════════════════
```

**✂️ COPY ENDS HERE**

---

## 📚 Complete Source List with Explanations

### 1. contains-studio/agents
**Source:** https://github.com/contains-studio/agents
**Type:** Agent Collection (37 agents)
**Integration:** File-based agents in ~/.claude/agents/
**Key Feature:** PROACTIVELY auto-triggering system
**Benefits:**
- Context-aware agent invocation
- Rich examples with commentary
- 500+ word system prompts
- Department-based organization

### 2. @z_ai/mcp-server
**Source:** https://github.com/zai-ai/mcp-server
**Type:** MCP Server (8 tools)
**Integration:** npm install -g @z_ai/mcp-server
**Key Feature:** Vision and analysis capabilities
**Benefits:**
- Screenshot understanding
- Error diagnosis from images
- Video and diagram analysis
- UI comparison and code generation

### 3. @z_ai/coding-helper
**Source:** https://github.com/zai-ai/mcp-server (same repo)
**Type:** MCP Server (3 tools) + CLI wizard
**Integration:** npm install -g @z_ai/coding-helper
**Key Feature:** Interactive GLM setup wizard
**Benefits:**
- Web search integration
- GitHub repository reading
- Simplified GLM configuration
- One-command setup

### 4. llm-tldr
**Source:** https://github.com/parcadei/llm-tldr
**Type:** MCP Server (18 tools) + CLI
**Integration:** pip install llm-tldr + tldr warm .
**Key Feature:** 95% token reduction via 5-layer analysis
**Benefits:**
- Semantic code search
- Program slicing for debugging
- Impact analysis for refactoring
- LLM-ready code summaries

### 5. claude-codex-settings
**Source:** https://github.com/fcakyon/claude-codex-settings
**Type:** Reference/Patterns (not installed directly)
**Integration:** Inspires MCP configuration patterns
**Benefits:**
- Best practices for MCP setup
- Configuration examples
- Tool integration patterns

### 6. ui-ux-pro-max-skill
**Source:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
**Type:** Reference/Patterns (not installed directly)
**Integration:** Inspires design-focused agents
**Benefits:**
- Professional UI/UX patterns
- Whimsy-injector inspiration
- Design system patterns

---

## 🎯 Real-Life Comparison Matrix

| Task | Without Suite | With Suite | Improvement |
|------|--------------|-----------|-------------|
| **Code Review** | Manual reading, miss context | TLDR 5-layer analysis, 95% token savings | 20x faster |
| **UI Implementation** | Describe in words | Upload screenshot → UI to code | 10x faster |
| **Error Debugging** | Paste text manually | Upload screenshot → Auto-diagnosis | 5x faster |
| **Test Writing** | Write manually | Auto-triggered after code changes | Always tested |
| **Code Search** | Text search (grep) | Semantic search by behavior | Finds by intent |
| **Refactoring** | Risk of breaking changes | Impact analysis, safe refactoring | Zero breaking changes |
| **Learning Codebase** | Read files manually | Context summaries, call graphs | 89% fewer tokens |
| **Research** | Outdated knowledge | Real-time web search | Always current |

---

## 🆚 Master Prompt vs Other Installation Methods

| Method | Time Required | Transparency | Customization | Best For |
|--------|--------------|--------------|---------------|----------|
| **Master Prompt** | 30 min | See all steps | Easy to modify | First-time users, understanding |
| **Automation Script** | 10 min | Automated | Edit scripts | Experienced users, speed |
| **Manual** | 60+ min | Full control | Complete control | Learning, custom needs |

---

**Built for developers who ship.** 🚀