name: design-system description: Flightdeck UI tokens, components, GitHub Actions patterns, and client/server-safe styling — authoritative content lives in the workspace rule. license: MIT metadata: author: typeui.sh

Flightdeck design system

Authoritative rule (implementers): .cursor/rules/design-system.mdc

In-app summary (operators): /design-system

The rule covers tokens (globals.css), Tailwind v4 usage, fonts, spacing, component patterns (stat cards, run cards, buttons, skeletons), GitHub Actions UI, polling, sticky filters, sidebar navigation (registry, collapsible AWS, expand/collapse all, vendor marks), mutation UX, typography, accessibility, and anti-patterns.

When this skill matches a task, read and follow the rule file for full implementation details.

Pre-flight checklist (verify before every component save)

Run through all five checks before marking any UI change complete:

1. No hardcoded hex or rgba — every color must be a CSS token (bg-(--accent), text-(--danger), etc.). Exceptions: vendor logo fills only (AWS #232F3E, Fly.io #7B36F6).

2. Page h1 typography — text-2xl font-medium font-(family-name:--font-display). Never text-3xl. Never omit font-medium.

3. Card and modal radius is rounded-xl — not rounded-lg, not rounded-2xl. Buttons and error banners use rounded-lg. Form inputs use rounded-md or rounded-lg.

4. Primary actions use --accent, never --success — bg-(--accent) text-white hover:opacity-90. --success is reserved for health/status indicators.

5. Focus rings on every input — focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent)/20. Must be ring-2, must be /20 opacity.

Quick-reference token cheat sheet

Shadow tier

Border radius tier