liquid-glass

liquid-glass is a skill for Codex from fanfan-de/anybox. It costs 32 tokens per session (1,826 once invoked), scanned A, a copy of liquid-glass, MIT.

A workflow for implementing and reviewing Liquid Glass styling in macOS SwiftUI interfaces. Liquid Glass is Apple’s translucent, adaptive visual treatment for app surfaces and controls.

In plain words
What is it for?
Use it when updating toolbars, sidebars, sheets, search, navigation layouts, floating controls, or other SwiftUI surfaces to use system glass appropriately.
Why use it?
It helps keep the interface aligned with macOS system behavior and avoids layers, backgrounds, or custom chrome that can hide or interfere with system glass effects.

Skill for Codex

Written for Codex: agents/openai.yaml present.

Good fit Use it when updating toolbars, sidebars, sheets, search, navigation layouts, floating controls, or other SwiftUI surfaces to use system glass appropriately.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/fanfan-de/anybox/liquid-glass
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add fanfan-de/anybox --skill liquid-glass
Clone the repo
git clone --depth 1 https://github.com/fanfan-de/anybox

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for liquid-glass

README.md
[![agentmods](https://agentmods.dev/badge/skills/fanfan-de/anybox/liquid-glass/github.svg)](https://agentmods.dev/skills/fanfan-de/anybox/liquid-glass)
Your own site
<a href="https://agentmods.dev/skills/fanfan-de/anybox/liquid-glass"><img src="https://agentmods.dev/badge/skills/fanfan-de/anybox/liquid-glass/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for liquid-glass

Your own site · 80×15
<a href="https://agentmods.dev/skills/fanfan-de/anybox/liquid-glass"><img src="https://agentmods.dev/badge/skills/fanfan-de/anybox/liquid-glass.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 32 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,826 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 94% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00032 $0.01826
Opus 5 $0.00016 $0.00913
Sonnet 5 $0.00006 $0.00365
Haiku 4.5 $0.00003 $0.00183

Measured 11d ago against content hash b2bbb5ea8a62, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

liquid-glass scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

94% identical to liquid-glass — 2 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

plugins/Anybox-Plugins/build-macos-apps/skills/liquid-glass/SKILL.md · 171 lines

How it starts

The opening of the file, as written. The whole thing — 171 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Liquid Glass

Overview

Use this skill to bring a macOS SwiftUI app into the modern macOS design system with the least custom chrome possible. Start with standard app structure, toolbars, search placement, sheets, and controls, then add custom Liquid Glass only where the app needs a distinctive surface.

Prefer system-provided glass and adaptive materials over bespoke blur, opaque backgrounds, or custom toolbar/sidebar skins. Audit existing UI for extra fills, scrims, and clipping before adding more effects.

Workflow

  1. Read the relevant scene or root view and identify the structural pattern: NavigationSplitView, TabView, sheet presentation, detail/inspector layout, toolbar, or custom floating controls.
  2. Remove custom backgrounds or darkening layers behind system sheets, sidebars, and toolbars unless the product explicitly needs them. These can obscure Liquid Glass and interfere with the automatic scroll-edge effect.
  3. Update standard SwiftUI structure and controls first.
  4. Add custom glassEffect surfaces only for app-specific UI that standard controls do not cover.
  5. Validate that glass grouping, transitions, icon treatment, and foreground activation are visually coherent and still usable with pointer and keyboard.
  6. If the UI change also affects launch behavior for a SwiftPM GUI app, use build-run-debug so the app runs as a foreground .app bundle rather than as a raw executable.

App Structure

  • Prefer NavigationSplitView for hierarchy-driven macOS layouts. Let the sidebar use the system Liquid Glass material instead of painting over it.
  • For hero artwork or large media adjacent to a floating sidebar, use backgroundExtensionEffect so the visual can extend beyond the safe area without clipping the subject.
  • Keep inspectors visually associated with the current selection and avoid giving them a heavier custom background than the content they inspect.
  • If the app uses tabs, keep TabView for persistent top-level sections and preserve each tab's local navigation state.
  • Do not force iPhone-only tab bar minimize/accessory behavior onto a Mac app. On macOS, prefer a conventional top toolbar and native tab/search placement.
  • If a sheet already uses presentationBackground purely to imitate frosted material, consider removing it and letting the system's new material render.
  • For sheet transitions that should visually originate from a toolbar button, make the presenting item the source of a navigation zoom transition and mark the sheet content as the destination.

Read the full file on GitHub · 171 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 171 lines · 32 tokens per session scan A b2bbb5ea8a62

Subscribe to this mod's changes

liquid-glass is a skill published in the GitHub repository fanfan-de/anybox (57 stars, last pushed 28d ago), licensed MIT. It adds 32 tokens to every session and 1,826 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 94% identical to liquid-glass, differing in 2 lines, and is treated as a copy.

Related

Other skills, from other repositories

expo-design-system

Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when…

expo/skills · 201 tokens

flutter-build-responsive-layout

Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/agent-plugins · 51 tokens

display-glasses-with-jetpack-compose-glimmer

Provides guidelines for developing projected Android XR apps for display glasses using the Jetpack Compose Glimmer UI toolkit. This skill covers foundational Glimmer design principles, workflows for implementing Jetpack Compose Glimmer, and interaction models for the glasses form factor. Use this skill to build an…

android/skills · 91 tokens

omh-apple-design

This is a Hermes-native apple-design workflow skill.

rlaope/oh-my-hermes · 73 tokens

axiom-audit-liquid-glass

Use when the user mentions Liquid Glass review, iOS 26 UI updates, toolbar improvements, or visual effect migration.

CharlesWiltgen/Axiom · 32 tokens

axiom-audit-ux-flow

Use when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app.

CharlesWiltgen/Axiom · 43 tokens