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:

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

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

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

═══════════════════════════════════════════════════════════════════════════════

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: How Agents Coordinate

**Architecture Overview:**

The 38 agents are divided into two types:
- **7 PROACTIVELY Coordinators** - Auto-trigger based on context and coordinate specialists
- **31 Specialist Agents** - Execute specific domain tasks when called

**How It Works:**

There are **two pathways** to use agents:

1. **Automatic** - Coordinators auto-trigger and call specialists as needed
2. **Direct** - You manually invoke any specialist for precise control

This gives you automation when you want it, control when you need it.

---

**7 PROACTIVELY Agents** (meta-coordinators that auto-trigger based on context):

#### Design Department (2)

1. **ui-ux-pro-max** - Triggers on UI/UX design work
   - Professional design patterns and accessibility
   - 50+ styles, 97 color palettes, WCAG compliance
   - Example: "Create a pricing page" → ui-ux-pro-max applies professional design patterns

2. **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

#### Engineering Department (1)

3. **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

#### Project Management Department (3)

4. **experiment-tracker** - Triggers when experiments are started or modified
   - Tracks A/B tests and feature experiments
   - Defines metrics and monitors results
   - Example: You add a feature flag → experiment-tracker sets up tracking and success metrics

5. **studio-producer** - Triggers when coordinating across multiple teams
   - Cross-team coordination and resource allocation
   - Workflow optimization and dependency management
   - Example: "Design and engineering need to collaborate" → studio-producer schedules and coordinates

6. **project-shipper** - Triggers when approaching launch milestones
   - Launch coordination and release management
   - Go-to-market strategy and stakeholder communication
   - Example: "We're releasing next week" → project-shipper plans launch activities

#### Bonus Department (1)

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

---

**🔄 Real Workflow Example:**

You: "I need a viral TikTok app in 2 weeks" ↓ [studio-coach PROACTIVELY triggers] ↓ studio-coach analyzes and coordinates: → rapid-prototyper (specialist) builds MVP → tiktok-strategist (specialist) plans viral features → frontend-developer (specialist) builds UI ↓ [whimsy-injector PROACTIVELY triggers] ↓ whimsy-injector adds delightful touches ↓ [project-shipper PROACTIVELY triggers] ↓ project-shipper plans launch strategy ↓ Result: Complete app, launch-ready ✓

**Key Point:** You don't need to manually orchestrate! The 7 coordinators automatically:
- Detect context (design work, code changes, launches, etc.)
- Call appropriate specialist agents
- Coordinate multi-agent workflows
- Ensure quality and completeness

You can ALSO directly call any specialist agent anytime for manual control.

---

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

---

---

═══════════════════════════════════════════════════════════════════════════════

📖 REAL-LIFE EXAMPLES: HOW AUTO-TRIGGERING WORKS

═══════════════════════════════════════════════════════════════════════════════

⚠️ 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.

Example 1: Adding OAuth Authentication

❌ WITHOUT Auto-Triggering 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]

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

---

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

❌ 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]

✅ 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]

---

Example 3: Error Diagnosis from Screenshots

❌ 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]

✅ 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]

---

Example 4: Understanding Large Codebases

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

✅ 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]

---

Example 5: Web Research for Current Information

❌ WITHOUT Web Search

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

✅ 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]

---

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.

═══════════════════════════════════════════════════════════════════════════════

---

📚 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. 🚀