Use when:
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionaxiom-liquid-glass-refExecute the skills CLI command in your project's root directory to begin installation:
Fetches axiom-liquid-glass-ref from charleswiltgen/axiom and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate axiom-liquid-glass-ref. Access via /axiom-liquid-glass-ref in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
2
total installs
2
this week
767
GitHub stars
0
upvotes
Run in your terminal
2
installs
2
this week
767
stars
Use when:
axiom-liquid-glass for implementing the Liquid Glass material itself and design review pressure scenariosaxiom-swiftui-performance for profiling Liquid Glass rendering performanceaxiom-accessibility-diag for accessibility testingAdopting Liquid Glass doesn't mean reinventing your app from the ground up. Start by building your app in the latest version of Xcode to see the changes. If your app uses standard components from SwiftUI, UIKit, or AppKit, your interface picks up the latest look and feel automatically on the latest platform releases.
Standard components from SwiftUI, UIKit, and AppKit automatically adopt Liquid Glass with minimal code changes.
// ✅ Standard components get Liquid Glass automatically
NavigationView {
List(items) { item in
Text(item.name)
}
.toolbar {
ToolbarItem {
Button("Add") { }
}
}
}
// Recompile with Xcode 26 → Liquid Glass applied
// ❌ Custom backgrounds interfere with Liquid Glass
NavigationView { }
.background(Color.blue.opacity(0.5)) // Breaks Liquid Glass effects
.toolbar {
ToolbarItem { }
.background(LinearGradient(...)) // Overlays system effects
}
Solution Remove custom effects and let the system determine background appearance.
Liquid Glass adapts to: Reduce Transparency (frostier), Increase Contrast (black/white borders), Reduce Motion (no elastic animations). Verify legibility maintained under each setting and that custom elements provide fallback experiences. For detailed accessibility testing workflows, see axiom-liquid-glass discipline skill.
app.launchArguments += ["-UIAccessibilityIsReduceTransparencyEnabled", "1",
"-UIAccessibilityButtonShapesEnabled", "1", "-UIAccessibilityIsReduceMotionEnabled", "1"]
Liquid Glass brings attention to underlying content. Overusing it on multiple custom controls distracts from content. Apply .glassEffect() only to important functional elements (navigation, primary actions) — not content cards, list rows, or decorative elements.
// ✅ Content layer: no glass. Navigation layer: glass on functional buttons only.
ZStack {
ScrollView { ForEach(articles) { ArticleCard($0) } }
VStack {
Spacer()
HStack {
Button("Filter") { }.glassEffect()
Spacer()
Button("Sort") { }.glassEffect()
}.padding()
}
}
App icons now take on a design that's dynamic and expressive. Updates to the icon grid result in standardized iconography that's visually consistent across devices. App icons contain layers that dynamically respond to lighting and visual effects.
Layered icons: iOS/iPadOS 26+, macOS Tahoe+, watchOS (circular mask). Appearance variants: default (light), dark, clear, tinted (Home Screen personalization).
Design clean, simplified layers with solid fills and semi-transparent overlays. Let the system handle effects (reflection, refraction, shadow, blur, masking). Do NOT bake in pre-applied blur, manual shadows, hardcoded highlights, or fixed masking.
Three layers: foreground (primary elements), middle (supporting), background (foundation). Export each layer as PNG or SVG at @1x/@2x/@3x with transparency preserved.
Included in Xcode 26+ (also standalone from developer.apple.com/design/resources). Drag and drop layers, add optional background, adjust attributes (opacity, position, scale), preview with system effects and all appearance variants, export directly to asset catalog.
Grids: iOS/iPadOS/macOS use rounded rectangle mask; watchOS uses circular mask. Download from developer.apple.com/design/resources. Keep elements centered to avoid clipping, test at all sizes, verify all appearance variants look intentional.
Controls have refreshed look across platforms and come to life during interaction. Knobs transform into Liquid Glass during interaction, buttons fluidly morph into menus/popovers. Hardware shape informs curvature of controls (rounder forms nestle into corners).
Bordered buttons default to capsule shape (mini/small/medium on macOS retain rounded-rectangle). Knobs transform into glass during interaction; buttons morph into menus/popovers. New controlSize(.extraLarge) option; heights slightly taller on macOS. Use controlSize(.small) for backward-compatible high-density layouts. Standard controls adopt automatically — remove hard-coded .frame() dimensions.
Audit sliders, toggles, buttons, steppers, pickers, segmented controls, and progress indicators. Verify appearance matches interface, spacing looks natural, controls aren't cropped, and interaction feedback is responsive.
Use system colors (.tint(.blue), .accentColor) — they adapt to light/dark contexts automatically. Avoid hard-coded RGB values (Color(red:green:blue:)) which may not adapt. Test in both modes and verify WCAG AA contrast ratios.
Liquid Glass elements need breathing room. Use default HStack spacing (not spacing: 4) for glass buttons. Overcrowding or layering glass-on-glass creates visual noise. Use GlassEffectContainer when multiple glass elements must be close together.
Use .scrollEdgeEffectStyle(.hard, for: .top) to obscure content scrolling beneath controls. System bars (toolbars, navigation bars, tab bars) adopt this automatically; custom bars need it explicitly.
Use containerRelativeShape() to align control curvature with containers — creates concentric visual continuity from controls to sheets to windows to display.
Use built-in styles instead of custom glass effects: .borderedProminent (primary, with .tint()), .bordered (secondary), .plain + .glassEffect() (tertiary/custom). Each adapts to Liquid Glass automatically.
Liquid Glass applies to topmost layer where you define navigation. Key navigation elements like tab bars and sidebars float in this Liquid Glass layer to help people focus on underlying content.
Maintain two distinct layers: Navigation (tab bar, sidebar, toolbar — Liquid Glass) floats above Content (articles, photos, data — no glass). Do NOT apply .glassEffect() to content items like list rows — glass on the content layer blurs the boundary and competes with navigation.
Use .tabViewStyle(.sidebarAdaptable) (iOS 26) to let the tab bar adapt to sidebar on iPad/macOS while remaining a tab bar on iPhone. Transitions fluidly with adaptive window sizes.
TabView {
ContentView().tabItem { Label("Home", systemImage: "house") }
SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
}
.tabViewStyle(.sidebarAdaptable)
Use NavigationSplitView with sidebar, content, and detail columns. Liquid Glass applies automatically to sidebars and inspectors. iOS adapts column visibility; iPadOS/macOS shows all columns on large screens.
NavigationSplitView {
List(folders, selection: $selectedFolder) { Label($0.name, systemImage: $0.icon) }
.navigationTitle("Folders")
} content: {
List(items, selection: $selectedItem) { ItemRow($0) }
} detail: {
InspectorView(item: selectedItem)
}
Verify content peeks through appropriately beneath sidebars/inspectors. Use .safeAreaInset(edge:) when content needs to account for sidebar/inspector space.
When glass extends edge-to-edge via .ignoresSafeArea(), use .safeAreaPadding() (not .padding()) on the content layer to respect device safe areas (notch, Dynamic Island, home indicator):
// ❌ .padding(.horizontal, 20) — doesn't account for safe areas
// ✅ .safeAreaPadding(.horizontal, 20) — 20pt beyond safe areas
Applies to: full-screen sheets with materials, edge-to-edge toolbars, floating panels, custom glass navigation bars. Requires iOS 17+. See axiom-swiftui-layout-ref for full .safeAreaPadding() vs .padding() guidance.
Verify: content visible beneath sidebar/inspector, not cropped, peek-through looks intentional, properly inset from notch/Dynamic Island/home indicator.
Mirrors and blurs content under sidebar/inspector for an immersive edge-to-edge feel, without actually scrolling content there. Best for hero images, photo galleries, and media-rich split views.
NavigationSplitView {
SidebarView()
} detail: {
DetailView()
.backgroundExtensionEffect()
}
Tab bars can recede when scrolling via .tabBarMinimizeBehavior() (iOS 26). Options: .onScrollDown (recommended for reading/media apps), .onScrollUp, .automatic, .never. Tab bar expands when scrolling in opposite direction.
Menus have refreshed look across platforms. They adopt Liquid Glass, and menu items for common actions use icons to help people quickly scan and identify actions. iPadOS now has menu bar for faster access to common commands.
Menus now have consistent layout across iOS and macOS — icons on leading edge, same API (Label or standard control initializers) produces the same visual result on both platforms.
// ✅ Standard selectors get icons automatically
MenuImplementation Guide
Prerequisites
- ›Claude Desktop or compatible AI client with skill support
- ›Clear understanding of task or problem to solve
- ›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
- 1Install skill using provided installation command
- 2Test with simple use case relevant to your work
- 3Evaluate output quality and relevance
- 4Iterate on prompts to improve results
- 5Integrate into regular workflow if valuable
Common Pitfalls
- ⚠Expecting perfect results without iteration
- ⚠Not providing enough context in prompts
- ⚠Using skill for tasks outside its intended scope
- ⚠Accepting outputs without review and validation
Best Practices
✓ Do
- +Start with clear, specific prompts
- +Provide relevant context and constraints
- +Review and refine all outputs before using
- +Iterate to improve output quality
- +Document successful prompt patterns
✗ Don't
- −Don't use without understanding skill limitations
- −Don't skip validation of outputs
- −Don't share sensitive information in prompts
- −Don't expect skill to replace human judgment
💡 Pro Tips
- ★Be specific about desired format and style
- ★Ask for multiple options to choose from
- ★Request explanations to understand reasoning
- ★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
- 1Familiarize yourself with skill capabilities and limitations
- 2Start with low-risk, non-critical tasks
- 3Progress to more complex and valuable use cases
- 4Build expertise through regular use and experimentation
Related Skills
frontend-design
633anthropics/claude-code
Frontendsame categoryui-animation
230mblode/agent-skills
Frontendsame categorypremium-frontend-ui
228github/awesome-copilot
Frontendsame categoryhigh-end-visual-design
183leonxlnx/taste-skill
Frontendsame categoryantigravity-design-expert
181sickn33/antigravity-awesome-skills
Frontendsame categoryinterior-design-expert
133erichowens/some_claude_skills
Frontendsame categoryReviews
4.4★★★★★34 reviews- JJames Brown★★★★★Dec 16, 2024
axiom-liquid-glass-ref is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- AAmina Diallo★★★★★Dec 12, 2024
axiom-liquid-glass-ref fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- CChen Shah★★★★★Nov 7, 2024
Solid pick for teams standardizing on skills: axiom-liquid-glass-ref is focused, and the summary matches what you get after install.
- AAmina Huang★★★★★Nov 3, 2024
We added axiom-liquid-glass-ref from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- CChen Tandon★★★★★Oct 26, 2024
We added axiom-liquid-glass-ref from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- TTariq Gonzalez★★★★★Oct 22, 2024
Solid pick for teams standardizing on skills: axiom-liquid-glass-ref is focused, and the summary matches what you get after install.
- RRahul Santra★★★★★Sep 25, 2024
Useful defaults in axiom-liquid-glass-ref — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- NNikhil Patel★★★★★Sep 5, 2024
axiom-liquid-glass-ref reduced setup friction for our internal harness; good balance of opinion and flexibility.
- YYash Thakker★★★★★Sep 1, 2024
Keeps context tight: axiom-liquid-glass-ref is the kind of skill you can hand to a new teammate without a long onboarding doc.
- TTariq Ramirez★★★★★Aug 24, 2024
I recommend axiom-liquid-glass-ref for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
showing 1-10 of 34
1 / 4Discussion
Comments — not star reviews- No comments yet — start the thread.