Agent skill

Liquid Glass Design

by AstraFoundry in AstraFoundry/KumoApp

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

AGPL-3.0Auto-check passedMobile

Install Liquid Glass Design

skills CLI
$ npx skills add AstraFoundry/KumoApp --skill liquid-glass-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AstraFoundry/KumoApp liquid-glass-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AstraFoundry/KumoApp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/liquid-glass-design .claude/skills/liquid-glass-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
liquid-glass-design
GitHub stars
291
Used in
5 other repos
Token cost
~2.3k tokens
SKILL.md length
528 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
AGPL-3.0

At a glance

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

  • Tasks that involve iOS development
  • SKILL.md covers When to Activate, Core Pattern — SwiftUI, Core Pattern — UIKit and Core Pattern — WidgetKit, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Liquid Glass Design is an agent skill from AstraFoundry/KumoApp. iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering iOS development. It works with SwiftUI and iOS. The repository describes itself as: A calm, native macOS client for the Mihomo proxy core, built with SwiftUI and a shared agent-friendly CLI. The licence is AGPL-3.0.

When your agent uses it

  • Tasks that involve iOS development

Example prompts

  • “/liquid-glass-design”

What it can do on your machine

Read from SKILL.md and the folder at commit 990ff36. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are swift).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Liquid Glass Design loads about 2.3k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 528 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~40
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from AstraFoundry/KumoApp at commit 990ff36, republished under its AGPL-3.0 licence (© AstraFoundry). 528 words, ~2,252 tokens.

Download SKILL.mdSave it as .claude/skills/liquid-glass-design/SKILL.md (or your agent's skills folder).
name
liquid-glass-design
description
iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Liquid Glass Design System (iOS 26)

Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.

When to Activate

  • Building or updating apps for iOS 26+ with the new design language
  • Implementing glass-style buttons, cards, toolbars, or containers
  • Creating morphing transitions between glass elements
  • Applying Liquid Glass effects to widgets
  • Migrating existing blur/material effects to the new Liquid Glass API

Core Pattern — SwiftUI

Basic Glass Effect

The simplest way to add Liquid Glass to any view:

swift
Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()  // Default: regular variant, capsule shape
Customizing Shape and Tint
swift
Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))

Key customization options:

  • .regular — standard glass effect
  • .tint(Color) — add color tint for prominence
  • .interactive() — react to touch and pointer interactions
  • Shape: .capsule (default), .rect(cornerRadius:), .circle
Glass Button Styles
swift
Button("Click Me") { /* action */ }
    .buttonStyle(.glass)

Button("Important") { /* action */ }
    .buttonStyle(.glassProminent)
GlassEffectContainer for Multiple Elements

Always wrap multiple glass views in a container for performance and morphing:

swift
GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()

        Image(systemName: "eraser.fill")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()
    }
}

The spacing parameter controls merge distance — closer elements blend their glass shapes together.

Uniting Glass Effects

Combine multiple views into a single glass shape with glassEffectUnion:

swift
@Namespace private var namespace

GlassEffectContainer(spacing: 20.0) {
    HStack(spacing: 20.0) {
        ForEach(symbolSet.indices, id: \.self) { item in
            Image(systemName: symbolSet[item])
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
        }
    }
}
Morphing Transitions

Create smooth morphing when glass elements appear/disappear:

swift
@State private var isExpanded = false
@Namespace private var namespace

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .glassEffect()
            .glassEffectID("pencil", in: namespace)

        if isExpanded {
            Image(systemName: "eraser.fill")
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectID("eraser", in: namespace)
        }
    }
}

Button("Toggle") {
    withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)
Extending Horizontal Scrolling Under Sidebar

To allow horizontal scroll content to extend under a sidebar or inspector, ensure the ScrollView content reaches the leading/trailing edges of the container. The system automatically handles the under-sidebar scrolling behavior when the layout extends to the edges — no additional modifier is needed.

Core Pattern — UIKit

Basic UIGlassEffect
swift
let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true

let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true

view.addSubview(visualEffectView)
NSLayoutConstraint.activate([
    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    visualEffectView.widthAnchor.constraint(equalToConstant: 200),
    visualEffectView.heightAnchor.constraint(equalToConstant: 120)
])

// Add content to contentView
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])
UIGlassContainerEffect for Multiple Elements
swift
let containerEffect = UIGlassContainerEffect()
containerEffect.spacing = 40.0

let containerView = UIVisualEffectView(effect: containerEffect)

let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
let secondGlass = UIVisualEffectView(effect: UIGlassEffect())

containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)
Scroll Edge Effects
swift
scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true
Toolbar Glass Integration
swift
let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true  // Opt out of shared glass background

Core Pattern — WidgetKit

Rendering Mode Detection
swift
struct MyWidgetView: View {
    @Environment(\.widgetRenderingMode) var renderingMode

    var body: some View {
        if renderingMode == .accented {
            // Tinted mode: white-tinted, themed glass background
        } else {
            // Full color mode: standard appearance
        }
    }
}
Accent Groups for Visual Hierarchy
swift
HStack {
    VStack(alignment: .leading) {
        Text("Title")
            .widgetAccentable()  // Accent group
        Text("Subtitle")
            // Primary group (default)
    }
    Image(systemName: "star.fill")
        .widgetAccentable()  // Accent group
}
Image Rendering in Accented Mode
swift
Image("myImage")
    .widgetAccentedRenderingMode(.monochrome)
Container Background
swift
VStack { /* content */ }
    .containerBackground(for: .widget) {
        Color.blue.opacity(0.2)
    }

Key Design Decisions

DecisionRationale
GlassEffectContainer wrappingPerformance optimization, enables morphing between glass elements
spacing parameterControls merge distance — fine-tune how close elements must be to blend
@Namespace + glassEffectIDEnables smooth morphing transitions on view hierarchy changes
interactive() modifierExplicit opt-in for touch/pointer reactions — not all glass should respond
UIGlassContainerEffect in UIKitSame container pattern as SwiftUI for consistency
Accented rendering mode in widgetsSystem applies tinted glass when user selects tinted Home Screen
Show full SKILL.md (190 more words)Show less

Best Practices

  • Always use GlassEffectContainer when applying glass to multiple sibling views — it enables morphing and improves rendering performance
  • Apply .glassEffect() after other appearance modifiers (frame, font, padding)
  • Use .interactive() only on elements that respond to user interaction (buttons, toggleable items)
  • Choose spacing carefully in containers to control when glass effects merge
  • Use withAnimation when changing view hierarchies to enable smooth morphing transitions
  • Test across appearances — light mode, dark mode, and accented/tinted modes
  • Ensure accessibility contrast — text on glass must remain readable

Anti-Patterns to Avoid

  • Using multiple standalone .glassEffect() views without a GlassEffectContainer
  • Nesting too many glass effects — degrades performance and visual clarity
  • Applying glass to every view — reserve for interactive elements, toolbars, and cards
  • Forgetting clipsToBounds = true in UIKit when using corner radii
  • Ignoring accented rendering mode in widgets — breaks tinted Home Screen appearance
  • Using opaque backgrounds behind glass — defeats the translucency effect

When to Use

  • Navigation bars, toolbars, and tab bars with the new iOS 26 design
  • Floating action buttons and card-style containers
  • Interactive controls that need visual depth and touch feedback
  • Widgets that should integrate with the system's Liquid Glass appearance
  • Morphing transitions between related UI states

© AstraFoundry, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/liquid-glass-design of AstraFoundry/KumoApp.

Open the folder on GitHubat commit 990ff36

Used in 5 other repositories

We found 12 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in AstraFoundry/KumoApp, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Liquid Glass Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Liquid Glass Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Liquid Glass Design this skillAstraFoundry/KumoApp2915 repos~2.3kAutomated safety check: PassAGPL-3.0
Update Swiftui APIsAvdLee/SwiftUI-Agent-Skill3.7k—~1.2kAutomated safety check: PassMIT
Swiftui Liquid Glassharperreed/dotfiles3348 repos~941Automated safety check: PassNone
Swiftui Expert Skillomarshahine/HomeClaw1764 repos~2.8kAutomated safety check: PassMIT
Hig Project Contextraintree-technology/hig-doctor1445 repos~1.2kAutomated safety check: PassMIT
Swiftui Expert Skillilyas-hallak/romm-ios-app1731 repos~2.9kAutomated safety check: PassMIT

Similar skills

  • Update Swiftui APIs

    AvdLee/SwiftUI-Agent-Skill

    Scan Apple's SwiftUI documentation for deprecated APIs and update the SwiftUI Expert Skill with modern replacements.

    3.7k GitHub stars~1.2k tokensUpdated 5 days ago
    MobileAuto-check passed
  • Swiftui Liquid Glass

    harperreed/dotfiles

    Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API.

    334 GitHub starsUsed in 8 repos~941 tokens
    MobileAuto-check passed
  • Swiftui Expert Skill

    omarshahine/HomeClaw

    A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state management, view composition, performance, Liquid Glass adoption, or Instruments .trace…

    176 GitHub starsUsed in 4 repos~2.8k tokens
    MobileAuto-check passed
  • Hig Project Context

    raintree-technology/hig-doctor

    Create or update a shared Apple design context document that other HIG skills use to tailor guidance.

    144 GitHub starsUsed in 5 repos~1.2k tokens
    MobileAuto-check passed
  • Swiftui Expert Skill

    ilyas-hallak/romm-ios-app

    Write, review, or improve SwiftUI code following best practices for state management, view composition, performance, and iOS 26+ Liquid Glass adoption.

    173 GitHub starsUsed in 1 repo~2.9k tokens
    MobileAuto-check passed
  • Live-Device iOS QA

    garrytan/gstack

    Tests a SwiftUI app on a real iPhone connected by USB, reading the Swift source and then looping through screenshot, analysis and action to find bugs.

    136k GitHub stars~11k tokensUpdated today
    MobileAuto-check: notes

More from AstraFoundry/KumoApp

  • Swiftui Animation

    AstraFoundry/KumoApp

    Implement, review, or improve SwiftUI animations and transitions.

    291 GitHub stars~4.1k tokensUpdated 4 mo ago
    Auto-check passed
  • Add Component

    AstraFoundry/KumoApp

    Add a SwiftUI component from ShipSwift recipes. An agent skill from AstraFoundry/KumoApp.

    291 GitHub stars~737 tokensUpdated 4 mo ago
    Auto-check passed
  • Build Feature

    AstraFoundry/KumoApp

    Build an iOS feature using ShipSwift component recipes. An agent skill from AstraFoundry/KumoApp.

    291 GitHub stars~632 tokensUpdated 4 mo ago
    Auto-check passed
  • Explore Recipes

    AstraFoundry/KumoApp

    Explore and browse available ShipSwift recipes. An agent skill from AstraFoundry/KumoApp.

    291 GitHub stars~621 tokensUpdated 4 mo ago
    Auto-check passed
  • Kumo CLI

    AstraFoundry/KumoApp

    Drive Kumo from coding agents and automation through the kumo command-line interface.

    291 GitHub stars~758 tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Liquid Glass Design

What does Liquid Glass Design do?

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Liquid Glass Design is an agent skill from AstraFoundry/KumoApp. iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

When should I use Liquid Glass Design?

Liquid Glass Design fits situations like: tasks that involve iOS development.

How do I install Liquid Glass Design in Claude Code?

Run `npx skills add AstraFoundry/KumoApp --skill liquid-glass-design -a claude-code`. Or copy the skill folder (.agents/skills/liquid-glass-design in AstraFoundry/KumoApp) into .claude/skills/liquid-glass-design in your project. Claude Code loads it when a task matches its description.

How do I install Liquid Glass Design in Codex?

Run `npx skills add AstraFoundry/KumoApp --skill liquid-glass-design -a codex`. Or copy the skill folder (.agents/skills/liquid-glass-design in AstraFoundry/KumoApp) into .agents/skills/liquid-glass-design in your project. Codex loads it when a task matches its description.

Can I use Liquid Glass Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AstraFoundry/KumoApp --skill liquid-glass-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/liquid-glass-design, .gemini/skills/liquid-glass-design, .github/skills/liquid-glass-design and .opencode/skills/liquid-glass-design in your project.

What does Liquid Glass Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Liquid Glass Design is instructions for the agent only.

Does Liquid Glass Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Liquid Glass Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Liquid Glass Design use?

Liquid Glass Design is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Liquid Glass Design use?

About 2.3k tokens (SKILL.md is roughly 9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Liquid Glass Design?

Skills that share tags, products or a category with Liquid Glass Design: Update Swiftui APIs (AvdLee/SwiftUI-Agent-Skill, 3.7k stars), Swiftui Liquid Glass (harperreed/dotfiles, 334 stars), Swiftui Expert Skill (omarshahine/HomeClaw, 176 stars) and Hig Project Context (raintree-technology/hig-doctor, 144 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Liquid Glass Design?

AstraFoundry (a GitHub organization) maintains it in AstraFoundry/KumoApp, which has 291 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on June 5, 2026.

Source: AstraFoundry/KumoApp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.