# Liquid Glass for the Web - Agent Skill
An [Agent Skill](https://agentskills.io) for building and migrating websites and web apps with the **Liquid Glass** design language using plain HTML, CSS, and JavaScript. Works with any coding agent that supports the open `SKILL.md` format.
## What This Skill Does
When installed, your coding agent gains deep knowledge of building Liquid Glass UI on the web. It can:
- **Migrate existing sites** to Liquid Glass with a structured 5-phase workflow
- **Build new web apps from scratch** using glass-native patterns
- **Apply all glass techniques** correctly: `backdrop-filter` glass surfaces, shared glass groups, morphing with the View Transition API, background extension effects, glass toolbars, tab bars, sheets, and SVG refraction filters
- **Handle browser differences** across Chromium, Safari (macOS/iOS), Firefox, and mobile devices with progressive enhancement
- **Avoid common pitfalls** with tested solutions for known issues (backdrop roots, stacking contexts, filter performance, accessibility)
The skill activates automatically when you discuss glass/translucent web UI.
## Install
Install into any supported agent with the [skills CLI](https://github.com/vercel-labs/skills):
```
npx skills add dabit3/liquid-glass-web-skill
```
Add `-g` for a global (all projects) install, or `-a <agent>` to target specific agents.
### Manual install
Copy `skills/liquid-glass/` into your agent's skills directory:
| Agent | Project directory | Global directory |
|-------|-------------------|------------------|
| Claude Code | `.claude/skills/` | `~/.claude/skills/` |
| Devin CLI | `.devin/skills/` | `~/.config/devin/skills/` |
| Cursor | `.cursor/skills/` | `~/.cursor/skills/` |
| Codex | `.codex/skills/` | `~/.codex/skills/` |
| Generic / multi-agent | `.agents/skills/` | `~/.agents/skills/` |
## What's Included
| File | Description |
|------|-------------|
| `skills/liquid-glass/SKILL.md` | Core instructions - key techniques, quick start, migration summary |
| `skills/liquid-glass/references/api-reference.md` | Complete reference for all glass CSS/HTML/JS patterns |
| `skills/liquid-glass/references/migration-guide.md` | 5-phase migration workflow for existing sites |
| `skills/liquid-glass/references/platform-specifics.md` | Chromium, Safari (macOS/iOS), Firefox, mobile, and desktop details |
| `skills/liquid-glass/references/pitfalls-and-solutions.md` | Known issues with tested solutions |
| `skills/liquid-glass/examples/web-app-patterns.md` | Complete code patterns for a production-style glass web app |
## Techniques Covered
- The glass surface recipe - `backdrop-filter: blur() saturate()` + translucent fill + specular rim highlights
- Glass variants - regular, clear, identity, tints via `color-mix()`, interactive press/bounce/shimmer
- Shared glass surfaces - grouped controls on one `backdrop-filter` for consistency and performance
- Morphing transitions - `view-transition-name` + `document.startViewTransition()`
- Glass unions - segmented controls as one continuous surface
- Background extension effect - full-bleed heroes and mirror-and-blur panel extensions
- Glass buttons - standard and prominent, with pointer-tracked illumination
- Glass toolbars - transparent bars with floating pills, flex spacers, safe-area insets
- Glass tab bars - floating, minimize-on-scroll-down
- Glass sheets - native `<dialog>` bottom sheets with detents and `::backdrop`
- Liquid refraction - SVG `feTurbulence`/`feDisplacementMap` filters in `backdrop-filter` (Chromium progressive enhancement)
- Accessibility - `prefers-reduced-transparency`, `prefers-contrast`, `prefers-reduced-motion`, `forced-colors`
## Sources
Built from analysis of:
- [MDN: backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)
- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)
- [Can I use: CSS Backdrop Filter](https://caniuse.com/css-backdrop-filter)
- Community references and real-world liquid-glass web implementations
## License
MIT