Files
DenozordecandClaude Sonnet 5.5 f3531c64f9 Move the console onto ReUI PRO
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 <[email protected]>
2026-10-27 00:06:06 +07:00

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.

  1. Use installed components first (components/ui, components/reui): tables data-grid, filtering filters, boards kanban, modals Dialog or AlertDialog, toasts sonner. Never set height, radius, padding, shadow or motion on them; use size, variant, spacing.
  2. Color: semantic tokens. State: <Badge variant="success-light"> from @/components/reui/badge at default size, or Alert variants. Raw palette only for categorical identity, with its dark: pair.
  3. Spacing: gap-* on the parent: gap-1 to gap-2 in a row, gap-3 to gap-4 between groups, gap-6 to gap-8 between sections. Type: text-sm body, text-xs meta, nothing smaller; never resize FrameTitle or CardTitle.
  4. Motion: installed parts already animate; never retime them. Yours: hover transition-colors; reveal duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]; transform and opacity only; never transition-all, bounce, or a stagger on table rows or lists of 20+; at most 1 entrance per view; MotionConfig reducedMotion="user" plus motion-reduce:.
  5. Every data region: empty state with an action, Skeleton loading, inline error with Retry.
  6. Before UI code, write the plan from .agents/skills/reui/SKILL.md in 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 the reui MCP tool get_agent_skill.

Managed by the ReUI installer. Edits between the markers are replaced on the next run.