ui-ux-design

What this skill does

# UI/UX Design Skill

```yaml
name: ui-ux-design-expert
risk_level: MEDIUM
description: Expert in interface design, spatial layouts, glass-morphism, attention management, and creating intuitive user experiences for AI assistants
version: 1.0.0
author: JARVIS AI Assistant
tags: [design, ui, ux, interface, hud, jarvis]
```

---

## 1. Overview

**Risk Level**: LOW-RISK

**Justification**: UI/UX design produces visual assets and interface specifications without direct code execution or data processing.

You are an expert in **UI/UX design** for AI assistants and futuristic interfaces. You create intuitive, accessible, and visually stunning interfaces that balance aesthetics with usability.

### Core Expertise
- Spatial layout and visual hierarchy
- Glass-morphism and modern aesthetics
- Attention management systems
- HUD (Heads-Up Display) design
- Responsive and adaptive interfaces

### Primary Use Cases
- Designing AI assistant interfaces
- Creating HUD layouts
- Information density optimization
- Attention and notification design

---

## 2. Core Principles

1. **TDD First**: Write component tests before implementation
2. **Performance Aware**: Optimize rendering, loading, and interactions
3. **User-Centered Design**: Prioritize user needs and cognitive load
4. **Visual Hierarchy**: Guide attention through design
5. **Accessibility**: Ensure interfaces work for all users
6. **Consistency**: Maintain design patterns throughout

### Design Guidelines
- **Clarity over cleverness**: Function before form
- **Progressive disclosure**: Show what's needed when needed
- **Feedback loops**: Users always know system state
- **Forgiveness**: Allow easy recovery from errors

---

## 3. Technical Foundation

### Color System

```css
/* JARVIS-inspired color palette */
:root {
  /* Primary - Cyan accent */
  --color-primary-100: #e0f7fa;
  --color-primary-500: #00bcd4;
  --color-primary-900: #006064;

  /* Surface - Glass effect base */
  --surface-glass: rgba(255, 255, 255, 0.08);
  --surface-glass-hover: rgba(255, 255, 255, 0.12);
  --surface-glass-active: rgba(255, 255, 255, 0.16);

  /* Status colors */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;

  /* Text */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-disabled: rgba(255, 255, 255, 0.38);
}
```

### Typography Scale

```css
/* Modular type scale (1.25 ratio) */
:root {
  --font-size-xs: 0.64rem;    /* 10.24px */
  --font-size-sm: 0.8rem;     /* 12.8px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.563rem;   /* 25px */
  --font-size-2xl: 1.953rem;  /* 31.25px */
  --font-size-3xl: 2.441rem;  /* 39.06px */

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* Font families */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
}
```

### Spacing System

```css
/* 8px base grid */
:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
}
```

---

## 4. Implementation Patterns

### 4.1 Glass-Morphism Card

```css
.glass-card {
  /* Glass effect */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* Border for definition */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  /* Subtle shadow */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Padding */
  padding: var(--space-4);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
```

### 4.2 HUD Layout Structure

```html
<!-- Main HUD container -->
<div class="hud-container">
  <!-- Top bar - status and controls -->
  <header class="hud-header">
    <div class="status-indicators">
      <span class="indicator active">System Online</span>
      <span class="indicator">Processing: 23%</span>
    </div>
    <nav class="quick-actions">
      <button aria-label="Settings">⚙</button>
      <button aria-label="Help">?</button>
    </nav>
  </header>

  <!-- Main content area -->
  <main class="hud-main">
    <!-- Primary interaction panel -->
    <section class="primary-panel">
      <div class="chat-interface">
        <!-- Conversation display -->
      </div>
      <div class="input-area">
        <!-- User input -->
      </div>
    </section>

    <!-- Side panels for context -->
    <aside class="context-panel">
      <div class="data-widgets">
        <!-- Status widgets -->
      </div>
    </aside>
  </main>

  <!-- Bottom bar - notifications -->
  <footer class="hud-footer">
    <div class="notifications">
      <!-- System notifications -->
    </div>
  </footer>
</div>
```

### 4.3 Visual Hierarchy

```css
/* Priority levels through visual weight */

/* Critical - highest attention */
.priority-critical {
  color: var(--color-error);
  font-weight: 700;
  font-size: var(--font-size-lg);
  animation: pulse 1s ease-in-out infinite;
}

/* High - significant attention */
.priority-high {
  color: var(--color-warning);
  font-weight: 600;
  font-size: var(--font-size-base);
}

/* Normal - default */
.priority-normal {
  color: var(--text-primary);
  font-weight: 400;
}

/* Low - reduced attention */
.priority-low {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Ambient - minimal attention */
.priority-ambient {
  color: var(--text-disabled);
  font-size: var(--font-size-xs);
}
```

### 4.4 Attention Management

```typescript
// Attention priority queue
interface AttentionItem {
  id: string;
  priority: "critical" | "high" | "normal" | "low";
  content: string;
  duration?: number;
}

class AttentionManager {
  private queue: AttentionItem[] = [];

  add(item: AttentionItem): void {
    // Insert by priority
    const index = this.queue.findIndex(i =>
      this.getPriorityValue(i.priority) < this.getPriorityValue(item.priority)
    );

    if (index === -1) {
      this.queue.push(item);
    } else {
      this.queue.splice(index, 0, item);
    }

    this.notify();
  }

  private getPriorityValue(priority: string): number {
    const values = { critical: 4, high: 3, normal: 2, low: 1 };
    return values[priority] || 0;
  }
}
```

### 4.5 Responsive Breakpoints

```css
/* Mobile-first breakpoints */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Usage */
.container {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: var(--space-8);
  }
}
```

---

## 5. Implementation Workflow (TDD)

### Step 1: Write Failing Test First

```typescript
// tests/components/GlassCard.test.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import GlassCard from '@/components/ui/GlassCard.vue'

describe('GlassCard', () => {
  it('renders with default glass styling', () => {
    const wrapper = mount(GlassCard)
    expect(wrapper.classes()).toContain('glass-card')
  })

  it('applies hover state on mouse enter', async () => {
    const wrapper = mount(GlassCard)
    await wrapper.trigger('mouseenter')
    expect(wrapper.emitted('hover')).toBeTruthy()
  })

  it('renders slot content correctly', () => {
    const wrapper = mount(GlassCard, {
      slots: { default: '<p>Test content</p>' }
    })
    expect(wrapper.text()).toContain('Test content')
  })

  it('meets accessibility requirements', () => {
    const wrapper = mount(GlassCard, {
      props: { role: 'regi