{"slug": "liquidglassskill-claude-skill-to-implement-apple-liquid-glass-ui-styles", "title": "LiquidGlassSkill: Claude skill to implement Apple Liquid Glass UI styles", "summary": "Stormaref released LiquidGlassSkill, a Claude Code plugin that implements Apple's Liquid Glass UI style with a CSS layer for tint and rim plus an SVG displacement filter for refraction, available via the Claude Code plugin marketplace. The skill includes a drop-in stylesheet, an Angular directive, and reference docs, with refraction limited to Chromium browsers and a blur fallback elsewhere.", "body_md": "Apple-style frosted, **refracting** surfaces: a CSS layer that paints the tint and rim, and an SVG displacement filter that bends the backdrop through the panel's edge the way real glass does.\n\nMost \"glassmorphism\" recipes are `backdrop-filter: blur()`\n\nplus a white overlay, which reads as a blurred rectangle. This skill carries the other half — the refraction — plus the handful of rules that decide whether glass looks like glass or like a gray box. Every rule here came from a UI that looked wrong before it looked right.\n\nBoth shots are `assets/demo.html`\n\nrendered as-is — the CSS layer alone, no refraction, which is also the fallback every non-Chromium browser gets. The colour in the panels is the ambient backdrop showing through; the tint itself is colorless.\n\nThis repo is a Claude Code plugin marketplace. In Claude Code:\n\n```\n/plugin marketplace add stormaref/LiquidGlassSkill\n/plugin install liquid-glass@stormaref-skills\n```\n\nThen ask for glass in your own words. The skill is model-invoked: \"make this card frosted glass\", \"add glassmorphism to the sidebar\", \"the glass panel looks flat\" all reach it. To run it by hand it is namespaced under the plugin — `/liquid-glass:liquid-glass`\n\n.\n\nPrefer a plain skill directory with no plugin machinery? Copy the skill folder out:\n\n```\ngit clone --depth 1 https://github.com/stormaref/LiquidGlassSkill.git /tmp/lgs\ncp -r /tmp/lgs/plugins/liquid-glass/skills/liquid-glass ~/.claude/skills/\n```\n\nThe skill lives at `plugins/liquid-glass/skills/liquid-glass/`\n\n; paths below are relative to it.\n\n| File | |\n|---|---|\n`SKILL.md` |\nThe skill: the two-layer model, four rules, the tier table, and a checklist |\n`assets/liquid-glass.css` |\nDrop-in CSS — its own tokens, light and dark, no dependencies |\n`assets/liquid-glass.directive.ts` |\nThe refraction layer, as an Angular directive |\n`assets/demo.html` |\nSelf-contained page for the CSS layer. Open it in a browser |\n`references/refraction.md` |\nThe mechanism and the formulas — enough to port the directive to any framework |\n`references/recipes.md` |\nVariants (card, FAB, modal, dropdown, circular control) and the pitfalls behind each rule |\n\n`assets/liquid-glass.css`\n\nis a plain stylesheet: link it, put `liquid-glass-backdrop`\n\non the page shell, `liquid-glass`\n\non panels. Angular projects can import the directive as-is. Everything else: `references/refraction.md`\n\nis a complete porting spec — or point a Claude session at it and ask.\n\nTwo things to know before you start:\n\n**The backdrop is required.** Glass shows what is behind it; over a flat fill there is nothing to show. Build the ambient mesh first and check the page looks uneven with no glass on it.**Refraction is Chromium-only**, and cannot be feature-detected (Safari parses`backdrop-filter: url(#…)`\n\nand paints nothing). Everywhere else the stylesheet's blur fallback carries the look. The directive gates on engine and stays inert.\n\nThe refraction field is a port of the fragment shader in ** liquid-glass-js** by Armagan Amcalar (MIT). This port targets an SVG displacement filter fed by the\n\n*live*backdrop rather than the library's html2canvas page snapshot, so it tracks scrolling, theme changes and content updates for free. The upstream notice sits at the top of\n\n`assets/liquid-glass.directive.ts`\n\n— keep it there on any copy or port.Extracted from a production Angular app where this is the primary surface treatment: cards, topbars, dialogs, menus and the task board all sit on it.", "url": "https://wpnews.pro/news/liquidglassskill-claude-skill-to-implement-apple-liquid-glass-ui-styles", "canonical_source": "https://github.com/stormaref/LiquidGlassSkill", "published_at": "2026-08-15 10:31:58+00:00", "updated_at": "2026-08-15 10:41:01.966477+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai"], "entities": ["Stormaref", "LiquidGlassSkill", "Claude Code", "Apple", "Armagan Amcalar", "liquid-glass-js", "Angular"], "alternates": {"html": "https://wpnews.pro/news/liquidglassskill-claude-skill-to-implement-apple-liquid-glass-ui-styles", "markdown": "https://wpnews.pro/news/liquidglassskill-claude-skill-to-implement-apple-liquid-glass-ui-styles.md", "text": "https://wpnews.pro/news/liquidglassskill-claude-skill-to-implement-apple-liquid-glass-ui-styles.txt", "jsonld": "https://wpnews.pro/news/liquidglassskill-claude-skill-to-implement-apple-liquid-glass-ui-styles.jsonld"}}