app-ui
App UI
A design system is not a palette and a button. It is a few hundred small decisions (how a menu grows, what a button says while it waits, where an error appears, what stays on screen while a panel closes) made once and reused everywhere, so no screen has to invent them. The numbers here are tested ones; change one on purpose, in the token, never on one screen.
| The job | Read |
|---|---|
| Tokens: color, surfaces, type roles, the fluid scale, motion, focus, cursors, hit areas, direction, theme | TOKENS.md |
| Buttons, icons, text that morphs, fields and form layout, number inputs, search, checkboxes, switches, segmented tabs, tooltips, badges, avatars, formatting numbers, dates and user text | CONTROLS.md |
| The app shell, menus and selects whose trigger becomes the menu, date ranges, the sidebar and its sliding highlight | MENUS.md |
| Dialogs that grow from their button, sheets, in-place confirms, disclosure panels, step slides, settings | OVERLAYS.md |
| Sign-in, sign-up and recovery pages, the session guards, connecting an outside account in steps | AUTH.md |
| Filters and chips, tables, selection bars, boards and lists, drag and drop, feeds and cards, media | DATA-VIEWS.md |
| Pending labels, optimistic changes, unknown outcomes, progress and stop, errors, empty and loading | STATES.md |
| A checker that blocks drift: the rules, the allowlist, the ratchet | CHECKS.md |
| The production source of every piece above, to copy as is | reference/REFERENCE.md |
Durations, curves and springs in general are in the ui-animation skill; how much decoration a product should have is in anti-slop-ui; the chat surface of an agent is agent-chat-ui; the marketing site is landing-page-ui. Those two own their own motion: the app's is calm and quick, the site's expressive, the agent's built around waiting.
To build it exactly, copy from reference/ rather than writing it from the description.