jcdavis131 Use Design System
A shared UI package encodes the design system. Primitives give cross-site consistency; hand-rolled markup drifts.
The move
- Find the shared package —
packages/ui-*,@repo/ui,@*/ui-fleet. Read exports. - Use primitives, not raw markup — PageHeader, Card, Button from the package; raw
<div>only when no primitive fits. - Verify names in source — grep before trusting memory:
grep -n "bh-btn\|bh-card" packages/ui-fleet/src/components.css | head -6 - Set page metadata — every page exports
metadata(title for SEO/share cards).
When a primitive doesn't fit
Closest primitive + constraints; add to shared package if 2+ sites need it (lane-discipline); one-off hand-roll with a comment explaining why.
Extended patterns
Shared-vs-local decision, build order, SDK domain imports, barrel exports: reference.md
Anti-patterns
Hand-rolling for speed; trusting memory for class names; bypassing shared package "just once"; site-local instead of shared when reusable.
Pair with
match-conventions·validate-gate·lane-discipline