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

### Real-Life Example: Before vs After

**BEFORE (Without agents):**
```
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]
```

**AFTER (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!
```

---

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

### Real-Life Examples: Before vs After

**Example: UI Component Creation**

**BEFORE:**
```
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]
```

**AFTER:**
```
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]
```

**Example: UI Review**

**BEFORE:**
```
You: The dashboard looks messy
Claude: Let me add some spacing...
[Generic fixes, doesn't address root issues]
```

**AFTER:**
```
You: The dashboard looks messy
[ui-ux-pro-max PROACTIVELY triggers]
Claude (as ui-ux-pro-max): Analyzing dashboard for professional issues...
Issues found:
✗ Inconsistent spacing (mixing 4px and 8px grids)
✗ Low contrast text (slate-400 unreadable in light mode)
✗ Missing cursor pointers on cards
✗ No hover feedback on interactive elements
✗ z-index conflicts between components

[Provides specific fixes for each issue]
```

---

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

### Real-Life Examples: Before vs After

**Example 1: Error Diagnosis**

**BEFORE:**
```
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]
```

**AFTER:**
```
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]
```

**Example 2: UI to Code**

**BEFORE:**
```
You: [Describes UI for 10 minutes]
Claude: [Creates approximation]
You: [Several iterations to match design]
```

**AFTER:**
```
You: [Upload design-mockup.png]
You: Implement this UI
Claude: [Using ui_to_artifact tool]
Analyzing design...
- Header: Navigation bar with logo and links
- Hero: Large headline with gradient background
- Cards: 3-column grid with icons
- CTA: Gradient button with hover effect

[Creates exact match with Tailwind CSS]
✓ All spacing matches
✓ Colors extracted from design
✓ Icons identified and included
```

---

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

### Real-Life Examples: Before vs After

**Example 1: Web Research**

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

**AFTER:**
```
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]
```

**Example 2: Repository Analysis**

**BEFORE:**
```
You: Help me understand the Next.js codebase
Claude: [Cannot access external repositories]
You: [Manually paste files one by one]
```

**AFTER:**
```
You: Analyze the Next.js repository structure
Claude: [Using zread tool]
Reading vercel/next.js...
Repository has:
- 4500+ files
- Main packages: next, react, react-dom
- Key directories: packages/next, examples, test
[Provides comprehensive overview without manual file pasting]
```

---

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

### Real-Life Examples: Before vs After

**Example 1: Understanding Large Codebase**

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

**AFTER:**
```
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]
```

**Example 2: Semantic Search**

**BEFORE:**
```
You: Where's the JWT validation code?
Claude: [Searches for "JWT" or "validation"]
Found nothing (it's called "verify_access_token")
```

**AFTER:**
```
You: Find the JWT validation code
Claude: [Using tldr semantic search]
Searching by behavior "validate JWT tokens"...

Found: verify_access_token() in app/auth/middleware.py
This function:
- Validates JWT signature
- Checks expiration
- Extracts user claims
[Finds by behavior, not exact name match]
```

**Example 3: Debugging with Program Slicing**

**BEFORE:**
```
You: Why is user_id null on line 142?
Claude: [Reads entire 150-line function]
Let me analyze... it's hard to see the data flow...
[Ambiguous answer]
```

**AFTER:**
```
You: Why is user_id null on line 142?
Claude: [Using tldr slice]
Showing only lines affecting line 142...

3:   user = db.get_user(username)
7:   if user is None:
12:      return None  # ← BUG: Early return
28:  token = create_token(user)  # ← Skipped due to line 12
42:  session.user_id = user.id   # ← user is None here!

The issue: When user not found (line 7), function returns
None at line 12, skipping token creation. Line 42 assumes
user exists.

[Precise answer with only 6 relevant lines shown]
```

---

## 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.** 🚀