---
name: aeries-design-architect
description: Design and build Aeries chat interface components, design system, and conversational UX
---

# aeries-design-architect

## When to Use

- Designing or iterating on the Aeries chat interface
- Building new UI components for the companion experience
- Establishing or updating the design system (colors, typography, spacing)
- Prototyping conversational flows or interaction patterns
- Reviewing UI for consistency, accessibility, or dark-theme correctness

Invoked via: `/aeries-design-architect` or delegated from `/aeries-fullstack-engineer`

## Delegation

This skill delegates to **@kaya-osei** — the Aeries product designer. All design decisions, component architecture, and visual implementation go through her lens.

## Step Back

Before implementing any design work, ask:

1. **Is this the simplest version?** Chat UI has infinite scope. What's the minimum that makes the conversation feel good? Strip everything else.
2. **Does this work on pure black?** Test on `oklch(0.00 0.000 0)`. If the contrast fails, the color is wrong.
3. **What happens during streaming?** Every component must have a streaming state. If it flickers, jumps, or reflows during token arrival, it's broken.
4. **Would you notice this in a 30-minute conversation?** If the user would stop noticing a design element after 2 minutes, it's either perfect or unnecessary. If it keeps drawing attention, it's wrong.
5. **Does this respect the user's attention?** The conversation is the content. Every pixel of chrome competes with it.

## Workflow

### Phase 1: Context
- Read `applications/iknowyou/vision.md` for product principles
- Read existing components in `applications/iknowyou/components/`
- Check `applications/iknowyou/app/globals.css` for current design tokens

### Phase 2: Design
- Define component API (props, variants, states)
- Establish visual specs using the OKLCH color system
- Identify streaming/loading states
- Consider keyboard navigation and focus management

### Phase 3: Build
- Implement with React + Tailwind v4
- Use CSS custom properties from `globals.css` — never hardcode colors
- Test on black background, dark surface, and elevated surface
- Verify streaming behavior with mock SSE data

### Phase 4: Verify
- Run through Done Gate checklist
- Screenshot on dark background
- Test keyboard-only navigation
- Verify responsive behavior (mobile breakpoint: 640px)

## Quick Reference

| Path | Purpose |
|------|---------|
| `applications/iknowyou/app/globals.css` | Design tokens, OKLCH colors |
| `applications/iknowyou/components/chat/` | Chat-specific components |
| `applications/iknowyou/components/ui/` | Shared UI primitives |
| `applications/iknowyou/lib/theme.ts` | Theme utilities |
| `applications/iknowyou/vision.md` | Product principles and design philosophy |
| `.claude/agents/kaya-osei.md` | Designer agent — constraints and patterns |

## Standards

- All colors use OKLCH via CSS custom properties
- Contrast ratio ≥ 7:1 for body text on dark backgrounds (WCAG AAA)
- No decorative animations — every transition communicates state
- Components are keyboard-navigable with visible focus rings
- Streaming states tested with progressive token rendering

## Done Gate

- [ ] Component renders correctly on pure black background
- [ ] OKLCH colors used throughout — no hex, no rgb
- [ ] Keyboard navigation works (Tab, Enter, Escape)
- [ ] Streaming state looks natural (no flicker, no reflow)
- [ ] No visual competition with message content
- [ ] Mobile responsive (≤ 640px) if applicable
- [ ] Matches existing design language (check `globals.css` tokens)