Apple Liquid Glass

Apple's Liquid Glass design language (iOS 26 / macOS 26 HIG) made buildable on any platform: the content/chrome two-layer model, regular vs clear glass, real refraction (content bending at the rim), the rim light, type scales, system colours, component shapes, and Reduce Motion/Transparency/Increase Contrast fallbacks. Ships a CSS token file and a refraction script for the web, plus routes for SwiftUI/UIKit, Android Compose (Haze), Flutter, Electron, Tauri, Windows and Linux. Use when building or reviewing any UI that should look Apple-made or "liquid glass": "iOS style", "macOS style", "Liqui

11 stars 2 forksMobile Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add xenitV1/liquid-glass-skill --skill apple-liquid-glass

Manual install

git clone --depth 1 https://github.com/xenitV1/liquid-glass-skill.git /tmp/liquid-glass-skill
mkdir -p ~/.claude/skills
cp -r /tmp/liquid-glass-skill/. ~/.claude/skills/apple-liquid-glass

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Apple Liquid Glass — the design language, on any platform

Scope: any interface that should carry Apple's Liquid Glass look — a web page,
a web app, an Electron or Tauri desktop app, an Android or Flutter app, or a
native Apple app. The design rules below are the same everywhere; only the way
you get the backdrop, the blur and the bend differs. Pick the route first:

| Building for | Route |
|---|---|
| Web, Electron, Tauri, WebView | `assets/tokens.css` + `assets/refraction.js` (this file and the references) |
| iOS, iPadOS, macOS 26+ native | the system material: SwiftUI `glassEffect`, UIKit `UIGlassEffect` — never a fake |
| Android (Compose) | Haze `haze-glass` recipe |
| Flutter | `BackdropFilter` + `ImageFilter.shader` |
| Windows / Linux native | draw it in-app; window materials (Mica, Acrylic) are not Liquid Glass |

Per-platform code, version limits and fallbacks: `references/platforms.md`.
For app flows, navigation and screen specs use `mobile-ux-designer`.

This skill exists so you never have to re-derive Apple's design language from
scratch. Everything here was read off Apple's own Human Interface Guidelines and
its figures, not from memory or from blog posts about Apple. Where Apple does not
actually state something, this skill says so rather than inventing a rule —
that honesty is the point, because most "Apple-style" work fails by confidently
applying invented rules.

## The one idea everything else follows from

Read the full skill on GitHub

Details

Skill name: apple-liquid-glass
Repository: xenitV1/liquid-glass-skill
License: MIT
Repo updated: 12 October 2026

FAQ

What does the Apple Liquid Glass skill do?

How do I install the Apple Liquid Glass skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add xenitV1/liquid-glass-skill --skill apple-liquid-glass. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Apple Liquid Glass popular?

It lives in xenitV1/liquid-glass-skill, which has 11 GitHub stars and 2 forks.

Related skills

IOS Trace

kmgcc/iOS-Trace

Agent-native runbook for evidence-based profiling and optimization of native iOS and iPadOS apps with xctrace and Xcode Instruments on physical devices or simulators. Use for CPU or battery use, memory growth or Jetsam, UI hitches, slow launch, concurrency stalls, audio glitches, or network activity. Choose instruments and workload reproduction to fit the issue; bundled scripts are optional helpers.

Mobile Development

Material Design 3

gdlbo/material-skill

Design, implement, or review Material 3 and Material 3 Expressive interfaces for Android Compose, Android Views, Wear OS, and the web. Use for Material Design, M3, Material You, adaptive Material layouts, Material-focused Android UI modernization, or Material web component work; do not apply it to a non-Material design unless the user asks to adopt Material

Mobile Development

Android Performance Skill

avinashbest/android-performance-skill

Expert-level Android performance optimization skill. Use this skill whenever the user asks about anything related to Android app performance — including but not limited to: ANRs (Application Not Responding errors), crashes (NullPointerException, OOM, fatal exceptions), app startup time (cold start, warm start, hot start), UI jank or frame drops, memory leaks, battery drain, slow network calls, database/SQLite performance, overdraw, ProGuard/R8, Doze mode, WorkManager, RecyclerView performance, Bitmap/image loading, threading/coroutines, profiling with Android Studio, Perfetto, or Systrace. Tri

Mobile Development

Xml to Compose

singhsume123/xml-to-compose-skill

Convert Android XML layouts to Jetpack Compose. Use when asked to migrate XML layouts, convert views to composables, or help with Compose migration. Handles layouts, widgets, attributes, styles, and resource references.

Mobile Development

Anti Crack

sundaygod1207/anti-crack-skill

Anti-crack audit for client software. 防破解安全审计——保护客户端软件不被盗版、逆向、破解。覆盖 Electron/iOS/Android/Flutter/Go/Rust/C++/.NET(WPF/WinForms)/CLI/游戏等客户端平台，含联网通信和服务端配合防御，7大通用维度 + 10大平台专项。

Mobile Development

App Store Review

JustinPerea/app-store-review-skill

Pre-submission review for iOS apps targeting the Apple App Store. Scans your Xcode project for common rejection reasons — missing privacy strings, icon issues, entitlement mismatches, missing privacy manifests, account deletion requirements, Sign in with Apple, and more. Use this skill whenever the user wants to check their iOS app before submitting to the App Store, asks about App Store rejection reasons, wants to validate their Xcode project configuration, or mentions anything about App Store review, TestFlight submission, or app approval. Also use when the user mentions Info.plist privacy k

Mobile Development

Browse the most popular Claude skills, all mobile development skills, or write your own with the skills generator.