98bdc18a49
- applications/iknowyou: new Next.js chat application with persona-aware conversations, briefing API, cohort logic, vLLM streaming, and sidebar navigation - tidal M8: add replication control plane (control.rs), tenant migration state machine (migration.rs), tenant/upgrade coordinators, cluster/fault test harnesses - tidal M8 tests: expand m8p2/m8p3/m8p4 test suites; add m8p5_multitenancy and m8_uat - tidal db: split replication_ops out of db/mod.rs (was 647 lines, now 574) - .claude: add kai-park, kaya-osei, mira-vasquez agents; add aeries-design-architect, aeries-fullstack-engineer, aeries-product-visionary skills - docs: update ROADMAP.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
85 lines
3.6 KiB
Markdown
85 lines
3.6 KiB
Markdown
---
|
|
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)
|