Skip to content

05. Golden Stack (UI & Frontend Tier)

Status: Active / Golden Version: 1.2 (Revised Jan 2026)

[!NOTE] This is part of a 3-Tier Golden Standard: 1. UI & Frontend (This Document) 2. Infrastructure & Middleware (See 04_INFRASTRUCTURE_OPS.md) 3. DevOps & Workflow (Standard 95 Protocol)

1. The Power Triad (UI Selection Hierarchy)

When building a new feature or component, developers MUST follow this selection order to maintain visual consistency and professional performance.

Priority Library Use Case Rationale
1. Foundation Tailwind CSS / Shadcn Atomic UI. Buttons, Forms, Modals, Simple Lists. Lightweight, accessible, and fully customizable. This is our "Default" skin.
2. Engine Syncfusion React Industrial Widgets. Grids, Schedulers, Gantt, PDF. High-performance components for enterprise-scale data and complex documents.
3. Polish Aceternity UI Pro Cinematic Experience. Backgrounds, Spotlight, Motion. Final layer of "Wow" factor. Used to guide attention and create a premium feel.
4. Artisanship D3.js / SVG Forensic Investigation. Relationship Graphs, Trends. Custom logic that goes beyond standard charts. Used for the "Cerebral Cortex."

2. Component Catalog (Sector Guide)

A. Data & Grids

  • Primary Choice: ForensicGrid (ForensicGrid.tsx)
  • Implementation: A wrapper around Syncfusion GridComponent.
  • Features: Sorting, Grouping (Forensic Axes), Excel/PDF Export.

B. Navigation & Shell

  • Primary Choice: @sd-platform/ui (Workspace Package)
  • Implementation: Tailwind-based standard layout.
  • Visuals: Spotlight effects for active forensic zones.

C. Professional Document Flow (Consolidation)

To ensure "Titan-level" document integrity, we are consolidating our editor footprint.

  • Word / Governance Editor: Syncfusion DocumentEditor ([REPLACES @mdxeditor/editor for official documents]).
    • Why: Required for pixel-perfect headers, page numbering, and native .docx export for Board signatures.
  • PDF Forensic Viewer: Syncfusion PDFViewer
    • Why: Enables client-side annotations and forensic highlighting of legal triggers within deeds/contracts.
  • Electronic Signature: Syncfusion Signature
    • Why: Native integration with our document flows for legally binding approvals.

D. Reporting & Financial Statements

  • Primary Tool: Syncfusion PDF Library (Server-Side).
  • Use Case: Generating Invoices, Account Statements, and Indiviso Assessment reports.
  • Value: Bypasses browser rendering for mathematically perfect, high-volume PDF generation.

D. Visual Discovery (The Cerebral Cortex)

  • Primary Choice: DecompositionTree (DecompositionTree.tsx)
  • Implementation: Custom D3.js SVG + Aceternity Spotlight.
  • Purpose: Mapping "Invisible" community relationships.

3. Tool Selection Decision Logic

[!IMPORTANT] Rule of Overlap: Avoid using two libraries for the same purpose.

graph TD
    A[New Component Need] --> B{Is it a standard form?}
    B -- Yes --> C[Tailwind / Shadcn]
    B -- No --> D{Is it high-volume data?}
    D -- Yes --> E[Syncfusion Grid]
    D -- No --> F{Is it a document / file?}
    F -- Yes --> G[Syncfusion PDF/Editor]
    F -- No --> H{Is it a complex graph?}
    H -- Yes --> I[D3.js Artisanship]
    H -- No --> J[Aceternity Visual Block]

4. Secret & Config Management

  • Registry: Doppler (Project: singular-dream)
  • Inversion: Env vars are synced via switch-context.ts or doppler run.
  • License Keys:
    • NEXT_PUBLIC_SYNCFUSION_LICENSE_KEY: Manages trial watermark removal.
    • NEXT_PUBLIC_FIREBASE_API_KEY: Identity foundation.

Certified by Antigravity on Jan 12, 2026