Agent skill · pedronauck
glassmorphism
Create, refine, or debug glass interfaces at the level of Apple Liquid Glass and premium frosted widgets: translucent cards and capsules over photos or wallpapers, glass navigation and toolbars, smoked media controls, lens-refracting buttons, and their solid/accessible fallbacks. Use for glass material design, CSS backdrop-filter stacks (fill, rim, sheen, shadow, grain), SVG displacement refraction, glass tokens, contrast on translucent surfaces, rendering cost, and conditional SwiftUI/visionOS/Fluent guidance. Also matches interfaces de vidro, vidro fosco, and liquid glass. Excludes unrelated frontend edits, generic redesigns without glass, and photorealistic 3D glass rendering.
What it needs
About 5k tokens when loaded.
What this skill does
Glassmorphism Build a material whose translucency reads as a lit pane of glass while text stays legible and controls stay usable. Premium glass comes from a backdrop that carries light, a thin light fill, one locked light direction expressed through rim, highlight and shadow, and a stabilized plate under dense content. It never comes from raising blur or opacity. Establish the material's job Read the brief and the existing interface for platform, surface roles, reading density, who owns the backdrop, themes, and target devices. Preserve the project's components, typography, tokens and interaction conventions. Infer routine choices; this skill adds no approval step or planning artifact. Separate three layers before styling: environment behind the interface, content people read or manipulate, chrome that navigates or controls it. Glass needs a reason to reveal the environment. Over flat color the blur has nothing to sample and the surface becomes a gray box; use a tinted solid there, or compose a backdrop with a luminance ramp when the brief allows one. Surface Starting decision Change it when --- --- --- Floating toolbar, dock, tab bar, compact media or map control Glass capsule; icons on the material, selected state as a denser chip Uncontrolled imagery or device cost defeats legibility Glanceable widget (weather, metric, now playing) Glass card with large light numerals and short labels; ink chosen by backdrop luminance Copy grows past a few short lines: add a plate or go solid Popover, sheet, command palette, settings panel Glass shell with a stabilized plate under fields, rows and code Sustained reading: solid panel Table, editor, long text, chart labels, forms Solid reading plane; optional glass around it Only after measuring the composite behind the text Primary action, errors, important status Stable foreground/background pairing and recognizable states A native platform control already supplies verified material Blocking modal backdrop Dimming scrim A measure …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills pedronauck/glassmorphism