--- 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 (`