Premium visual overhaul — RareUI + transitions.dev

[alex-dembele]

Context

Redesign OpenRisk's visuals and micro-interactions to feel "premium and
polished," worthy of an enterprise GRC/cybersecurity tool, building on:

• RareUI — animated React components (Tailwind + Motion, shadcn CLI)
• transitions.dev — transitions library, installable as an agent skill

Visual identity to respect: interlocking rings (blue/purple gradient) on a
navy background, tagline "See · Understand · Act." Readability and
consistency take priority over flashy effects — this is a regulatory tool,
not a consumer app.

Step 0 — Setup

• Install the transitions.dev skill (npx skills add Jakubantalik/transitions.dev)
• Install via shadcn CLI: tasklist, animatedcounter, proximitysidebar, otpinput, deletebutton, notificationbell (RareUI)
• Audit the existing codebase with transitions review (read-only)

Phase 1 — Navigation & structure

• Main sidebar → proximitysidebar (RareUI)
• Dropdown menus → menu-dropdown / dropdown-menu-morph
• Detail tabs → tabs-sliding
• Collapsible sections → accordion
• Long forms → scrollprogressindicator (RareUI)

Phase 2 — Feedback & validations

• Successful validations → success-check
• Form errors → error-state-shake
• Checklists / remediation plans → checkbox-check + tasklist (RareUI)
• Delete button → deletebutton (RareUI)
• Search/filter fields → input-clear-with-dissolve

Phase 3 — Dashboard & data

• KPIs (risk score, open findings, % compliance) → animatedcounter (RareUI) + spinning-counter
• Data loading states → skeleton-loader-and-reveal
• Section titles/summaries → texts-reveal
• Evaluate githubactivity (RareUI) repurposed as a risk heatmap / incident timeline (mockup before integration)

Phase 4 — Notifications & alerts

• Notification system → notificationbell (RareUI) + notification-badge
• Action confirmations → toast-open-close
• Multiple alerts → banner-stacking

Phase 5 — Auth & micro-interactions

• MFA/SSO flow → otpinput (RareUI)
• Modals (create/edit risk, control, policy) → modal-open-close
• Tooltips, icon swap, avatars → tooltip-open-close, icon-swap, avatar-group-hover (used sparingly)
• 3d-tilt reserved for high-value visual elements (e.g. overall score card)

Phase 6 (optional — if AI/copilot module exists)

• reasoning-stream / streaming-text for a potential compliance copilot's responses
• Evaluate fluidorb / matrixorb / gridreveal (RareUI) as an AI activity indicator

Wrap-up

• Run transitions polish to check overall consistency
• Summarize changes per phase before merging into main

Constraints

• Frontend only (React) — no backend Go changes
• Respect prefers-reduced-motion and AA contrast ratios
• One phase = atomic commits, reviewed before merge
• Avoid overly playful effects (confetti, gooey nav, lens flare)

Branch: feat/premium-ui

[alex-dembele]

work — 2026-09-25

Done — Nothing implemented; no branch created. I read the issue and checked it against the decision register. It conflicts with recorded decisions, so I escalated it as D-054 in docs/DECISIONS.md (open section, recommendation included).

Verified

• frontend/eslint.config.js:183: motion is no-restricted-imports at error ("Two animation runtimes in one bundle is the size budget spent twice").
• gh api repos/Codewithswappy/RareUI/contents/package.json: "private": true, depends on motion ^12.23.24 and three ^0.181.2. Licence is MIT, © 2025 Swapnil Kalambe. Its homepage is rareui.in, not the rareui.com this issue links. rareui.com/r/*.json is behind a Vercel bot checkpoint and couldn't be read.
• ls frontend/src/shared/ds/: Tabs, Menu, Modal, Tooltip, Checkbox, OtpField, Drawer already exist in-house (D-019, D-023).

Criteria — the issue has no numbered acceptance criteria to tick. Blocking points:
1 ❌ Step 0 (shadcn CLI install of RareUI) brings in motion, which is banned (D-024 §2) → escalated to D-054
2 ❌ Vendoring needs the notice recorded for each component first (D-020); provenance isn't clear (rareui.com vs rareui.in)
3 ❌ Replacing shared/ds/ primitives contradicts D-019 (built in-house, keyboard/focus contract)
4 ❌ Not Ready under CLAUDE.md: no type: / priority: label, no numbered acceptance criteria, no DoD; six phases in one issue while the rule is one issue = one PR
5 ✅ transitions.dev is CSS only with no dependency; the transitions-dev / transitions-polish skills are already installed

Next — Once the owner rules on D-054, po-openrisk splits #751 into one issue per phase, each with numbered acceptance criteria, a DoD and type:/priority: labels. The recommendation is option A: transitions.dev on the existing primitives, with missing components built in-house. The first child to work is Phase 2 (feedback: success-check, error-shake, input-clear), because it only touches existing primitives.

Blocked on — @owner decision D-054

[alex-dembele]

decide — 2026-09-25

Done — The owner decided D-054 = option C, as written, over the recommendation (A). It's recorded under "Resolved" in docs/DECISIONS.md. RareUI goes in through the shadcn CLI. D-024 §2 is lifted for motion: the lint entry at frontend/eslint.config.js:183 may be removed by the first PR that installs a RareUI component. D-019 is amended for the six components this issue names.

Verified — The decision and its amendments are in the D-054 entry of docs/DECISIONS.md.

Criteria — Blocking points 1 to 3 of the previous comment are lifted by the decision. Point 4 (Ready: type:/priority: labels, numbered acceptance criteria) is taken as waived by the owner's "as written"; the issue goes back to status:ready.

Next — Start at Step 0 on branch feat/premium-ui. Base branch is master, not main. Constraints that still bind, per D-054:

1. Keep the MIT notice with each RareUI file (D-020), and add a row to frontend/design-system/NOTICE if it lands under shared/ds/. Confirm the rareui.com source is Codewithswappy/RareUI (homepage rareui.in).
2. Preloaded budget stays at 180 KB, and it may only go down. motion and three go in a lazy chunk. Check with node frontend/scripts/check-bundle-budget.mjs.
3. prefers-reduced-motion, AA contrast, and the existing keyboard/focus tests on any shared/ds/ primitive that is replaced.
4. One phase = atomic commits.

Blocked on — nothing

[alex-dembele]

Numbering correction: master already had a D-054 (launch scope, still open) by the time this was recorded. The RareUI decision is D-058 in docs/DECISIONS.md. Wherever the two comments above say D-054, read D-058.