tidaldb/.agents/skills/aeries-design-architect/SKILL.md
jordan.washburn fe711870be feat: M8 phases 7-10 — gRPC transport, cluster server, scatter-gather, multi-node UAT
Delivers the distributed fabric's network layer and HTTP cluster surface:

**m8p7: tidal-net crate (gRPC transport)**
- GrpcTransport implementing Transport trait via tonic 0.12
- Per-peer circuit breaker (Closed/Open/HalfOpen), mutual TLS via rustls
- Boxed error types (clippy-clean), graceful mutex recovery, debug_assert
  against calling block_on from tokio context
- Proto: WalShipping service (ShipSegment, StreamSegments stub, Heartbeat)
- 19 tests: contract, mTLS, reconnection, multi-node UAT, benchmarks

**m8p8: cluster subcommand + HTTP routes**
- ClusterState wrapping SimulatedCluster with region name mapping
- Routes: /health, /cluster/status, /cluster/promote, /partition, /heal
- Data routes: /items, /embeddings, /signals, /feed, /search (region-aware)
- Ranking profiles wired through ClusterConfig to all cluster nodes
- Topology YAML config, docker/cluster/Dockerfile (ENTRYPOINT+CMD, non-root)

**m8p9: scatter-gather query routing**
- Entity-sharded writes via Knuth multiplicative hash
- Scatter-gather RETRIEVE and SEARCH with deadline propagation (50ms-5ms)
- Partial failure: degraded=true with unavailable_shards metadata
- 6 tests: distribution, determinism, multi-shard retrieve, degraded
  partial results, deadline propagation, scatter-gather search

**m8p10: gRPC transport integration tests**
- 8 tests over real gRPC: replication convergence, idempotent replay,
  mixed signals, 3-node fan-out, partition/heal, degraded follower, perf
- Documented as tier-2 (in-process+gRPC); tier-3 multi-process pending
2026-04-11 13:51:08 -06:00

3.6 KiB

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
.Codex/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)