Nexus.Reader/.agents/skills/nexus-ui-engine.md

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).
  • 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.
    • Dark Mode: --nexus-bg (#0a0a0a), --nexus-card (#141414).
    • Light Mode: --nexus-bg (#f8f9fa), --nexus-card (#ffffff).
  • Typography:
    • UI Elements: Inter (Sans-Serif) for controls, menus, and labels.
    • Reading Content: Merriweather (Serif) for books and articles to ensure 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.

• 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.