Liquid Glass Frontend

Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default fonts, uniform fade-ins). Covers creative direction and signature interactions, the frost/blur glass material, single-source color tokens with dark+light theming, scroll/stagger/parallax/scroll-scrubbed animation, type-as-hero typography, and asymmetric grid-breaking composition.

10 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add ngocanhnckh/liquid-glass-frontend-skill --skill liquid-glass-frontend

Manual install

git clone --depth 1 https://github.com/ngocanhnckh/liquid-glass-frontend-skill.git /tmp/liquid-glass-frontend-skill
mkdir -p ~/.claude/skills
cp -r /tmp/liquid-glass-frontend-skill/. ~/.claude/skills/liquid-glass-frontend

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Liquid Glass Frontend

Build frontends people remember: real Apple-style frosted glass, motion that feels alive, layouts that break the grid on purpose, and a token system you re-skin in three numbers. This skill is the distilled, production-tested playbook behind a full enterprise app + landing site.

**The bar is an Awwwards Site of the Day — not a template.** Editorial confidence, a signature interaction, distinctive type, and intentional asymmetric composition. Never the generic SaaS vocabulary of three icon-cards in a row, a centered hero, default fonts, and uniform fade-ins. If what you're building looks like every other landing page, it's not done. `references/creative-direction.md` is the taste layer — read it.

**Announce at start:** "I'm using the liquid-glass-frontend skill to design this interface."

## The non-negotiables

These are what separate a memorable interface from generic AI output. Hold all of them:

1. **Aim for awwwards-tier, not template-tier.** Decide the ONE signature moment someone will screenshot, and over-invest there. Kill the generic component vocabulary (icon-card rows, centered hero, even spacing). See `references/creative-direction.md`.
2. **Commit to one bold aesthetic direction.** Pick an extreme (warm editorial, refined minimal, retro-futuristic, brutalist, luxury) and execute it precisely. Timid middle-ground reads as slop.

Read the full skill on GitHub

Details

Skill name: liquid-glass-frontend
Repository: ngocanhnckh/liquid-glass-frontend-skill
License: MIT
Repo updated: 15 June 2026

FAQ

What does the Liquid Glass Frontend skill do?

How do I install the Liquid Glass Frontend skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add ngocanhnckh/liquid-glass-frontend-skill --skill liquid-glass-frontend. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Liquid Glass Frontend popular?

It lives in ngocanhnckh/liquid-glass-frontend-skill, which has 10 GitHub stars and 1 forks.

Related skills

Motion Graphics

acelera-agency/html-animation

Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest

Frontend & Design

Character Animation

karem505/character-animation-skill

Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite sheet (a grid of frames) into those animated formats. Trigger even when the user just says things like

Frontend & Design

No Slop Design

agshinrajabov/no-slop-design

Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to design, redesign, review, or "make it look better" for any screen, app, landing page, component, or design system; when building UI from scratch; when a design system or brand must be adopted or created; when generating design tokens, moodboards, or design specs; or when output must not look AI-generated. Runs discovery (market, audience, existing design system) → mini research → moodboard → tokens →

Frontend & Design

Bufatechno Webgamedev

bufatechno/bufatechno-webgamedev

BUFATECHNO WEB GAME DEV — skill for building complete, production-ready web games with Three.js (WebGPU/TSL) or Babylon.js (WebGPU/Havok). Optimized for ZCode and Claude. Covers scaffolding, ECS, PBR/IBL, WebGPU/TSL, VFX/particles/post-processing, Web Audio, assets (GLTF/Draco/KTX2/Splat), 2D canvas/sprites, and animation (mixer/skeletal/morph/blending). Use when user asks to create, build or ship any 3D browser game — FPS, voxel, third-person, platformer, racing, flight, tower defense, RPG, multiplayer, WebXR/VR. Triggers on 'Three.js game', 'Babylon.js demo', 'WebGPU game', 'voxel world', 'b

Frontend & Design

Premium Web Design

Lucxar/premium-web-design-skill

Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.

Frontend & Design

Arbitrum Dapp Skill

hummusonrails/arbitrum-dapp-skill

Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.