SwiftUI, UIKit, WidgetKit, Expo or CSS: Which Liquid Glass Skill Fits Your Stack

Short answer: pick a Liquid Glass skill by the UI surface you ship, then by what its SKILL.md actually covers. For SwiftUI, use swiftui-liquid-glass from dpearson2699. For UIKit or WidgetKit, liquid-glass-design from affaan-m/ecc is the only one of the five we read with UIKit and WidgetKit code. For Expo, use expo-liquid-glass. For the web, bergside's glassmorphism gives design rules and no CSS, so you write the effect yourself.

We read the five most relevant SKILL.md files on GitHub on October 27, 2026, and mapped what each one actually teaches against the surfaces a team ships. Install counts below are from the Skillselion catalog as of October 23, 2026.

Which Liquid Glass skill covers which surface?

Surface	Skill	Installs	What the file covers
SwiftUI	swiftui-liquid-glass (dpearson2699)	4,128	Implement, improve and review paths, #available gate, Reduce Transparency check
SwiftUI review	swiftui-liquid-glass (dimillian)	5,471	Review checklist, .ultraThinMaterial fallback
UIKit, WidgetKit	liquid-glass-design (affaan-m/ecc)	11,888	UIGlassEffect, UIGlassContainerEffect, accented widget rendering
Expo / React Native	expo-liquid-glass (devanshudesai)	478	Four implementation paths, runtime guards, Android fallback
Web	glassmorphism (bergside)	2,877	Design-system template, WCAG 2.2 AA baseline, no CSS

Two things stand out. The skill with the most installs is also the only one of the five with UIKit and WidgetKit code. And the skill with the fewest installs has one of the longest and most careful files.

Which skill should a SwiftUI app use?

swiftui-liquid-glass by dpearson2699 on Skillselion (repo: dpearson2699/swift-ios-skills) is the most complete SwiftUI file. Beyond glassEffect and GlassEffectContainer, it covers glassEffectTransition and tells the agent to put it on the inserted or removed child, not on the container. It also lists related iOS 26 APIs (scrollEdgeEffectStyle, backgroundExtensionEffect, ToolbarSpacer) that the Dimillian file does not cover.

For a second opinion, the Dimillian SwiftUI Liquid Glass review skill (repo: Dimillian/Skills) is a 90-line file built around a decision tree: review, improve or implement. Both skills use the same name, so install one at a time.

Which skill covers UIKit and WidgetKit?

liquid-glass-design from affaan-m/ecc on Skillselion (repo: affaan-m/ECC). Its UIKit section builds a UIVisualEffectView from UIGlassEffect, groups views with UIGlassContainerEffect, sets scroll edge effects, and shows hidesSharedBackground on a bar button item. Its WidgetKit section reads widgetRenderingMode, marks accent groups with widgetAccentable(), and flags "ignoring accented rendering mode" as an anti-pattern.

If you maintain a UIKit codebase, this is the file to load. Its code samples call iOS 26 APIs directly, so add your own availability check if your deployment target is lower.

What about Liquid Glass in Expo and React Native?

This was the surprise. The catalog row for expo-liquid-glass, the Expo Liquid Glass skill (repo: devanshuDesai/agent-skills) carries a placeholder description, but the SKILL.md itself runs to about 200 lines. It gives the agent a table of four paths: expo-glass-effect, @expo/ui with SwiftUI modifiers, Expo Router native tabs, and @callstack/liquid-glass. It also warns that expo-glass-effect and @expo/ui are not reliable in Expo Go on iOS, so plan for a development build.

Its wrapper pattern (trimmed here) is the kind of thing you want an agent to copy:

if (isGlassEffectAPIAvailable()) {
  return <GlassView style={style} glassEffectStyle="regular">{children}</GlassView>;
}
if (Platform.OS === 'ios') {
  return <BlurView style={style} intensity={40} tint="dark">{children}</BlurView>;
}
return <View style={[style, { backgroundColor: 'rgba(60,60,67,0.30)' }]}>{children}</View>;

Three tiers: real glass, iOS blur, a flat surface everywhere else. It also lists AccessibilityInfo.isReduceTransparencyEnabled() as a required check before completion, and notes that native tabs syntax differs between SDK 54 and 55.

How do you get Liquid Glass on the web?

glassEffect does not exist in CSS. bergside's glassmorphism design-system skill (repo: bergside/awesome-design-skills) is a design-system template: color tokens, a font stack, WCAG 2.2 AA, and an output structure for guidelines. It contains no CSS. You write the effect yourself, and a minimal version with a fallback looks like this (our snippet, not from the skill):

.glass { background: rgb(255 255 255 / 0.85); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: rgb(255 255 255 / 0.35);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
}

For utility-class setups, the CSS and Tailwind skills hub is a useful companion to the glassmorphism rules.

How do you get Claude Code to write glass you can ship?

Install one skill for your surface, then give Claude Code your constraints up front. For a SwiftUI app:

npx skills add dpearson2699/swift-ios-skills --skill swiftui-liquid-glass

Then a prompt that names the deployment target and the surfaces:

Use the swiftui-liquid-glass skill. Deployment target is iOS 17.
Add Liquid Glass to the floating toolbar and the filter chips only.
Gate every glass call and keep a working fallback.
Do not put glass on the list rows.

When the diff lands, swap in the Dimillian skill and ask for a review against its checklist. For Expo, name the SDK version in the prompt, since the skill itself says native tabs syntax changed between versions.

Whatever the platform, test text over the real content behind the panel. Apple's Human Interface Guidelines on materials is the primary reference, and the contrast and accessibility skills on Skillselion check that text stays readable. The design review skills hub has picks for the final pass.

Where is the full list?

The catalog holds 14 skills with Liquid Glass in their name. The Liquid Glass skills hub ranks them next to the CSS glassmorphism skills, and the wider shelf is on the best frontend design skills list and in the frontend design skills category. The source page for this post is our Liquid Glass and Glassmorphism Skills for Claude Code guide.

Install counts come from the Skillselion live catalog, refreshed daily from skills.sh, GitHub and MCP registries, ranked by real installs. SKILL.md contents were read on GitHub on October 27, 2026 and can change.

Disclosure: we run Skillselion, the directory these install counts come from. More comparisons sit in every Skillselion skill guide.

Match the skill to the surface first. The install count only breaks ties.