7b56927c3c
- Protocol: 10 context categories (apps, system, network, bitcoin, media, files, notes, search, ai-local, wallet) - ContextBroker: real data wiring for all categories with sanitization - Permissions: user toggles for all categories in Settings - Nginx: Claude API, OpenRouter, SearXNG proxy pass-through - Actions: launch-app, search-web, install-app handlers - Chat.vue: loading state + connection indicator - Integration test page: test-aiui.html Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
91 lines
3.8 KiB
Markdown
91 lines
3.8 KiB
Markdown
---
|
|
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.
|