# agent_design_rapid — project memory

> This file is auto-loaded into every conversation in this project. It is the persistent
> memory of **agent_design_rapid**: the dedicated agent for the **Rapid Aircraft Performance Tool**
> design system (mobile + tablet). When a conversation starts here, you already hold full context —
> do not ask the user to re-explain the brand, tokens, or architecture.
>
> For the exhaustive specification, read **`design-rapid/skill_design_rapid.md`** (the portable skill).
> For the agent's role and working rules, read **`design-rapid/agent_design_rapid.md`**.
> For how to invoke both, read **`design-rapid/README.md`**.

## What this project is
Rapid is an offline-first **aircraft takeoff/landing performance** tool for pilots. Two surfaces share
one data model, one token set, and one component vocabulary:
- **Mobile** — `Rapid Pilot App.dc.html` (412×858 phone shell; guided vertical scroll, bottom tab bar, bottom sheets)
- **Tablet** — `Rapid Pilot App Tablet.dc.html` (persistent side rail, multi-pane, centered dialogs)

## Canonical files (source of truth — build from these, not from memory)
| File | Role |
|---|---|
| `Rapid Design System.dc.html` | Documented design system (tokens, components, states, handoff). Dark/light live toggle. |
| `Rapid Storybook.dc.html` | Interactive component library (rail · canvas · live controls · live code). |
| `Rapid Pilot App.dc.html` | Mobile app — full flows. |
| `Rapid Pilot App Tablet.dc.html` | Tablet app — full flows. |
| `design-rapid/skill_design_rapid.md` | Full portable spec: tokens, type, spacing, every component, states, responsive rules. |
| `design-rapid/agent_design_rapid.md` | Agent purpose, capabilities, workflow. |
| `assets/rapid-mark.png` | Brand mark. |

When asked to extend the design, **read the relevant canonical file first** and match its existing patterns exactly.

## Brand in one breath
- **Foundation:** shadcn/ui component architecture + Tailwind token conventions, **themed** with the Rapid brand (not the stock zinc/Inter look).
- **Type:** IBM Plex Sans (UI) + IBM Plex Mono (all numeric/aviation data — V-speeds, masses, METAR/TAF, ICAO). Class `.mono` + `font-variant-numeric: tabular-nums`.
- **Palette:** cockpit navy. Dark is primary; light is fully supported via `data-theme="light"` on the root.
- **Grid:** 4px base. Min touch target 44px. Base radius `--radius: 11px`.

## Semantic tokens (shadcn names → values)
Dark (primary): `--background #080E1A` · `--foreground #CDD5DD` · `--card #0D1722` · `--popover #0E1A26` ·
`--primary #E9EEF5` / `--primary-foreground #0A1020` · `--secondary #1D2935` / `-fg #CDD5DD` ·
`--muted #18222D` / `--muted-foreground #7C8A99` · `--accent #212F3C` · `--border #1D2935` ·
`--input #323F4F` · `--ring #B9C6D6` · `--success #26A25F` · `--warning #C5781B` ·
`--destructive #BE4135` · `--info #3B86C4`.
Light: `--background #EEF2F6` · `--foreground #1C2733` · `--card/popover #FFFFFF` · `--primary #16202E` /
`-fg #F4F7FA` · `--secondary #E3E9F0` · `--muted #E6ECF2` / `-fg #5D6B7A` · `--accent #DCE4EE` ·
`--border #D4DCE5` · `--input #C2CDD9` · `--ring #3B6EA5` · `--success #1F8A52` · `--warning #B3690F` ·
`--destructive #C0392B` · `--info #2F74B0`.
**Always reference the token, never a raw hex, in components.**

## Non-negotiable rules
1. **shadcn/ui** is the component foundation. New components follow shadcn anatomy, naming (PascalCase components, camelCase props, kebab tokens), and variant/size prop conventions.
2. **Mobile ↔ tablet parity.** Same components, same vocabulary, same copy/hints. Layout adapts; meaning doesn't. Build/changing one surface → mirror on the other.
3. **Status by text + color, never color alone** (cockpit legibility, WCAG AA in both modes).
4. **Every list needs an empty state; every async op needs loading (skeleton/spinner), error+retry (preserving cached data), and success feedback.**
5. **Destructive actions** route through an AlertDialog gated by the "Confirm before delete" preference, then toast + list refresh + recompute.
6. Numeric/aviation values use IBM Plex Mono. Helper text carries the valid range and is **identical across mobile and tablet**.
7. Output is **developer-handoff ready** — token-driven, documented, shadcn-mappable.

## How to build here (this environment)
Designs are **Design Components** (`.dc.html`). Inline styles only, referencing `var(--token)`; theme via
`data-theme` on the root wrapper. Use `dc_write` / `dc_html_str_replace` / `dc_js_str_replace`. See the
skill doc for the component catalog and the apps for live implementations.

## Invocation
- Say **"use agent_design_rapid"** (or just work in this project) → this memory applies automatically.
- Say **"load skill_design_rapid"** → read `design-rapid/skill_design_rapid.md` and apply tokens/architecture before building.