Frontend UI/UX Design Optimizer

Deep research-driven skill for finding optimal frontend design patterns.

When to Use

Invoke this skill when the user mentions:

• "What's the best UI pattern for..."
• "How should I design the frontend for..."
• "Improve the UX of..."
• "Modern design patterns for..."
• "Find examples of [component/feature] design"
• "Best practices for [UI element]"

Research-First Methodology

This skill uses multi-agent deep research to find proven, production-ready design patterns.

Step 1: Understand Context

# First, analyze the current codebase
- What framework are we using? (React, Vue, vanilla JS)
- What UI library is present? (Bootstrap, Tailwind, custom)
- What's the design system? (Material, custom, none)
- Who are the users? (internal tools, customer-facing, admin panels)

Step 2: Launch Deep Research

Use the codex-deep-research agent to investigate:

Invoke Task tool with subagent_type="codex-deep-research"

Prompt:
"Research the best UI/UX design patterns for [specific feature/component].

Context:
- Tech stack: [from Step 1]
- User type: [from Step 1]
- Requirements: [user's specific needs]

Please provide:
1. Top 3-5 proven design patterns with examples
2. Pros/cons of each approach
3. Real-world implementations (with links to examples)
4. Accessibility considerations (WCAG compliance)
5. Performance implications
6. Mobile responsiveness strategies
7. Recommendations ranked by: usability, accessibility, performance

Include code examples and visual descriptions where possible."

Step 3: Compare with Modern Standards

Use the gemini-research-analyst agent (if Gemini-specific UI tools are relevant):

Invoke Task tool with subagent_type="gemini-research-analyst"

Prompt:
"Research if Google's Gemini AI has any UI/UX design tools, guidelines, or recommended patterns for [specific feature].

Specifically check for:
1. Gemini-powered design assistants
2. Google's Material Design 3 updates
3. AI-assisted UI generation tools
4. Accessibility tools from Google AI
5. Any Gemini integrations for design workflows

If Gemini has relevant tools, explain how to integrate them."

Step 4: Synthesize Recommendations

After agents return results:

1. Compare patterns from research

2. Rank by criteria:

   • User experience (most important)
   • Accessibility (WCAG AA minimum)
   • Performance (Lighthouse score impact)
   • Maintainability (code complexity)
   • Browser compatibility
   • Mobile-first design

3. Provide decision matrix:

## Design Pattern Comparison

| Pattern | UX Score | A11y | Perf | Maintainability | Best For |
|---------|----------|------|------|----------------|----------|
| [Pattern 1] | ⭐⭐⭐⭐⭐ | WCAG AA | 95/100 | Low complexity | [Use case] |
| [Pattern 2] | ⭐⭐⭐⭐ | WCAG AAA | 88/100 | Medium | [Use case] |

4. Recommend top choice with justification

Step 5: Provide Implementation Plan

## Recommended: [Pattern Name]

### Why This Pattern?
- [Justification based on research]
- [Link to production examples]
- [Performance benchmarks]

### Implementation Steps
1. [Step 1 with code example]
2. [Step 2 with code example]
3. [Step 3 with code example]

### Accessibility Checklist
- [ ] Keyboard navigation
- [ ] Screen reader support (ARIA labels)
- [ ] Color contrast (4.5:1 minimum)
- [ ] Focus indicators
- [ ] Semantic HTML

### Testing Strategy
- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge)
- [ ] Mobile responsive testing (320px to 1920px)
- [ ] Lighthouse audit (>90 accessibility score)
- [ ] Screen reader testing (NVDA, JAWS, VoiceOver)

### Example Code
```javascript
// [Full working example from research]

Live Examples

• [Link to CodeSandbox/CodePen]
• [Link to production site using this pattern]
• [Link to design system documentation]

## Validation Criteria

Before presenting recommendations, ensure:

- ✅ At least 3 different patterns researched
- ✅ Each pattern has production examples
- ✅ Accessibility compliance verified (WCAG AA minimum)
- ✅ Performance benchmarks included
- ✅ Mobile responsiveness addressed
- ✅ Code examples are complete and working
- ✅ Browser compatibility documented

## Anti-Patterns to Avoid

**NEVER recommend without research:**
- Trends without proven track record
- Patterns with poor accessibility
- Solutions that don't match tech stack
- Overcomplicated solutions for simple problems

**ALWAYS prioritize:**
- User experience over aesthetics
- Accessibility over visual flair
- Performance over feature bloat
- Maintainability over cleverness

## Example Invocation

```markdown
User: "What's the best way to design a real-time dashboard with live metrics?"