From ec7c975540ea824877d5e80a7f822e7d7cfb8150 Mon Sep 17 00:00:00 2001 From: uroma Date: Thu, 15 Jan 2026 15:38:23 +0000 Subject: [PATCH] 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 --- MASTER-PROMPT.md | 98 ++++++++++++- README.md | 73 +++++++--- agents/design/ui-ux-pro-max.md | 255 +++++++++++++++++++++++++++++++++ 3 files changed, 400 insertions(+), 26 deletions(-) create mode 100644 agents/design/ui-ux-pro-max.md diff --git a/MASTER-PROMPT.md b/MASTER-PROMPT.md index 7365b94..4cc3cc9 100644 --- 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 diff --git a/README.md b/README.md index ef49b96..9d686b7 100644 --- a/README.md +++ b/README.md @@ -820,31 +820,57 @@ Our suite uses these 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 -**Key Feature:** Professional UI/UX design patterns +**Type:** Agent + Skill (now installed with PROACTIVELY auto-triggering) +**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 agent with comprehensive 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 +**PROACTIVELY Auto-Triggering Agent:** +- Triggers on UI component creation (buttons, modals, forms, cards, navbars) +- Triggers on page design (landing pages, dashboards, pricing pages) +- Triggers on UI/UX review and audits +- Applies accessibility compliance (WCAG 2.1 AA/AAA) +- 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: -- **whimsy-injector** - Adds delightful micro-interactions -- **ui-designer** - Creates professional interfaces -- **brand-guardian** - Maintains visual consistency +#### Real-Life Example: UI Component Creation + +**BEFORE (Without ui-ux-pro-max):** +``` +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 -- **Professional Quality** - Agency-level design patterns -- **User Delight** - Focus on micro-interactions -- **Brand Consistency** - Cohesive visual identity +- **Professional Quality** - Agency-level design patterns automatically applied +- **Accessibility First** - WCAG 2.1 AA/AAA compliance built-in +- **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 - Inspired rich example format with tags and 500+ word system prompts - 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) - 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) - - Professional UI/UX design patterns and agent behaviors - - Inspired design-focused agents and whimsy-injector + - Professional UI/UX design patterns converted to PROACTIVELY auto-triggering agent + - 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) - - AI assistant framework and agent patterns - - Inspired multi-agent coordination and studio operations workflows + - CLI framework for autonomous agent loops (installed separately via `npm i -g @iannuttall/ralph`) + - 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 diff --git a/agents/design/ui-ux-pro-max.md b/agents/design/ui-ux-pro-max.md new file mode 100644 index 0000000..741c2a4 --- /dev/null +++ b/agents/design/ui-ux-pro-max.md @@ -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: + + +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." + +Every new UI design is an opportunity to apply professional design patterns and accessibility standards from the start. + + + + +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." + +UI issues often stem from inconsistent spacing, poor contrast, or unclear visual hierarchy. Professional review transforms messy interfaces into intuitive experiences. + + + + +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." + +Freshly built components should be reviewed immediately to catch common issues like missing cursor pointers, poor hover feedback, or accessibility violations. + + + + +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." + +Any UI element mentioned should trigger professional design consideration - modals especially need proper ARIA labels, focus trapping, and escape key handling. + + + + +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." + +Each tech stack has specific optimization patterns - React needs memoization strategies, Tailwind needs proper utility organization. + + +--- +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.