Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
1.9 KiB
1.9 KiB
ReUI design rules (every UI edit, follow-ups included)
This project uses an existing design system: ReUI on shadcn/ui. Keep its look. Generic frontend advice (vary fonts or themes, gradients, page-load or staggered reveals, "2-3 intentional motions", Framer Motion) does not apply here, and other design skills lose where they disagree.
- Use installed components first (
components/ui,components/reui): tablesdata-grid, filteringfilters, boardskanban, modalsDialogorAlertDialog, toastssonner. Never set height, radius, padding, shadow or motion on them; usesize,variant,spacing. - Color: semantic tokens. State:
<Badge variant="success-light">from@/components/reui/badgeat default size, or Alert variants. Raw palette only for categorical identity, with itsdark:pair. - Spacing:
gap-*on the parent:gap-1togap-2in a row,gap-3togap-4between groups,gap-6togap-8between sections. Type:text-smbody,text-xsmeta, nothing smaller; never resize FrameTitle or CardTitle. - Motion: installed parts already animate; never retime them. Yours: hover
transition-colors; revealduration-200 ease-[cubic-bezier(0.22,1,0.36,1)]; transform and opacity only; nevertransition-all, bounce, or a stagger on table rows or lists of 20+; at most 1 entrance per view;MotionConfig reducedMotion="user"plusmotion-reduce:. - Every data region: empty state with an action,
Skeletonloading, inline error with Retry. - Before UI code, write the plan from
.agents/skills/reui/SKILL.mdin your reply. Before you finish, run its self-check on the files you changed and fix every hit (2 rounds at most). Full rules:.agents/skills/reui/SKILL.md. If that folder is missing, call thereuiMCP toolget_agent_skill.
Managed by the ReUI installer. Edits between the markers are replaced on the next run.