axiom-liquid-glass_skill

This skill helps you implement, review, and troubleshoot Liquid Glass to ensure legible, adaptive, high-performance UI across Apple platforms.
  • TypeScript

470

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill charleswiltgen/axiom --skill axiom-liquid-glass

  • SKILL.md19.7 KB

Overview

This skill helps developers implement, review, and debug Liquid Glass material across modern xOS apps. It combines WWDC 2025 design principles, API patterns, performance guidance, and a professional framework for defending design decisions during reviews. Use it to ensure legibility, accessibility, and efficient adoption of Regular and Clear variants.

How this skill works

The skill inspects use of Liquid Glass in UI layers, checks variant selection (Regular vs Clear), and evaluates layering, tinting, and scroll-edge behavior. It provides concrete API examples, performance optimizations, accessibility checks, and a review checklist. It also supplies scripts and talking points to push back on risky design requests while offering compromise paths.

When to use it

  • When implementing Liquid Glass effects or migrating standard controls
  • During code or design reviews to validate variant and layering choices
  • When debugging visual artifacts like improper lensing or tinting
  • To optimize performance and flatten heavy view hierarchies
  • When preparing accessibility and cross-mode testing (contrast, motion, transparency)

Best practices

  • Prefer Regular variant for 95% of cases; use Clear only if all three conditions are met
  • Never mix Regular and Clear within the same interface
  • Tint selectively for primary actions; avoid opaque fills over glass
  • Flatten view hierarchy to reduce rendering cost and avoid deep nested glass elements
  • Test across light/dark, Reduced Transparency/Contrast/Motion, Dynamic Type, and scrolling scenarios

Example use cases

  • Review a navigation bar implementation to confirm automatic legibility and proper variant use
  • Diagnose a lensing artifact that appears as a generic blur and correct the modifier usage
  • Advise designers in a launch meeting when asked to apply Clear everywhere and propose compromise regions
  • Profile an interface with Instruments to identify costly nested glass layers and refactor
  • Run an expert checklist before release to catch accessibility or contrast regressions

FAQ

Use Clear only when the element sits over media-rich content, a dimming layer won’t harm that content, and foreground controls are bold and bright; otherwise use Regular.

What if designers insist on Clear everywhere?

Demonstrate the three-condition checklist, show side-by-side examples, propose Clear for hero sections only, and document the decision and monitoring plan in writing.

Built by
VeilStrat
AI signals for GTM teams
© 2026 VeilStrat. All rights reserved.All systems operational
axiom-liquid-glass skill by charleswiltgen/axiom | VeilStrat