Electron Desktop UI Patterns

Quick Guide: Use titleBarStyle: 'hidden' for custom title bars with native traffic lights on macOS, combined with titleBarOverlay for Windows/Linux window controls. Mark draggable regions with app-region: drag in CSS and exclude interactive elements with app-region: no-drag. Keep a module-level reference to Tray objects (garbage collection silently destroys the icon). Use vibrancy for macOS translucency effects and backgroundMaterial for Windows 11 Mica/Acrylic. Persist window bounds manually with getBounds()/setBounds() on the close event.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST keep a module-level reference to Tray objects -- garbage collection silently destroys the tray icon with no error)

(You MUST use app-region: no-drag on ALL interactive elements (buttons, inputs, links) inside a drag region -- draggable areas swallow all pointer events)

(You MUST add user-select: none to draggable title bar regions -- dragging conflicts with text selection)

(You MUST NOT use transparent: true with backgroundMaterial on Windows -- set backgroundColor: '#00000000' instead to allow the DWM material to show through)