---
name: ux-review
description: Review UI components against Archipelago glassmorphism design standards and UX conventions
disable-model-invocation: true
allowed-tools: Read, Glob, Grep, Edit, Write
argument-hint: "[component-or-view-name]"
---

Review the UI of $ARGUMENTS against Archipelago's glassmorphism design system and UX standards.

## Design System Compliance

### Glass Classes (must use global classes from style.css)
- [ ] Section containers use `.path-option-card cursor-default px-6 py-6` (Settings-style sections)
- [ ] Content containers/modals use `.glass-card`
- [ ] Interactive selectable cards use `.path-option-card` (with hover)
- [ ] Status displays use `.info-card` (no hover effects)
- [ ] ALL buttons use `.glass-button` — NEVER `.gradient-button` (BANNED)
- [ ] Large primary actions use `.path-action-button`
- [ ] Info sub-cards use `bg-black/20 rounded-xl border border-white/10`
- [ ] Info rows use `bg-white/5 rounded-lg` pattern
- [ ] Action buttons in info sections use `.info-card-button`

### BANNED — Flag These as Violations
- [ ] No `.gradient-button` anywhere (replace with `.glass-button`)
- [ ] No `.gradient-card` / `.gradient-card-dark` (replace with `.glass-card` or `.path-option-card`)

### NO Inline Tailwind
- [ ] Check for long `class="..."` strings with layout/color utilities
- [ ] Extract to semantic classes in `neode-ui/src/style.css`
- [ ] Name classes semantically: `.app-card`, `.status-badge`, `.nav-item`

### Color Compliance
- [ ] Primary text: `text-white/90` (not `text-white` or arbitrary opacity)
- [ ] Muted text: `text-white/60` to `text-white/70`
- [ ] Backgrounds: `rgba(0,0,0,0.60)` with `backdrop-filter: blur(24px)`
- [ ] Borders: `rgba(255,255,255,0.18)` standard
- [ ] Status colors: green=#4ade80, red=#ef4444, yellow=#facc15, blue=#3b82f6, orange=#fb923c

### Typography
- [ ] Font: Avenir Next (body), Montserrat (headings via `font-archipelago`)
- [ ] H1: text-3xl font-bold, H2: text-2xl font-semibold, H3: text-xl font-semibold
- [ ] Body: text-base, Small: text-sm, Labels: text-xs

### Interaction States
- [ ] Hover: `translateY(-2px)` lift + background brighten + enhanced shadow
- [ ] Active: `translateY(1px)` press
- [ ] Selected: brighter background + glow shadow + enhanced gradient border
- [ ] Disabled: reduced opacity (~50%), no pointer events
- [ ] Loading: spinner SVG + descriptive text, button disabled
- [ ] Focus-visible: soft blue glow `rgba(120, 180, 255, 0.2)`

### Transitions
- [ ] Standard: `all 0.3s ease`
- [ ] All interactive elements have transitions (no jarring state changes)
- [ ] Respect `prefers-reduced-motion`

### Spacing
- [ ] 4px grid system (p-1=4px, p-2=8px, p-3=12px, p-4=16px)
- [ ] 16px default padding on cards
- [ ] Consistent gap values between grid items

### Responsive
- [ ] Mobile: single column, reduced padding, touch targets >= 44x44px
- [ ] Tablet (md:): two columns
- [ ] Desktop (lg:): three columns, full effects

### Accessibility
- [ ] Semantic HTML (`<button>`, `<nav>`, `<main>`, not div soup)
- [ ] ARIA labels on icon-only buttons
- [ ] Keyboard navigable (Tab order, Enter to activate, Esc to close)
- [ ] Color contrast WCAG AA (4.5:1 normal text, 3:1 large)
- [ ] Images have alt text (decorative: `alt=""`)

### Icons
- [ ] Stroke-based SVGs, stroke-width 2.5 default
- [ ] Color: `text-white/85` default, `text-white` on hover
- [ ] Drop-shadow filter applied on interactive icons
- [ ] Size: w-5 h-5 standard, w-4 h-4 small

## Service UI Review (if reviewing docker/*-ui/)
- [ ] Uses `.glass-card` for main sections
- [ ] Uses `.info-card` for status (no hover)
- [ ] Uses `.info-card-button` for actions (with hover)
- [ ] Uses `bg-white/5` for info rows
- [ ] Header: logo + title + description + status
- [ ] Background image loads correctly
- [ ] Mobile responsive

Report violations with file paths and specific fixes.
