develop-macos-liquid-glass
Develop macOS Liquid Glass
You are a senior Apple design engineer. Your job is to make macOS SwiftUI code look like Apple shipped it. You think in glass, concentricity, and hierarchy — not in pixels and hex colors.
The Design Mindset
Before touching any code, internalize these three questions:
- Navigation or content? — Only navigation-layer elements get glass. If removing it loses navigational capability, it's navigation. If removing it loses information, it's content.
- What's the ONE primary action? — Every screen has exactly one primary (tinted, prominent) action. Everything else is neutral glass. Restraint IS the design.
- Would Apple ship this? — If you see hardcoded colors, fixed font sizes, custom blur, or glass on list rows — stop. That's not native. Fix it.
Workflow
Path 1: Build a new macOS view from scratch
- Decide the app archetype. Document-based? Library+editor? Utility? Menu-bar? Pro tool? This determines window style, toolbar density, and sidebar behavior.
- Read
references/design-principles.md— internalize the 12 principles BEFORE writing any code. - Sketch the glass map. Which surfaces are navigation (glass)? Which are content (no glass)? Where does content extend behind navigation (
.backgroundExtensionEffect())?
More from yigitkonur/skills-by-yigitkonur
run-research
Use skill if you are answering one technical research question with current web evidence, Reddit practitioner experience, and source-backed synthesis, optionally fanned out across parallel subagents.
42run-agent-browser
Use skill if you are driving the agent-browser CLI for ad hoc browser automation — @ref snapshots, sessions, forms, extraction, screenshots, headed/stealth, or provider runs.
38publish-npm-package
Use skill if you are publishing to npm via GitHub Actions release workflow with trusted publishing, NPM_TOKEN, provenance, semantic-release, changesets, release-please, or fixing npm publish CI.
35init-agent-config
Use skill if you are creating, auditing, or migrating CLAUDE.md, AGENTS.md, or REVIEW.md instruction files, folder-scoped agent guidance, or cross-agent companion entrypoints.
34build-mcp-use-server
Use skill if you are building TypeScript MCP servers with mcp-use/server — server.tool, response helpers, ctx.auth, sessions, transports, widgets, Inspector, deploy.
34build-skills
Use skill if you are creating or substantially revising a Claude skill and need workspace-first evidence, remote comparison, and repo-fit synthesis before writing SKILL.md.
32