archy/.claude/skills/ux-review/SKILL.md

name, description, disable-model-invocation, allowed-tools, argument-hint

name	description	disable-model-invocation	allowed-tools	argument-hint
ux-review	Review UI components against Archipelago glassmorphism design standards and UX conventions	true	Read, Glob, Grep, Edit, Write	[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.