⏳ This skill is pending AI review.

Scores will appear once the review pipeline completes.

version unknown

liquid-glass

@2dubu⭐ 19 stars

iOS 26 Liquid Glass expert. Use when user asks about Liquid Glass implementation, SwiftUI glassEffect, migration from iOS 17/18, morphing animations, GlassEffectContainer, or wants to generate glass-style UI components. Covers code generation, troubleshooting, HIG compliance, accessibility, performance optimization, and cross-platform differences.

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

—/10

// RATINGS

⭐GitHub Stars
⭐⭐ 19 on GitHubGitHub ↗

Growing

🟢ProSkills Score
—
📍

Not yet listed on ClawHub or SkillsMP

// README

Liquid Glass

A comprehensive iOS 26 Liquid Glass deep-dive toolkit for SwiftUI developers.

Built for developers who want ready-to-use answers and code generation for iOS 26 Liquid Glass.

Features

  • Complete API Reference - Glass struct, glassEffect modifier, GlassEffectContainer
  • Code Generation - Ready-to-use patterns and components
  • Migration Guide - Convert iOS 17/18 materials to Liquid Glass
  • Morphing Animations - Namespace, glassEffectID, transitions
  • System Components - Sheets, alerts, pickers, toolbars
  • Accessibility - Reduce Transparency, VoiceOver, Dynamic Type
  • Performance Optimization - Best practices and profiling tips
  • Troubleshooting - Common issues and solutions
  • Cross-Platform - iOS, macOS, watchOS, tvOS, visionOS differences
  • Backward Compatibility - Supporting iOS 17/18 alongside iOS 26

Installation

1. Add the marketplace

/plugin marketplace add 2dubu/liquid-glass

2. Install the Skill

/plugin install liquid-glass@liquid-glass

Usage

Once installed, you can ask Claude about Liquid Glass topics:

/liquid-glass How do I add a floating action button with Liquid Glass?
/liquid-glass Migrate this iOS 17 material background to iOS 26
/liquid-glass Why isn't my glass effect showing?
/liquid-glass How do I create morphing animations with glass?
/liquid-glass What's the difference between .regular and .clear glass?
/liquid-glass Review my Liquid Glass implementation for HIG compliance

Or Claude may recognize related queries and invoke the skill automatically.

Reference Documentation

API & Concepts (references/)

14 comprehensive reference files:

FileDescription
core-concepts.mdFundamental principles, navigation layer rule
glass-struct.mdGlass struct API reference
glass-effect-modifier.mdglassEffect modifier reference
glass-effect-container.mdGlassEffectContainer usage
morphing-animations.mdAnimation techniques
button-styles.mdButton style reference
system-components.mdSystem component styling
migration-guide.mdiOS 17/18 to iOS 26 migration
accessibility.mdAccessibility considerations
performance.mdPerformance optimization
best-practices.mdDesign patterns and rules
troubleshooting.mdCommon issues and fixes
backward-compatibility.mdMulti-version support
platform-differences.mdCross-platform guide

Component Implementation (components/)

10 component-specific implementation guides:

FileDescription
toolbar.mdToolbar glass styling, grouping, dynamic toolbars
tab-bar.mdTab bar glass, minimize behavior, alignment
sheet.mdSheet presentations with glass backgrounds
search.mdSearchable views with glass styling
picker.mdSegmented, menu, wheel, color pickers
scroll-edge.mdFloating headers/footers, scroll blur effects
system-alerts.mdAlerts, dialogs, menus, context menus
glass-overlap.mdOverlapping glass, zIndex, depth effects
material-hierarchy.mdultraThin, thin, regular, thick materials
animations.mdExpanding, rotating, merging animations

Quick Reference

Core API

// Basic
.glassEffect()
.glassEffect(.regular)
.glassEffect(.clear)
.glassEffect(.identity)

// With shape
.glassEffect(in: .capsule)
.glassEffect(in: .circle)

// Modifiers
.glassEffect(.regular.tint(.blue))
.glassEffect(.regular.interactive())  // iOS only

// Button styles
.buttonStyle(.glass)
.buttonStyle(.glassProminent)

// Container
GlassEffectContainer { /* glass elements */ }

// Morphing
.glassEffectID("id", in: namespace)

The Five Golden Rules

  1. Navigation Layer Only - Glass for toolbars, FABs, NOT content
  2. No Glass on Glass - Use GlassEffectContainer
  3. Don't Mix Variants - Same variant throughout
  4. Tint for Meaning - Semantic, not decorative
  5. Trust Accessibility - System handles it automatically

Requirements

  • Claude Code CLI
  • iOS 26.0+ / macOS Tahoe 26.0+ / visionOS 26.0+ project
  • Xcode 26.0+

Resources

Contributing

PRs welcome! Please ensure:

  • Code examples are tested on iOS 26.0
  • Follow existing formatting
  • Add troubleshooting entries for new edge cases
  • Update relevant reference files

License

MIT License - see LICENSE file for details

// HOW IT'S BUILT

KEY FILES

plugins/liquid-glass/skills/liquid-glass/SKILL.mdREADME.md

// REPO STATS

19 stars