R
Rapid AeroAircraft Performance Tool

Delivery Hub

One place for everything the Rapid teams need to build the Aircraft Performance Tool with Claude Code — across three tracks: the frontend design kit (tokens, prototypes, component specs, page commands), the backend skillset (architecture, data model, API contracts, security, DevOps, per-module guides), and the product documentation (PRDs, user flows, user stories). Pick a track below, download its kit, and start building.

Frontend React · Tailwind · shadcn/ui Backend NestJS · PostgreSQL · Redis Product PRD · Flows · Stories Status Ready for development
1 Download all files
⬇ Rapid Design Kit
tokens · prototypes · PRD · user stories · flows · component inventory · CLAUDE.md · slash commands — one ZIP, 1.5 MB
⬇ Download the Kit (.zip)
The ZIP keeps its folder structure (.claude/, design/, docs/, CLAUDE.md). That's Claude Code configuration + reference material — not application architecture. You still design your own src/ however you like.
2 Quick start (under 2 minutes)

From download to first page

  1. Unzip and copy the kit's contents into the root of your repo
    Merge the .claude/, design/, docs/ folders and CLAUDE.md alongside your project.
  2. Import the tokens at your app root
    import './design/tokens.css' — and (recommended) wire design/tailwind.tokens.js into your tailwind.config.
  3. Open Claude Code in the repo
    It auto-loads CLAUDE.md — the design rules and asset map are picked up automatically.
  4. Generate a page — type a command
    /mobile login
    Claude reads the tokens, the matching PRD section, and the prototype, then builds the page into your structure — asking where files go if it's unsure.
3 Using Claude Code

The “command → page” workflow

Two slash commands generate any screen for either surface. Add the page name as an argument; run the command alone to be asked which page.

/mobile login      # mobile login page
/mobile home       # mobile home / dashboard
/mobile takeoff    # core takeoff calculator
/tablet login      # tablet login (side-rail layout)

Available pages: login · home · takeoff · landing · aircraft · notams · mel · charts · manuals · messages · settings · subscription

Kick-off prompt (paste once, first session)

Read CLAUDE.md, then design/component-inventory.md and docs/prd.md.
We're building the Rapid Pilot App frontend (mobile + tablet) in
React + Tailwind + shadcn/ui. Import design/tokens.css at the root.

Scaffold the project in the structure YOU think is best, then stop
and show me before we build screens. After I approve, I'll generate
pages one at a time with /mobile and /tablet. Rules: tokens only
(never hex); mobile↔tablet parity; IBM Plex Mono for numeric/aviation
values; status by text+color; every list gets empty/loading/error/
success states.
4 What's inside

File descriptions

FileWhat it is
CLAUDE.mdDesign rules + asset map + command usage. Auto-loaded by Claude Code. Architecture-free.
.claude/commands/mobile.md & tablet.md — the /mobile and /tablet page generators.
design/tokens.cssColor / type / spacing / radius as CSS variables. The single source of truth for color — import it.
design/tokens.jsonSame tokens, machine-readable.
design/tailwind.tokens.jsTokens mapped into a Tailwind theme (drop into tailwind.config).
design/component-inventory.mdEvery component → variants → states → shadcn mapping, incl. future-panel additions.
design/prototypes/*.htmlVisual source of truth. Compiled bundles — open in a browser to view, don't scrape their source.
docs/prd.mdFunctional requirements per screen (FR-XX-YY), calc logic, input ranges (§7.3.1), empty-state copy (§11).
docs/user-stories.mdUser stories with Gherkin acceptance criteria.
docs/user-flows.mdNavigation topology and primary flows.
docs/docs.htmlHuman-readable spec hub (all three docs, styled).
5 Avoid these pitfalls

✓ Do

  • Import tokens.css and use tokens for every color.
  • Build one screen at a time; review, then continue.
  • Open prototypes in a browser as visual reference.
  • Use the PRD (§7.1–7.12) as the authoritative per-screen spec.
  • Keep mobile and tablet in parity — same components & copy.

✕ Don't

  • Paste the big prototype HTML files into chat — they blow the context window.
  • Hardcode hex colors — causes token drift.
  • Ask Claude to “build the whole app” in one go.
  • Scrape markup out of the compiled prototype bundles.
  • Lock out the future Admin / Super-Admin / Dispatch panels.
6 Browse online (no download)

Preview the specs & prototypes