<aside> 📌

Claude Code project skill for macOS glass UI: Liquid Glass rules from Apple's HIG and WWDC25, an Electron vibrancy recipe, CSS material tokens, a layer map for a chat app, the macOS icon template, and Apple-silicon packaging. Source of truth: .claude/skills/macos-glass-ui/SKILL.md in the chatgptclone-opencode repo. The attached file below is byte-identical.

</aside>

Source file

[SKILL.md (exact source)](attachment:e80c8e5e-d850-4994-a94d-a5e9a1b50aad:SKILL.md)

SKILL.md (exact source)

How to use

Context: macOS 27 Golden Gate

Golden Gate (WWDC, 2026-06-08) keeps Liquid Glass and refines it: a system-wide glass opacity slider (clear to tinted), a tighter window corner radius, sidebars that run to the window edges, a consistent toolbar across the top, and Apple silicon only.

Rules

  1. Glass never sits on glass. One material per stack; elements on top of glass use fills, transparency and vibrancy.
  2. Sidebars are a floating glass pane. Don't add an extra blur layer inside a sidebar; it blocks the system material.
  3. Menus and sidebars adapt to what's behind them but follow the system appearance (no light/dark flipping of their own).
  4. Prefer the system material for window-level surfaces; it honours Reduce Transparency, Increase Contrast and the opacity slider. CSS backdrop-filter is for in-page overlays only.
  5. Menu items favour symbol icons in one aligned column per section.
  6. Accessibility: prefers-reduced-transparency gives opaque fills; prefers-contrast: more gives solid hairlines.
  7. Inactive windows look inactive: the material follows the window state.

Electron recipe (Apple silicon)

new BrowserWindow({
  titleBarStyle: 'hiddenInset',
  trafficLightPosition: { x: 16, y: 14 },
  vibrancy: 'sidebar',
  visualEffectState: 'followWindow',
  backgroundColor: '#00000000',
  webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true },
});