UI component architecture

The failure mode this corrects: an agent authors a screen as a few hundred lines of <div className="..."> Tailwind soup — reimplementing a Button, Card, or Badge that already exists in the shared UI package, and never graduating the genuinely reusable pieces back into that package. The result is duplicated styling, drifting visual language, and screens nobody can read.

The fix is two habits: reuse before you author, and keep screens thin by extracting reusable units into the shared UI package — without over-extracting one-off layout glue. That package MUST be its own package. Its path and import alias are per-repo (ADR-0013). Discover them from the workspace (package.json workspaces, packages/*, vendor trees). Do not invent a required name.

Apply codebase-design when choosing component boundaries. Keep state, handlers, private components, and layout together when they explain one capability. An extraction should hide behavior or enable useful reuse; neither JSX length nor a second call site establishes that on its own.