Add ui-ux-pro-max agent with PROACTIVELY auto-triggering

- Install ui-ux-pro-max as agent (~/.claude/agents/design/ui-ux-pro-max.md) - Install ui-ux-pro-max as SKILL (~/.claude/skills/ui-ux-pro-max/SKILL.md) - Add 5th PROACTIVELY agent for professional UI/UX design - Update MASTER-PROMPT.md with Step 1.5 for ui-ux-pro-max installation - Update README.md with ui-ux-pro-max integration details - Update blog post with ui-ux-pro-max as installed agent - Clarify Ralph is CLI tool (patterns integrated, not agents) Now includes 38 agents with 5 PROACTIVELY auto-triggering: 1. studio-coach (complex multi-agent tasks) 2. test-writer-fixer (after code modifications) 3. whimsy-injector (after UI/UX changes) 4. experiment-tracker (feature flags/experiments) 5. ui-ux-pro-max (UI/UX design work) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-15 15:38:23 +00:00
parent 10c3312a3f
commit ec7c975540
3 changed files with 400 additions and 26 deletions
--- a/MASTER-PROMPT.md
+++ b/MASTER-PROMPT.md
@@ -112,8 +112,9 @@ This suite includes 6 major components from open-source projects:
 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)
+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.

@@ -134,7 +135,7 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/
 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
+- **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
@@ -143,7 +144,7 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/

 ### Auto-Triggering System:

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

 1. **studio-coach** - Triggers on complex multi-agent tasks
   - Coordinates multiple specialists
@@ -165,6 +166,11 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/
   - 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):**
@@ -197,6 +203,90 @@ 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