mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
4c12a0b1046f3fb5066fb13f68806ce14b48e576
Nexus.Reader/.agent/skills/nexus-ui-engine/SKILL.md
T
Antigravity 72905aa119 feat(ui): implement premium gamified Concepts Map dashboard, unify design tokens, and enforce scoped CSS (#54) 
Resolves #55

# gamified Concepts Map Dashboard, Architecture Cleanup, & CSS Unification

This Pull Request completes the gamified **Concepts Map** interactive experience and executes a strict visual and architectural clean-up of the **NexusReader SaaS** platform by consolidating styling around the centralized **Nexus Neon** design system, enforcing Native AOT-compliant scoped-CSS, and resolving style drift.

---

### 🚀 Key Implementations

#### 1. Gamified Interactive Concepts Map Dashboard
* **Dynamic Skill-Tree Visualizer:** Implemented a gamified node-based interactive tree that reads concept connections dynamically, rendering progress nodes, unlocked/locked states, and active visual connection lines.
* **Premium UX Details:** Integrated high-fidelity hover effects, detailed sidebar popovers showing unlocked stats/summaries, and smooth parallax backdrops.
* **Secure Multi-Tenant Gating:** Hardened data queries using explicit `TenantId` gating to ensure complete layout isolation between system tenants.

#### 2. Architecture & Service Optimization
* **Service Abstraction (`IConceptsMapService`):** Introduced a clean service interface decoupled from the UI layers.
* **Polyglot Fallback Implementations:**
  - **WasmConceptsMapService:** Implements efficient client-side fetching with error recovery/loading states.
  - **ServerConceptsMapService:** Handles deep database graph mapping, relationship resolution, and multi-tenant checks.
* **CQRS Integrity:** Enforced the CQRS Result Pattern by using `MediatR` handlers to fetch data structures instead of placing database queries in UI modules.

#### 3. Nexus Neon CSS Unification & Zero-Style-Tag Standards
* **Central Design Tokens:** Solidified typography (`Inter` / `Merriweather`), primary brand green hues (`var(--nexus-neon)` at `#00ff99`), and glow variables inside the global `app.css`.
* **Zero Inline Style Tags:** Standardized all dashboard modules by completely eliminating inline `<style>` blocks in favor of scoped `.razor.css` companion files.
* **Consolidated Buttons & Glass Panels:**
  - Standardized `.btn-nexus`, `.btn-nexus-primary`, and `.btn-nexus-secondary` throughout header/footer/card operations.
  - Removed duplicate `.glass-panel` background, blur, and support-declaration overrides, making components cleanly inherit standard global styles.
* **Eliminated Brand Splitting:** Resolved legacy purple-indigo user avatar and conversation bubble gradients inside the AI Intelligence Hub (`Intelligence.razor.css`), migrating them to premium glassmorphic surfaces (`rgba(255, 255, 255, 0.05)`) contrasting beautifully against the emerald green AI theme.

---

### 🧪 Verification & Build Gate Status

* **Successful Compilation Check:** Run `dotnet build NexusReader.slnx --no-restore` from the workspace root. Flawlessly succeeded with **zero compilation errors** (`Liczba błędów: 0`) under target `.NET 10`.
* **Verified Skills Synchrony:** The companion design guidelines skill (`nexus-ui-engine/SKILL.md`) has been fully updated to secure these layout and styling conventions for future dashboard features.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #54
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
2026-05-26 17:46:56 +00:00

3.7 KiB
Raw Blame History

name, description
name description
nexus-ui-engine Design System & Component rules for Blazor

UI Standards

  • Atomic Design:

    • Build reusable components in NexusReader.UI.Shared/Components.
    • Atoms: Base elements (NexusButton, NexusIcon, NexusTypography).
    • Molecules: Small groups (AiAssistantBubble, KnowledgeCheck).
    • Organisms: High-level sections (KnowledgeGraph, ReaderCanvas).

  • Styling & Isolation:

    • Mandatory use of scoped CSS (.razor.css).
    • Strict compliance: Zero inline <style> tags are allowed in .razor files.
    • No global CSS except for design tokens in app.css.
    • Use ::deep only when absolutely necessary to style child components.

  • Design System (Nexus Neon):

    • Color Palette:
      • Primary Accent: --nexus-neon (#00ff99) - Used for borders, highlights, and icons.
      • Neon Glow: --nexus-neon-glow / --nexus-primary-glow (rgba(0, 255, 153, 0.3)).
      • Dark Mode: --nexus-bg (#0a0a0a), --nexus-card (#141414).
      • Light Mode: --nexus-bg (#f8f9fa), --nexus-card (#ffffff).
      • No Brand Splitting: Strict ban on custom purple/indigo/cyan elements or hardcoded accent colors (like #7c3aed, #4c1d95, #00b3ff) on dashboard pages. Neutral/glass surfaces (rgba(255, 255, 255, 0.05)) must be used for secondary elements to preserve contrast and ensure the AI/neon-green elements are the focal point.
    • Buttons:
      • Must inherit from the global .btn-nexus class in app.css.
      • Primary Button: .btn-nexus-primary (background: var(--nexus-neon), text color: #000).
      • Secondary Button: .btn-nexus-secondary (background: rgba(255, 255, 255, 0.05), border: 1px solid rgba(255, 255, 255, 0.1), text color: #fff).
      • Hover Interaction: transform: translateY(-2px), increased brightness, and a signature primary neon glow shadow.
    • Typography:
      • UI Elements: Inter (Sans-Serif) for controls, menus, and labels.
      • Reading Content: Merriweather (Serif) with line-height: 1.65 and letter-spacing: -0.01em for high readability.
    • Effects:
      • Subtle neon glows (box-shadow: 0 0 15px rgba(0, 255, 153, 0.3)).
      • Glassmorphism for overlays and modals.

  • Adaptive Layouts:

    • Support .platform-mobile and .platform-desktop context classes.
    • Handle safe-area insets (--safe-area-inset-*) for mobile devices.
    • Immersive Reader (Zen Mode):
      • Centered content flow: max-width: 800px, margin: 0 auto.
      • Paper-white background: #F9F9F9 for light mode reader canvas.
      • Dedicated Scrollbars: Custom styled, thin scrollbars with --nexus-neon accents.
      • Reachability: Large padding-bottom (e.g., 15rem) to ensure comfortable reading of end-of-page content.

  • Accessibility (A11y):

    • Touch Targets: Min 44x44px on mobile (enforced via CSS variables).
    • Contrast: Minimum ratio of 4.5:1.
    • Semantic HTML: Use appropriate tags (<button>, <article>, <nav>).

  • Interactive Flow:

    • AI Assistant interactions must be non-blocking and smoothly transition using CSS animations.
    • Interactive elements must have clear :hover, :active, and :focus states.
    • Glass Panel Standard: All primary data panels (.glass-panel) must implement the following global parameters from app.css (only local modifiers like padding and hover offsets should live in scoped CSS):
      • Background: rgba(20, 20, 20, 0.85) (fallback) / rgba(255, 255, 255, 0.03) with backdrop-filter: blur(10px) when supported.
      • Border: 1px solid rgba(255, 255, 255, 0.05).
      • Border Radius: var(--radius-xl).
      • Transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1).
      • :hover state: transform: translateY(-4px) (or local offset) and highlight accent border-color: rgba(0, 255, 153, 0.2).
Reference in New Issue View Git Blame Copy Permalink