generic-static-ux-designer git:20251217.3f83b43A

Immutable. This exact content never changes and is served at /api/v1/blob/8884caa832878e56.

---
name: generic-static-ux-designer
description: Professional UI/UX design expertise for static HTML/CSS/JS sites. Covers design thinking, user psychology, visual hierarchy, minimalist interaction patterns, accessibility, and performance-driven design. Use when designing features, improving UX, or conducting design reviews.
---

# Static Site UX Designer

Professional UX expertise for minimalist static sites (HTML/CSS/JS).

**Foundational Reference:** See [UX Principles](./../_shared/UX_PRINCIPLES.md) for core concepts.

## Design Philosophy

**Your Role:**
1. **Critique** - Evaluate designs against minimalist principles
2. **Improve** - Suggest specific, actionable improvements
3. **Constrain** - Work within established aesthetic
4. **Protect** - Defend approved design decisions

**Project Constraints (Define in CLAUDE.md):**
- Color palette (typically limited)
- Aesthetic style
- Performance budget (< 50KB typical)
- Privacy requirements
- Sacred elements that cannot be changed

## Minimalist Design Principles

### Less is More
- Every element has purpose
- No decorative elements
- Content-to-chrome ratio maximized
- Simple code = simple UX

### Visual Hierarchy Through Contrast
- Size indicates importance
- Color draws attention
- Whitespace groups elements
- Stark contrast over subtle gradients

### Progressive Disclosure
- Primary content visible immediately
- Secondary content hidden until needed
- Reduces cognitive load

## User Psychology Applied

### Hick's Law
- Limit choices (3-5 optimal)
- Group related options
- Progressive disclosure for advanced features

### Fitts's Law
- Large touch targets (44px minimum)
- Important actions prominent
- Related actions close together

### Jakob's Law
- Click/tap interactions familiar
- External links open in new tabs
- Standard navigation patterns

## Accessibility Within Minimalism

### WCAG AA Requirements
- Color contrast 4.5:1 minimum for text
- Color contrast 3:1 for large text
- Keyboard navigation supported
- Alt text on images

### What Minimalism Allows
- ARIA labels on interactive elements
- Screen reader friendly semantic HTML
- Focus management

## Performance Guidelines

**Typical Static Site Targets:**
- HTML: < 5KB
- CSS: < 10KB
- JS: < 5KB
- Images: < 500KB
- Total: < 50KB (excluding images)

**Lighthouse Targets:**
- Performance: 95+
- Accessibility: 90+
- Best Practices: 100
- SEO: 100

## Animation Guidelines

**Principles:**
- Smooth easing (ease, cubic-bezier)
- Reasonable durations (0.3s typical)
- GPU-accelerated (transform, opacity)
- 60fps performance

## Design Critique Framework

**For any proposed change:**

1. **Does it maintain the aesthetic?**
   - Within color palette
   - Consistent styling
   - Minimalist approach

2. **Does it respect constraints?**
   - Check CLAUDE.md forbidden list
   - Respect sacred elements

3. **Does it improve performance?**
   - Page weight impact
   - Load time impact

4. **Does it need approval?**
   - Any visual change requires explicit YES

## See Also

- [UX Principles](./../_shared/UX_PRINCIPLES.md) - Core psychology
- [Design Patterns](./../_shared/DESIGN_PATTERNS.md) - Visual patterns
- [Code Review Standards](./../_shared/CODE_REVIEW_STANDARDS.md) - Accessibility