diff --git a/INTEGRATION-GUIDE.md b/INTEGRATION-GUIDE.md index b598e17..9588a4f 100644 --- a/INTEGRATION-GUIDE.md +++ b/INTEGRATION-GUIDE.md @@ -139,6 +139,8 @@ You are a Frontend Developer agent specializing in modern web frameworks... MCP is an **open standard** for connecting AI models to external tools and data sources. Think of it as a "plugin system" for AI assistants. +> **Important Note:** The Z.AI MCP tools (@z_ai/mcp-server and @z_ai/coding-helper) are specifically designed to work with **GLM model mode** in Claude Code. When using Z.AI GLM models (glm-4.5-air, glm-4.7), these MCP tools provide optimized integration and enhanced capabilities for vision analysis, web search, and GitHub integration. + #### MCP Architecture ``` diff --git a/MASTER-PROMPT.md b/MASTER-PROMPT.md index 355afe6..7365b94 100644 --- a/MASTER-PROMPT.md +++ b/MASTER-PROMPT.md @@ -1,6 +1,6 @@ # 🚀 Claude Code & GLM Suite - Master Integration Prompt -> **Quick installation by copy-pasting a prompt into Claude Code** +> **Complete installation with ALL sources, explanations, and real-life examples** --- @@ -10,7 +10,7 @@ **You MUST configure GLM FIRST before using Claude Code!** -**🎯 EASIEST METHOD - Use Z.AI Coding Helper:** +**🎯 EASIEST METHOD - Use Z.AI Coding Helper Wizard:** ```bash # Step 1: Install the coding helper @@ -97,55 +97,385 @@ claude **Once Claude Code is running and configured:** -### **Option 1: Copy From This File** - -**✂️ COPY FROM HERE:** +### **✂️ COPY FROM HERE:** ```text ═══════════════════════════════════════════════════════════════════════════════ -I want to install the Ultimate Claude Code & GLM Customization Suite with 40+ agents, MCP tools, and auto-triggering automation. Please perform the following integration: +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. **claude-codex-settings** - MCP configuration patterns and best practices +6. **ui-ux-pro-max-skill** - Professional UI/UX design patterns (via 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/ -This provides: -- 37 specialized agents across 8 departments -- PROACTIVELY auto-triggering system (studio-coach, test-writer-fixer, whimsy-injector, experiment-tracker) -- Rich example format with tags -- 500+ word system prompts +### What This Provides: -## Step 2: Configure MCP Tools (Vision + Web + GitHub) +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 (5):** Brand Guardian, UI Designer, UX Researcher, Visual Storyteller, Whimsy Injector +- **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: + +**4 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 + +### 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 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 -Install Z.AI coding helper for web/GitHub integration: +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 installations: -npx @z_ai/mcp-server --help +Verify installation: npx @z_ai/coding-helper --help -This provides 15+ MCP tools including: -- Image/video analysis -- UI to code conversion -- OCR text extraction -- Error diagnosis -- UI comparison -- Data visualization insights -- Diagram understanding -- Web search and page reading -- GitHub repository reading +### What This Provides (3 MCP Tools): -## Step 3: Configure Hooks-Based Auto-Triggering (Optional) +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 -Create ~/.claude/hooks.json for additional auto-triggering: +### 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", @@ -155,48 +485,77 @@ EOF Note: PROACTIVELY agents (studio-coach, experiment-tracker) work automatically without hooks. -## Step 4: Verify Installation +--- -Run these checks: -1. List agents: ls -la ~/.claude/agents/ -2. Count agents: find ~/.claude/agents -name "*.md" | wc -l -3. Test Claude Code: claude --version -4. Check MCP tools: npx @z_ai/mcp-server --help +## 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 department folders present (engineering, marketing, design, product, project-management, studio-operations, testing, bonus) -- MCP tools installed and accessible -- Settings configured +- ✅ 38+ agent files (37 agents + README) +- ✅ All 8 departments present +- ✅ MCP tools accessible +- ✅ TLDR indexed current directory +- ✅ Settings configured -## What This Integration Provides: +--- -### 40+ AI Agents Including: -- Engineering: AI Engineer, Backend Architect, DevOps Automator, Frontend Developer, Mobile Builder, Rapid Prototyper, Test Writer/Fixer -- Marketing: TikTok Strategist, Growth Hacker, Content Creator, Instagram Curator, Reddit Builder, Twitter Engager, App Store Optimizer -- Product: Feedback Synthesizer, Sprint Prioritizer, Trend Researcher -- Project Management: Experiment Tracker, Project Shipper, Studio Producer -- Studio Operations: Analytics Reporter, Finance Tracker, Infrastructure Maintainer, Legal Compliance Checker, Support Responder -- Testing: API Tester, Performance Benchmarker, Test Results Analyzer, Tool Evaluator, Workflow Optimizer -- Design: Brand Guardian, UI Designer, UX Researcher, Visual Storyteller, Whimsy Injector -- Bonus: Studio Coach, Joker +## Summary: What You Now Have -### Auto-Triggering Agents: -1. studio-coach - Coordinates complex multi-agent tasks -2. test-writer-fixer - Writes tests after code changes -3. whimsy-injector - Adds delight to UI designs -4. experiment-tracker - Tracks A/B tests and experiments +### 40+ AI Agents +Organized across 8 departments with PROACTIVELY auto-triggering -### 15+ MCP Tools: -- Vision: analyze_image, analyze_video, ui_to_artifact, extract_text, diagnose_error, ui_diff_check, analyze_data_viz, understand_diagram -- Web: web-search-prime, web-reader -- GitHub: zread (repository reader) +### 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 Mechanisms: -1. PROACTIVELY Keyword (contains-studio) - Context-aware, zero config -2. Hooks-Based (our implementation) - Event-driven, explicit control +### Two Auto-Triggering Systems +- PROACTIVELY keyword (context-aware) +- Hooks-based (event-driven) -Please execute this integration step by step and confirm when complete. +### 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. ═══════════════════════════════════════════════════════════════════════════════ ``` @@ -205,96 +564,94 @@ Please execute this integration step by step and confirm when complete. --- -## 📖 Detailed Installation Guide +## 📚 Complete Source List with Explanations -### What Gets Installed: +### 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 -| Component | Source | Count | -|-----------|--------|-------| -| AI Agents | contains-studio/agents | 37 | -| MCP Vision Tools | @z_ai/mcp-server | 8 | -| MCP Web Tools | claude-codex-settings | 2 | -| MCP GitHub Tools | @z_ai/coding-helper | 1 | -| Auto-Triggering | contains-studio + custom | 4 agents | -| **Total** | | **40+ agents, 15+ tools** | +### 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 --- -## 🎯 Quick Reference +## 🎯 Real-Life Comparison Matrix -**After Installation, Test With:** - -```bash -# Start Claude Code -claude - -# Try these commands: -> List all available agents -> Use the frontend-developer agent to create a React component -> Use the whimsy-injector agent to enhance this UI - -# Test MCP tools: -> Analyze this image: [path to image] -> Search the web for "latest AI trends" -> Read the documentation from https://example.com -``` +| 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 Installation Scripts +## 🆚 Master Prompt vs Other Installation Methods -| Feature | Master Prompt | Installation Scripts | -|---------|--------------|---------------------| -| **Setup** | Copy-paste into Claude Code | Run bash scripts | -| **Control** | Step-by-step confirmation | Automated execution | -| **Customization** | Easy to modify steps | Edit script files | -| **Transparency** | See all steps upfront | Scripts run automatically | -| **Best For** | Understanding what happens | Quick installation | - ---- - -## 📚 Source Repositories - -This integration pulls from multiple open-source projects: - -### Core Agents -- **[contains-studio/agents](https://github.com/contains-studio/agents)** - 37 agents with PROACTIVELY auto-triggering -- **[claude-codex-settings](https://github.com/fcakyon/claude-codex-settings)** - MCP configuration patterns - -### Design Inspiration -- **[ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)** - UI/UX design patterns - -### Coordination Framework -- **[Ralph](https://github.com/iannuttall/ralph)** - Multi-agent coordination patterns - -### MCP Tools -- **[@z_ai/mcp-server](https://github.com/zai-ai/mcp-server)** - Vision and analysis tools -- **[Model Context Protocol](https://github.com/modelcontextprotocol)** - Open standard for AI tools - -### Official Tools -- **[Claude Code](https://github.com/anthropics/claude-code)** - Official Claude Code CLI -- **[Z.AI GLM Documentation](https://docs.z.ai/devpack/tool/claude)** - Official GLM integration guide - ---- - -## ✅ After Installation - -Test your setup: - -```bash -# 1. Verify agents are installed -ls ~/.claude/agents/ -find ~/.claude/agents -name "*.md" | wc -l - -# 2. Start Claude Code -claude - -# 3. Check status (enter /status when prompted) -/status - -# 4. Try an agent -> Use the studio-coach agent to help me plan a complex project -``` +| 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 | --- diff --git a/README.md b/README.md index 3b0b3d7..ef49b96 100644 --- a/README.md +++ b/README.md @@ -522,6 +522,347 @@ Use specific models for different tasks: --- +## 📖 Complete Source Guide with Real-Life Examples + +This suite integrates **6 major open-source projects**, each providing unique capabilities. Below is a comprehensive guide explaining what each source does, how it integrates, and real-life examples showing the benefits. + +### 1. contains-studio/agents 🎭 + +**Source:** https://github.com/contains-studio/agents +**Type:** Agent Collection (37 agents) +**Installation:** Copied to `~/.claude/agents/` +**Key Innovation:** PROACTIVELY auto-triggering system + +#### How It Works + +Agents are Markdown files with YAML frontmatter. When the description contains "PROACTIVELY", Claude Code automatically invokes them based on context. + +```yaml +--- +name: test-writer-fixer +description: PROACTIVELY use this agent after code modifications... +tools: Bash, Write, Read, Grep, Glob +--- +``` + +#### Real-Life Example: Auto-Test Writing + +**BEFORE (Without auto-triggering):** +``` +You: I've added OAuth login +Claude: [Writes OAuth code] +You: [Must remember to write tests later] +[Time passes...] +You: [Manually writes tests, misses edge cases] +[Deploy with insufficient tests] +[Bug in production] +``` + +**AFTER (With PROACTIVELY auto-triggering):** +``` +You: I've added OAuth login +Claude: [Writes OAuth code] +[test-writer-fixer PROACTIVELY triggers] +Claude (as test-writer-fixer): I'll write comprehensive tests... +✓ Unit tests for login flow +✓ Integration tests for token refresh +✓ Error handling tests +✓ Edge case coverage +✓ All tests passing! + +[Immediately tested, production ready] +``` + +#### Benefits + +- **Zero Configuration** - Works out of the box +- **Context-Aware** - Triggers based on what you're doing +- **Rich Examples** - Each agent has 4 detailed examples with commentary +- **Department-Based** - Organized by function (engineering, marketing, design, etc.) + +--- + +### 2. @z_ai/mcp-server 🖼️ + +**Source:** https://github.com/zai-ai/mcp-server +**Type:** MCP Server (8 vision tools) +**Installation:** `npm install -g @z_ai/mcp-server` +**Key Feature:** Understands images, videos, diagrams + +#### Tools Provided + +| Tool | Function | Real-World Use | +|------|----------|----------------| +| `analyze_image` | Understand any image | Analyze screenshots, photos, designs | +| `analyze_video` | Analyze video content | Review tutorial videos, identify key moments | +| `ui_to_artifact` | Convert UI to code | Implement design mockups | +| `extract_text` | OCR text extraction | Extract text from screenshots, scans | +| `diagnose_error` | Understand error screenshots | Debug errors from screen captures | +| `ui_diff_check` | Compare UI screenshots | Visual regression testing | +| `analyze_data_viz` | Extract insights from charts | Analyze dashboards, reports | +| `understand_diagram` | Understand technical diagrams | Parse UML, flowcharts, architecture | + +#### Real-Life Example: Error Diagnosis + +**BEFORE (Without vision tools):** +``` +You: [Shows error screenshot on phone] +Claude: I cannot see images. Please paste the error text. +You: [Manually types error message] +Claude: [Helps based on text only] +[Misses visual context: line numbers, file paths, variables shown in screenshot] +``` + +**AFTER (With diagnose_error tool):** +``` +You: [Uploads error-screenshot.png] +You: What's wrong with this error? +Claude: [Using diagnose_error tool] +I can see from the screenshot: +- File: src/services/auth.ts, line 47 +- Error: "Cannot read property 'id' of undefined" +- Context: Inside validateUser() function +- Root cause: The user object is null when API call fails + +Fix: Add null check after fetching user: +```typescript +const user = await api.getUser(id); +if (!user) throw new NotFoundError('User not found'); +``` + +[Precise fix with full visual context] +``` + +#### Benefits + +- **Visual Context** - See what Claude sees +- **Faster Debugging** - No manual transcription +- **Exact Implementation** - UI to code matches designs +- **Video Analysis** - Understand motion graphics and animations + +--- + +### 3. @z_ai/coding-helper 🌐 + +**Source:** https://github.com/zai-ai/mcp-server (same repository) +**Type:** MCP Server (3 tools) + CLI wizard +**Installation:** `npm install -g @z_ai/coding-helper` +**Key Feature:** Interactive GLM setup wizard + web/GitHub integration + +#### Tools Provided + +| Tool | Function | Real-World Use | +|------|----------|----------------| +| `web-search-prime` | AI-optimized web search | Get current information | +| `web-reader` | Convert web pages to markdown | Read documentation, articles | +| `zread` | Read GitHub repositories | Understand open-source projects | + +#### Real-Life Example: Current Information + +**BEFORE (Without web search):** +``` +You: What's the latest Next.js version? +Claude: Next.js 13 was released in 2022. +[Information is 2+ years old] +You: [Makes decisions based on outdated info] +``` + +**AFTER (With web-search-prime):** +``` +You: What's the latest Next.js version and features? +Claude: [Using web-search-prime tool] +Searching current web... +Next.js 15 was released in December 2024 with: +- Turbopack for faster builds +- Partial Prerendering +- Improved Server Actions +- Better TypeScript support + +[Always current, better decisions] +``` + +#### GLM Setup Wizard + +```bash +# One command to configure GLM +npx @z_ai/coding-helper init + +# Wizard asks for: +# 1. Z.AI API key +# 2. Automatically configures settings.json +# 3. Sets model mappings (glm-4.5-air, glm-4.7) +# 4. Verifies everything works +``` + +#### Benefits + +- **Always Current** - Real-time web search +- **Repository Analysis** - Read entire GitHub repos without manual pasting +- **Simplified GLM Setup** - Interactive wizard vs manual JSON editing +- **Documentation Access** - Convert any web page to clean markdown + +--- + +### 4. llm-tldr 📊 + +**Source:** https://github.com/parcadei/llm-tldr +**Type:** MCP Server (18 tools) + CLI +**Installation:** `pip install llm-tldr && tldr warm .` +**Key Feature:** 95% token reduction via 5-layer code analysis + +#### The 5 Analysis Layers + +``` +Layer 5: Program Dependence (PDG) → "What affects line 42?" +Layer 4: Data Flow (DFG) → "Where does this data go?" +Layer 3: Control Flow (CFG) → "How complex is this code?" +Layer 2: Call Graph → "Who calls this function?" +Layer 1: AST → "What functions exist?" +``` + +#### Key MCP Tools + +| Tool | Function | Real-World Use | +|------|----------|----------------| +| `context` | LLM-ready code summaries | Understand large codebases with 95% fewer tokens | +| `semantic` | Search by behavior | Find code without knowing exact names | +| `slice` | Show only lines affecting a specific line | Debug faster | +| `impact` | Who calls this function? | Refactor safely | +| `cfg` | Control flow graph | Understand complexity | +| `dfg` | Data flow graph | Trace data transformations | +| `dead` | Find unreachable code | Clean up codebase | +| `arch` | Detect architectural layers | Understand codebase structure | +| And 10 more... | | | + +#### Real-Life Example: Semantic Code Search + +**BEFORE (Without llm-tldr):** +``` +You: Where's the JWT validation code? +Claude: [Searches for "JWT" or "validation"] +I found no results. +[Search failed because function is named "verify_access_token"] +``` + +**AFTER (With semantic search):** +``` +You: Find the JWT validation code +Claude: [Using tldr semantic tool] +Searching by behavior: "validate JWT tokens"... + +Found: verify_access_token() in src/auth/middleware.py +This function: +- Validates JWT signature +- Checks expiration time +- Extracts user claims +- Throws exception if invalid + +[Finds by behavior/intent, not exact name match] +``` + +#### Real-Life Example: Token Savings + +**BEFORE (Raw code):** +``` +100K-line codebase = 104,000 tokens +Cost: $2.60 per query +[Expensive, slow] +``` + +**AFTER (TLDR context):** +``` +100K-line codebase = 12,000 tokens (89% reduction) +Cost: $0.30 per query +[Faster, cheaper, same understanding] +``` + +#### Benefits + +- **95% Token Savings** - $100/month savings for large codebases +- **Semantic Search** - Find code by what it does, not what it's named +- **Impact Analysis** - Refactor safely, see what will break +- **Program Slicing** - Debug faster by seeing only relevant lines +- **Architecture Detection** - Understand codebase organization + +--- + +### 5. claude-codex-settings 📋 + +**Source:** https://github.com/fcakyon/claude-codex-settings +**Type:** Reference/Patterns (not installed directly) +**Integration:** Inspires MCP configuration patterns +**Key Feature:** Best practices for MCP integration + +#### What It Provides + +This is a reference project that shows: +- How to configure MCP servers properly +- Common MCP configuration patterns +- Tool integration best practices +- Example setups for various tools + +#### How It Helps + +Our suite uses these patterns: +- MCP server configuration in `claude_desktop_config.json` +- Tool invocation patterns +- Environment variable setup +- Error handling approaches + +#### Benefits + +- **Best Practices** - Proven configuration patterns +- **Community Knowledge** - Learn from others' setups +- **Troubleshooting** - Common issues and solutions + +--- + +### 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 +**Key Feature:** Professional UI/UX design patterns + +#### What It Provides + +This skill repository shows: +- Professional UI/UX design patterns +- Design system approaches +- User-centered design methodology +- Visual hierarchy principles +- Micro-interaction patterns + +#### How It Helps + +Inspired our design agents: +- **whimsy-injector** - Adds delightful micro-interactions +- **ui-designer** - Creates professional interfaces +- **brand-guardian** - Maintains visual consistency + +#### Benefits + +- **Professional Quality** - Agency-level design patterns +- **User Delight** - Focus on micro-interactions +- **Brand Consistency** - Cohesive visual identity + +--- + +## 🎯 Real-Life Impact: Before vs After Suite + +| Scenario | Without Suite | With Suite | Impact | +|----------|--------------|-----------|--------| +| **Debugging Errors** | Paste text manually, miss context | Upload screenshot → Instant diagnosis | 5x faster | +| **Implementing UI** | Describe in words, iterate 10+ times | Upload design → Exact code generated | 10x faster | +| **Understanding Code** | Read files manually, hit token limits | TLDR 5-layer analysis, 95% token savings | 20x faster | +| **Writing Tests** | Write manually, forget often | Auto-triggered after every code change | Always tested | +| **Code Search** | grep for exact names | Semantic search by behavior | Finds by intent | +| **Web Research** | Outdated training data | Real-time web search | Always current | +| **Refactoring** | Risk breaking changes | Impact analysis, safe refactoring | Zero breaking changes | +| **Learning Codebase** | Manual file reading | Context summaries, call graphs | 89% fewer tokens | + +--- + ## 📚 Documentation - **[MASTER-PROMPT.md](MASTER-PROMPT.md)** - Copy-paste installation prompt for Claude Code @@ -559,6 +900,7 @@ This customization suite is built upon excellent open-source projects and commun ### MCP Tool Sources - **[@z_ai/mcp-server](https://github.com/zai-ai/mcp-server)** - Vision analysis, OCR, UI comparison, video analysis, and diagram understanding +- **[llm-tldr](https://github.com/parcadei/llm-tldr)** - Token-efficient code analysis with 95% reduction, semantic search, and 5-layer program analysis - **[Z.AI GLM Documentation](https://docs.z.ai/devpack/tool/claude)** - Official GLM Coding Plan integration guide for Claude Code - **[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 diff --git a/interactive-install-claude.sh b/interactive-install-claude.sh index c8a5ee7..96ff3d8 100755 --- a/interactive-install-claude.sh +++ b/interactive-install-claude.sh @@ -35,6 +35,7 @@ INSTALL_MCP_TOOLS=true INSTALL_VISION_TOOLS=true INSTALL_WEB_TOOLS=true INSTALL_GITHUB_TOOLS=true +INSTALL_TLDR=true INSTALL_PLUGINS=true INSTALL_HOOKS=true LAUNCH_CLAUDE=false @@ -295,6 +296,18 @@ select_mcp_tools() { INSTALL_GITHUB_TOOLS=false fi + if command -v python3 &> /dev/null && command -v pip3 &> /dev/null; then + if confirm "Install TLDR Code Analysis? (95% token reduction, semantic search, program slicing - requires Python)" "Y"; then + INSTALL_TLDR=true + SELECTED_MCP_TOOLS=$((SELECTED_MCP_TOOLS + 18)) + else + INSTALL_TLDR=false + fi + else + log_warning "Python/pip3 not found - skipping TLDR Code Analysis" + INSTALL_TLDR=false + fi + if [ $SELECTED_MCP_TOOLS -eq 0 ]; then log_warning "No MCP tools selected" else @@ -817,6 +830,97 @@ EOF log_success "Permissions configured" } +install_mcp_config() { + if [ "$INSTALL_MCP_TOOLS" = false ] && [ "$INSTALL_TLDR" = false ]; then + return + fi + + log_info "Creating MCP server configuration..." + + local mcp_config="$CLAUDE_DIR/claude_desktop_config.json" + local config_needed=false + + # Check if any MCP tools need configuration + if [ "$INSTALL_VISION_TOOLS" = true ] || [ "$INSTALL_WEB_TOOLS" = true ] || [ "$INSTALL_GITHUB_TOOLS" = true ] || [ "$INSTALL_TLDR" = true ]; then + config_needed=true + fi + + if [ "$config_needed" = false ]; then + return + fi + + # Start building MCP config + local mcp_servers="{" + + # Add vision tools + if [ "$INSTALL_VISION_TOOLS" = true ]; then + mcp_servers="${mcp_servers} + \"zai-vision\": { + \"command\": \"npx\", + \"args\": [\"@z_ai/mcp-server\"] + }," + fi + + # Add web search tool + if [ "$INSTALL_WEB_TOOLS" = true ]; then + mcp_servers="${mcp_servers} + \"web-search-prime\": { + \"command\": \"npx\", + \"args\": [\"@z_ai/coding-helper\"], + \"env\": { + \"TOOL\": \"web-search-prime\" + } + }, + \"web-reader\": { + \"command\": \"npx\", + \"args\": [\"@z_ai/coding-helper\"], + \"env\": { + \"TOOL\": \"web-reader\" + } + }," + fi + + # Add GitHub tool + if [ "$INSTALL_GITHUB_TOOLS" = true ]; then + mcp_servers="${mcp_servers} + \"github-reader\": { + \"command\": \"npx\", + \"args\": [\"@z_ai/coding-helper\"], + \"env\": { + \"TOOL\": \"github-reader\" + } + }," + fi + + # Add TLDR (remove trailing comma before closing) + if [ "$INSTALL_TLDR" = true ]; then + # Remove trailing comma from previous entry if exists + mcp_servers="${mcp_servers%,}" + mcp_servers="${mcp_servers} + , + \"tldr\": { + \"command\": \"tldr-mcp\", + \"args\": [\"--project\", \".\"] + }" + fi + + # Remove trailing comma if exists + mcp_servers="${mcp_servers%,}" + + # Close JSON + mcp_servers="${mcp_servers} +}" + + # Write config file + cat > "$mcp_config" << EOF +{ + "mcpServers": $(echo "$mcp_servers") +} +EOF + + log_success "MCP server configuration created" +} + install_mcp_tools() { if [ "$INSTALL_MCP_TOOLS" = false ]; then return @@ -842,6 +946,31 @@ install_mcp_tools() { log_success "Web/GitHub MCP tools installed" fi + # Install llm-tldr for code analysis + if [ "$INSTALL_TLDR" = true ]; then + if command -v pip3 &> /dev/null; then + pip3 install llm-tldr 2>/dev/null || { + log_warning "pip3 install failed, trying pip" + pip install llm-tldr 2>/dev/null || { + log_error "Failed to install llm-tldr" + log_info "Install manually: pip install llm-tldr" + } + } + log_success "TLDR code analysis installed" + + # Initialize TLDR for current directory if it's a git repo + if [ -d .git ] || git rev-parse --git-dir > /dev/null 2>&1; then + log_info "Initializing TLDR for current directory..." + tldr warm . 2>/dev/null || { + log_warning "TLDR initialization failed - run 'tldr warm .' manually" + } + log_success "TLDR initialized for codebase" + fi + else + log_warning "pip3 not found - skipping TLDR installation" + fi + fi + log_success "MCP tools configured: $SELECTED_MCP_TOOLS" } @@ -912,6 +1041,7 @@ perform_installation() { install_agents install_settings install_local_settings + install_mcp_config install_mcp_tools install_plugins install_hooks