jordan/tidaldb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
eca7765e8d
tidaldb/.claude/skills/aeries-design-architect/SKILL.md
jordan 98bdc18a49 feat: add iknowyou app + complete M8 replication extensions + Aeries agents/skills 
- 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>
2026-02-24 21:09:11 -07:00

3.6 KiB
Raw Blame History

name description
aeries-design-architect 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)