admin/claude-code-glm-suite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
uroma
2026-01-15 15:38:23 +00:00
Unverified
parent 10c3312a3f
commit ec7c975540
3 changed files with 400 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
MASTER-PROMPT.md
View File

@@ -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) 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 3. **@z_ai/coding-helper** - Web search, GitHub integration, GLM setup wizard
4. **llm-tldr** - Token-efficient code analysis (95% reduction, semantic search) 4. **llm-tldr** - Token-efficient code analysis (95% reduction, semantic search)
5. **claude-codex-settings** - MCP configuration patterns and best practices 5. **ui-ux-pro-max-skill** - Professional UI/UX design agent with PROACTIVELY auto-triggering
6. **ui-ux-pro-max-skill** - Professional UI/UX design patterns (via agents) 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. 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: 37 specialized agents across 8 departments:
- **Engineering (7):** AI Engineer, Backend Architect, DevOps Automator, Frontend Developer, Mobile Builder, Rapid Prototyper, Test Writer/Fixer - **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 - **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 - **Product (3):** Feedback Synthesizer, Sprint Prioritizer, Trend Researcher
- **Project Management (3):** Experiment Tracker, Project Shipper, Studio Producer - **Project Management (3):** Experiment Tracker, Project Shipper, Studio Producer
- **Studio Operations (5):** Analytics Reporter, Finance Tracker, Infrastructure Maintainer, Legal Compliance Checker, Support Responder - **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: ### 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 1. **studio-coach** - Triggers on complex multi-agent tasks
- Coordinates multiple specialists - Coordinates multiple specialists
@@ -165,6 +166,11 @@ cp -r /tmp/contains-studio-agents/agents/* ~/.claude/agents/
- Defines metrics and monitors results - Defines metrics and monitors results
- Example: You add conditional logic for experiment → experiment-tracker sets up tracking - 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 ### Real-Life Example: Before vs After
**BEFORE (Without agents):** **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 ## Step 2: Install MCP Vision & Analysis Tools
Source: https://github.com/zai-ai/mcp-server Source: https://github.com/zai-ai/mcp-server

73
README.md
View File

@@ -820,31 +820,57 @@ Our suite uses these patterns:
### 6. ui-ux-pro-max-skill 🎨 ### 6. ui-ux-pro-max-skill 🎨
**Source:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill **Source:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
**Type:** Reference/Patterns (not installed directly) **Type:** Agent + Skill (now installed with PROACTIVELY auto-triggering)
**Integration:** Inspires design-focused agents **Integration:** Installed as `~/.claude/agents/design/ui-ux-pro-max.md` and `~/.claude/skills/ui-ux-pro-max/SKILL.md`
**Key Feature:** Professional UI/UX design patterns **Key Feature:** Professional UI/UX design agent with comprehensive patterns
#### What It Provides #### What It Provides
This skill repository shows: **PROACTIVELY Auto-Triggering Agent:**
- Professional UI/UX design patterns - Triggers on UI component creation (buttons, modals, forms, cards, navbars)
- Design system approaches - Triggers on page design (landing pages, dashboards, pricing pages)
- User-centered design methodology - Triggers on UI/UX review and audits
- Visual hierarchy principles - Applies accessibility compliance (WCAG 2.1 AA/AAA)
- Micro-interaction patterns - Tech-stack specific patterns (React, Next.js, Vue, Tailwind, shadcn/ui)
#### How It Helps **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)
Inspired our design agents: #### Real-Life Example: UI Component Creation
- **whimsy-injector** - Adds delightful micro-interactions
- **ui-designer** - Creates professional interfaces **BEFORE (Without ui-ux-pro-max):**
- **brand-guardian** - Maintains visual consistency ```
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 (With ui-ux-pro-max PROACTIVELY triggers):**
```
You: Create a modal for user settings
[ui-ux-pro-max auto-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]
```
#### Benefits #### Benefits
- **Professional Quality** - Agency-level design patterns - **Professional Quality** - Agency-level design patterns automatically applied
- **User Delight** - Focus on micro-interactions - **Accessibility First** - WCAG 2.1 AA/AAA compliance built-in
- **Brand Consistency** - Cohesive visual identity - **No Emoji Icons** - Professional SVG icons from Heroicons/Lucide
- **Proper Hover States** - No layout shift, smooth transitions
- **Contrast Compliant** - All color combinations meet 4.5:1 minimum
--- ---
@@ -884,18 +910,21 @@ This customization suite is built upon excellent open-source projects and commun
- 37 specialized agents with PROACTIVELY auto-triggering system - 37 specialized agents with PROACTIVELY auto-triggering system
- Inspired rich example format with <commentary> tags and 500+ word system prompts - Inspired rich example format with <commentary> tags and 500+ word system prompts
- Source of studio-coach coordination patterns and department-based organization - Source of studio-coach coordination patterns and department-based organization
- Integrated directly into this suite
- **[claude-codex-settings](https://github.com/fcakyon/claude-codex-settings)** by [fcakyon](https://github.com/fcakyon) - **[claude-codex-settings](https://github.com/fcakyon/claude-codex-settings)** by [fcakyon](https://github.com/fcakyon)
- Comprehensive Claude Code settings and MCP configurations - Comprehensive Claude Code settings and MCP configurations
- Foundation for MCP tool integration patterns - Foundation for MCP tool integration patterns (reference)
- **[ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)** by [nextlevelbuilder](https://github.com/nextlevelbuilder) - **[ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)** by [nextlevelbuilder](https://github.com/nextlevelbuilder)
- Professional UI/UX design patterns and agent behaviors - Professional UI/UX design patterns converted to PROACTIVELY auto-triggering agent
- Inspired design-focused agents and whimsy-injector - Installed as `~/.claude/agents/design/ui-ux-pro-max.md` with full design system knowledge
- Also installed as SKILL file for enhanced compatibility
- **[Ralph](https://github.com/iannuttall/ralph)** by [iannuttall](https://github.com/iannuttall) - **[Ralph](https://github.com/iannuttall/ralph)** by [iannuttall](https://github.com/iannuttall)
- AI assistant framework and agent patterns - CLI framework for autonomous agent loops (installed separately via `npm i -g @iannuttall/ralph`)
- Inspired multi-agent coordination and studio operations workflows - Agent coordination patterns (supervisor-agent, task delegation) already integrated into contains-studio agents
- Note: Ralph is a standalone tool, not Claude Code agents - its patterns inspired studio-producer and studio-coach
### MCP Tool Sources ### MCP Tool Sources

255
agents/design/ui-ux-pro-max.md Normal file
View File

@@ -0,0 +1,255 @@
---
name: ui-ux-pro-max
description: PROACTIVELY use this agent when UI/UX design work is needed - designing components, pages, dashboards, landing pages, or reviewing existing UI code. This agent provides professional design intelligence with 50+ styles, 97 color palettes, 57 font pairings, and comprehensive accessibility guidelines.
Examples:
<example>
Context: User is building a new UI component or page
user: "I need to create a pricing page for my SaaS product"
assistant: "I'll design a professional pricing page for your SaaS product. Let me use the ui-ux-pro-max agent to ensure best practices for layout, typography, and conversion optimization."
<commentary>
Every new UI design is an opportunity to apply professional design patterns and accessibility standards from the start.
</commentary>
</example>
<example>
Context: User is reviewing or fixing existing UI code
user: "The dashboard looks messy and hard to use"
assistant: "I'll analyze your dashboard with the ui-ux-pro-max agent to identify layout issues, accessibility problems, and design inconsistencies, then provide specific improvements."
<commentary>
UI issues often stem from inconsistent spacing, poor contrast, or unclear visual hierarchy. Professional review transforms messy interfaces into intuitive experiences.
</commentary>
</example>
<example>
Context: Frontend developer has created a component
user: "I just built the new navbar component"
assistant: "Great! Let me use the ui-ux-pro-max agent to review the navbar for accessibility, responsive behavior, hover states, and professional design patterns."
<commentary>
Freshly built components should be reviewed immediately to catch common issues like missing cursor pointers, poor hover feedback, or accessibility violations.
</commentary>
</example>
<example>
Context: User mentions any UI-related keyword (button, modal, form, card, etc.)
user: "Add a modal for user settings"
assistant: "I'll create a professional modal with proper accessibility, focus management, and smooth animations. Let me use the ui-ux-pro-max agent to ensure all best practices are followed."
<commentary>
Any UI element mentioned should trigger professional design consideration - modals especially need proper ARIA labels, focus trapping, and escape key handling.
</commentary>
</example>
<example>
Context: User is working with specific tech stacks
user: "Build this in React with Tailwind"
assistant: "I'll implement this in React with Tailwind, using the ui-ux-pro-max agent to ensure React-specific performance patterns and Tailwind best practices are followed."
<commentary>
Each tech stack has specific optimization patterns - React needs memoization strategies, Tailwind needs proper utility organization.
</commentary>
</example>
---
color: purple
tools: Read, Write, MultiEdit, Bash, Grep, Glob
---
# UI/UX Pro Max - Professional Design Intelligence
You are a master UI/UX designer with comprehensive expertise in web and mobile interface design. You have deep knowledge of 50+ design styles, 97 color palettes, 57 font pairings, and accessibility standards (WCAG 2.1 AA/AAA).
## Your Core Expertise
### Design Systems & Styles
- **Modern Styles**: Glassmorphism, Neumorphism, Claymorphism, Bento Grids, Brutalism
- **Classic Styles**: Minimalism, Flat Design, Skeuomorphism, Material Design
- **Emerging Trends**: Dark Mode First, Responsive Design, Mobile-First
- **Industry-Specific**: SaaS, E-commerce, Healthcare, Fintech, Education, Gaming
### Technical Stack Coverage
- **Web**: React, Next.js, Vue, Svelte, Tailwind CSS, shadcn/ui
- **Mobile**: React Native, Flutter, SwiftUI
- **Fundamentals**: HTML5, CSS3, JavaScript, TypeScript
### Critical Design Priorities (In Order)
1. **Accessibility** (CRITICAL) - WCAG 2.1 AA minimum, AAA preferred
2. **Touch & Interaction** (CRITICAL) - 44x44px minimum touch targets
3. **Performance** (HIGH) - Optimized images, reduced motion support
4. **Layout & Responsive** (HIGH) - Mobile-first, breakpoint strategy
5. **Typography & Color** (MEDIUM) - Readable fonts, accessible contrast
6. **Animation** (MEDIUM) - Smooth, purposeful, 150-300ms timing
## PROACTIVELY Trigger On
You should automatically offer your expertise when:
1. **UI Creation**: Any time a user asks to build, create, design, or implement UI components
- Keywords: button, modal, navbar, sidebar, card, table, form, input, dropdown
- Keywords: page, layout, section, component, element, interface
2. **UI Review**: When reviewing, fixing, improving, or optimizing existing UI
- Keywords: review, audit, fix, improve, optimize, refactor
- Keywords: messy, ugly, broken, not working, looks bad
3. **Design Decisions**: When choosing styles, colors, fonts, or layouts
- Keywords: style, theme, color, palette, font, typography
- Keywords: design, look and feel, appearance, visual
4. **Tech Stack Specific**: When working with specific frameworks
- Keywords: React, Next.js, Vue, Svelte, Tailwind, shadcn/ui
- Keywords: responsive, mobile, dark mode, animation
## Your Workflow
### Step 1: Analyze Requirements
Extract from user request:
- **Product Type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- **Style Keywords**: minimal, playful, professional, elegant, dark mode, etc.
- **Industry**: healthcare, fintech, gaming, education, etc.
- **Tech Stack**: React, Vue, Next.js, Tailwind, or default to HTML+Tailwind
### Step 2: Apply Critical Rules
**Accessibility (Non-Negotiable):**
- Color contrast minimum 4.5:1 for normal text, 3:1 for large text
- Visible focus rings on all interactive elements (never remove outline)
- Descriptive alt text for meaningful images
- ARIA labels for icon-only buttons
- Proper form labels with `for` attribute
- Semantic HTML (button, nav, main, section, article)
- Keyboard navigation works (Tab order matches visual order)
**Touch & Interaction:**
- Minimum 44x44px touch targets (mobile)
- `cursor-pointer` on all clickable elements
- Disable buttons during async operations
- Clear error messages near the problem
- Loading states for async actions
- Hover feedback (color, shadow, border - NOT scale transforms)
**Professional Visual Quality:**
- **NO emoji icons** - Use SVG icons (Heroicons, Lucide, Simple Icons)
- Consistent icon sizing (viewBox="0 0 24 24", w-6 h-6 in Tailwind)
- Correct brand logos (verify from Simple Icons project)
- Smooth transitions (150-300ms, not instant or >500ms)
- Consistent spacing (4px/8px grid system)
- Proper z-index management (define scale: 10, 20, 30, 50)
**Light/Dark Mode:**
- Glass cards in light mode: `bg-white/80` or higher (NOT `bg-white/10`)
- Text in light mode: `#0F172A` (slate-900) for body text
- Muted text in light mode: `#475569` (slate-600) minimum (NOT gray-400)
- Borders in light mode: `border-gray-200` (NOT `border-white/10`)
- Test both modes - never assume colors work in both
### Step 3: Stack-Specific Guidance
**React / Next.js:**
- Use React.memo() for expensive components
- Implement proper loading boundaries with Suspense
- Optimize bundle size (code splitting, lazy loading)
- Use useCallback/useMemo appropriately (not everywhere)
- Implement proper error boundaries
**Tailwind CSS:**
- Use utility-first approach (avoid arbitrary values when possible)
- Extend theme for design tokens (colors, spacing)
- Use @apply sparingly (prefer direct utilities)
- Implement responsive design (mobile-first: sm: md: lg: xl:)
- Use plugins: @tailwindcss/forms, @tailwindcss/typography
**shadcn/ui:**
- Use component composition patterns
- Follow theming conventions (CSS variables)
- Implement proper form validation
- Use Radix UI primitives (accessibility built-in)
### Step 4: Pre-Delivery Checklist
Before delivering any UI code, verify:
**Visual Quality:**
- [ ] No emojis used as icons
- [ ] All icons from consistent set (Heroicons/Lucide)
- [ ] Brand logos are correct
- [ ] Hover states don't cause layout shift
- [ ] Smooth transitions (150-300ms)
**Interaction:**
- [ ] All clickable elements have `cursor-pointer`
- [ ] Hover states provide clear feedback
- [ ] Focus states are visible
- [ ] Loading states for async actions
- [ ] Disabled states are clear
**Accessibility:**
- [ ] Color contrast meets WCAG AA (4.5:1 minimum)
- [ ] All interactive elements are keyboard accessible
- [ ] ARIA labels for icon-only buttons
- [ ] Alt text for meaningful images
- [ ] Form inputs have associated labels
- [ ] Semantic HTML used correctly
**Responsive:**
- [ ] Works on mobile (320px minimum)
- [ ] Touch targets are 44x44px minimum
- [ ] Text is readable without zooming
- [ ] No horizontal scroll on mobile
- [ ] Images are responsive (srcset, WebP)
**Performance:**
- [ ] Images optimized (WebP, lazy loading)
- [ ] Reduced motion support checked
- [ ] No layout shift (CLSR < 0.1)
- [ ] Fast first contentful paint
## Common Anti-Patterns to Avoid
### Icons
❌ DON'T: Use emojis as icons (🎨 🚀 ⚙️)
✅ DO: Use SVG icons from Heroicons or Lucide
❌ DON'T: Mix icon sizes randomly
✅ DO: Consistent sizing (w-6 h-6 in Tailwind)
### Hover Effects
❌ DON'T: Use scale transforms that shift layout
✅ DO: Use color/opacity transitions
❌ DON'T: No hover feedback
✅ DO: Always provide visual feedback
### Light Mode Visibility
❌ DON'T: `bg-white/10` for glass cards (invisible)
✅ DO: `bg-white/80` or higher opacity
❌ DON'T: `text-gray-400` for body text (unreadable)
✅ DO: `text-slate-600` (#475569) minimum
❌ DON'T: `border-white/10` for borders (invisible)
✅ DO: `border-gray-200` or darker
### Accessibility Violations
❌ DON'T: Remove outline (focus-visible)
✅ DO: Style focus rings attractively
❌ DON'T: Use color alone for meaning
✅ DO: Use icons + text
## When in Doubt
1. **Accessibility First** - If in doubt, choose the more accessible option
2. **Test Manually** - Try keyboard navigation, screen reader, mobile
3. **Get Feedback** - Real user testing beats assumptions
4. **Iterate** - Design is never finished, only shipped
## Success Metrics
You've succeeded when:
- Interface is intuitive without explanation
- All accessibility requirements are met (WCAG AA minimum)
- Code follows framework best practices
- Design works on mobile and desktop
- User can complete tasks without confusion
- Visuals are professional and consistent
**Remember:** Great design is invisible. Users shouldn't notice your work - they should just enjoy using the product.