New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Build Webgl Liquid Glass

by agent-skills-hub in agent-skills-hub/agent-skills-hub

Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs.

MITAuto-check passedGame Development

Install Build Webgl Liquid Glass

skills CLI
$ npx skills add agent-skills-hub/agent-skills-hub --skill build-webgl-liquid-glass -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install agent-skills-hub/agent-skills-hub build-webgl-liquid-glass --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/agent-skills-hub/agent-skills-hub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/build-webgl-liquid-glass .claude/skills/build-webgl-liquid-glass && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
build-webgl-liquid-glass
GitHub stars
112
Token cost
~827 tokens
SKILL.md length
382 words
Files
5 (incl. references, assets)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs.

  • Works in 8 steps: Inspect the existing framework, styling… → Install liquid-gl with the repository's… → Adapt assets/react/WebGLLiquidGlass.tsx,… → …
  • Tasks that involve 3D graphics and WebGL
  • SKILL.md covers When to Use This Skill, Example Request, Workflow and Default Tuning, plus 3 more sections
  • Runs TypeScript scripts from its folder

What it does

Build Webgl Liquid Glass is an agent skill from agent-skills-hub/agent-skills-hub. Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs. Default for refractive cards, notifications, panels, GPU bevels, and WebGL glass.

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files and assets (for example `assets/react/liquid-gl.d.ts` and `references/tuning.md`).

It sits in Game Development, covering 3D graphics and WebGL. It works with React. The repository describes itself as: Agent Skills Hub is a global library of AI agent skills that work across OpenClaw, Claude Code, Gemini, Cursor, Antigravity, and more. The licence is MIT.

When your agent uses it

  • Tasks that involve 3D graphics and WebGL

Example prompts

  • “/build-webgl-liquid-glass”

Requirements

  • Node.js

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Inspect the existing framework, styling conventions, target background, and browser support.
  2. Install liquid-gl with the repository's package manager.
  3. Adapt assets/react/WebGLLiquidGlass.tsx, webgl-liquid-glass.css, and liquid-gl.d.ts for React projects. Preserve the same DOM layering in…
  4. Keep the WebGL target empty. Put readable content in a sibling overlay; never place text inside the rasterized lens target.
  5. Point snapshotSelector at the real visual background, not the glass card or the whole app when avoidable.
  6. Initialize after the target and background assets exist. Register animated or replaceable backgrounds with liquidGL.registerDynamic().
  7. Preserve a CSS backdrop-filter fallback and legible foreground colors when WebGL is unavailable.
  8. Verify the result over light, dark, and high-frequency backgrounds. Drag or scroll the surface and confirm refraction stays aligned.

What it can do on your machine

Read from SKILL.md and the folder at commit efc0b96. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (TypeScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Build Webgl Liquid Glass loads about 827 tokens when it runs, and up to ~1.3k if it reads all its reference files. Until then it costs about 48 tokens; SKILL.md has 382 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~827
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from agent-skills-hub/agent-skills-hub at commit efc0b96, republished under its MIT licence (© agent-skills-hub). 382 words, ~827 tokens.

Download SKILL.mdSave it as .claude/skills/build-webgl-liquid-glass/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
build-webgl-liquid-glass
description
Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs. Default for refractive cards, notifications, panels, GPU bevels, and WebGL glass.
risk
safe
source
https://github.com/woodfishhhh/glass-material-skills

Build WebGL Liquid Glass

Create a real refractive material while keeping text and controls crisp above the lens.

When to Use This Skill

  • Use when the user asks for optimized liquid glass, GPU refraction, floating glass panels, or refractive notification cards.
  • Use as the default glass implementation when WebGL is available and the interface has a small number of important surfaces.
  • Do not use when the user explicitly requests SDF/Vaso or needs hundreds of simultaneous glass items.

Example Request

text
Use build-webgl-liquid-glass to add a draggable refractive notification card over this page's real background while keeping its text crisp.

Workflow

  1. Inspect the existing framework, styling conventions, target background, and browser support.
  2. Install liquid-gl with the repository's package manager.
  3. Adapt assets/react/WebGLLiquidGlass.tsx, webgl-liquid-glass.css, and liquid-gl.d.ts for React projects. Preserve the same DOM layering in other frameworks.
  4. Keep the WebGL target empty. Put readable content in a sibling overlay; never place text inside the rasterized lens target.
  5. Point snapshotSelector at the real visual background, not the glass card or the whole app when avoidable.
  6. Initialize after the target and background assets exist. Register animated or replaceable backgrounds with liquidGL.registerDynamic().
  7. Preserve a CSS backdrop-filter fallback and legible foreground colors when WebGL is unavailable.
  8. Verify the result over light, dark, and high-frequency backgrounds. Drag or scroll the surface and confirm refraction stays aligned.

Default Tuning

Start with the asset defaults:

  • resolution: 1.5
  • refraction: 0.007
  • aberration: 0.03
  • bevelDepth: 0.075
  • bevelWidth: 0.18
  • frost: 2.2
  • magnify: 1.006
  • shadow: false, specular: true, tilt: false

Read references/tuning.md before changing these values or adding several lenses.

Show full SKILL.md (139 more words)Show less

Quality Gates

  • Keep content as DOM text above the lens. Reject duplicated, blurred, or chromatically split text.
  • Avoid hard clipping, detached refraction, stale snapshots, black canvases, and visible shader seams.
  • Keep the surface dimensions stable during loading and interaction.
  • Reduce resolution and disable expensive options before replacing the WebGL approach.
  • Respect prefers-reduced-motion; do not add tilt or elastic motion by default.
  • Test Chromium desktop and a mobile viewport. Check the console and confirm the fallback remains usable.

Fallback Choice

Use $build-sdf-liquid-glass only when the user explicitly selects D/SDF, WebGL is unavailable, or many simultaneous glass surfaces make the shared GPU renderer inappropriate.

Limitations

  • Requires browser WebGL and a capturable visual background.
  • A large number of lenses can consume significant GPU resources.
  • Dynamic backgrounds require explicit registration to keep snapshots current.
  • Browser rendering cannot reproduce a native desktop compositor exactly.

© agent-skills-hub, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references, assets) in skills/build-webgl-liquid-glass of agent-skills-hub/agent-skills-hub.

  • SKILL.md
  • assets/react/WebGLLiquidGlass.tsx
  • assets/react/liquid-gl.d.ts
  • assets/react/webgl-liquid-glass.css
  • references/tuning.md

Open the folder on GitHubat commit efc0b96

Compare with similar skills

Build Webgl Liquid Glass next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Build Webgl Liquid Glass compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Build Webgl Liquid Glass this skillagent-skills-hub/agent-skills-hub112—~827Automated safety check: PassMIT
Web CloneJane-xiaoer/claude-skill-web-clone1k1 repos~2.7kAutomated safety check: PassMIT
Anatomywheresryan22/anatomy500—~7.7kAutomated safety check: PassMIT
Improve Threejsmillionco/react-doctor15k—~2.3kAutomated safety check: PassCustom licence
23rdradiumcoders/23rd.dev149—~3kAutomated safety check: PassNone
Polycsslayoutit/polycss767—~2.4kAutomated safety check: PassMIT

Similar skills

  • Web Clone

    Jane-xiaoer/claude-skill-web-clone

    网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 /…

    1k GitHub starsUsed in 1 repo~2.7k tokens
    Game DevelopmentAuto-check passed

  • Anatomy

    wheresryan22/anatomy

    Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with…

    500 GitHub stars~7.7k tokensUpdated today
    Game DevelopmentAuto-check passed

  • Improve Threejs

    millionco/react-doctor

    Audit and fix Three.js and React Three Fiber apps for frame-loop performance, GPU memory leaks, scene-graph correctness, and visual defects like z-fighting, shadow acne, wrong color space, and…

    15k GitHub stars~2.3k tokensUpdated today
    Game DevelopmentAuto-check passed

  • 23rd

    radiumcoders/23rd.dev

    Install, choose, and compose 23rd shadcn/ui registry components for React and Svelte 5.

    149 GitHub stars~3k tokensUpdated today
    Game DevelopmentAuto-check passed

  • Polycss

    layoutit/polycss

    Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements.

    767 GitHub stars~2.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

  • R3f Animation

    EnzeD/r3f-skills

    Animate React Three Fiber objects with useFrame, damping, and GLTF clips.

    128 GitHub stars~1.1k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

More from agent-skills-hub/agent-skills-hub

All 19 skills in this repo

  • Open Notebook

    agent-skills-hub/agent-skills-hub

    Drives a self-hosted Open Notebook instance to organize sources into notebooks, chat with documents, generate notes and multi-speaker podcasts, and search across material.

    112 GitHub starsUsed in 3 repos~2.6k tokens
    Auto-check passed

  • Timesfm Forecasting

    agent-skills-hub/agent-skills-hub

    Zero-shot time series forecasting with Google's TimesFM foundation model.

    112 GitHub starsUsed in 1 repo~7.8k tokens
    Auto-check: notes

  • Pyzotero

    agent-skills-hub/agent-skills-hub

    Interact with Zotero reference management libraries using the pyzotero Python client.

    112 GitHub starsUsed in 4 repos~1.1k tokens
    Auto-check: notes

  • Alpha Vantage

    agent-skills-hub/agent-skills-hub

    Access real-time and historical stock market data, forex rates, cryptocurrency prices, commodities, economic indicators, and 50+ technical indicators via the Alpha Vantage API.

    112 GitHub starsUsed in 2 repos~1.6k tokens
    Auto-check passed

  • Build Sdf Liquid Glass

    agent-skills-hub/agent-skills-hub

    Build lightweight SDF/canvas displacement glass with Vaso. An agent skill from agent-skills-hub/agent-skills-hub.

    112 GitHub stars~674 tokensUpdated 9 days ago
    Auto-check passed

  • Edgartools

    agent-skills-hub/agent-skills-hub

    Python library for accessing, analyzing, and extracting data from SEC EDGAR filings.

    112 GitHub starsUsed in 2 repos~1.4k tokens
    Auto-check passed

Works with

Categories

Questions about Build Webgl Liquid Glass

What does Build Webgl Liquid Glass do?

Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs. Build Webgl Liquid Glass is an agent skill from agent-skills-hub/agent-skills-hub. Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs.

When should I use Build Webgl Liquid Glass?

Build Webgl Liquid Glass fits situations like: tasks that involve 3D graphics and WebGL.

How do I install Build Webgl Liquid Glass in Claude Code?

Run `npx skills add agent-skills-hub/agent-skills-hub --skill build-webgl-liquid-glass -a claude-code`. Or copy the skill folder (skills/build-webgl-liquid-glass in agent-skills-hub/agent-skills-hub) into .claude/skills/build-webgl-liquid-glass in your project. Claude Code loads it when a task matches its description.

How do I install Build Webgl Liquid Glass in Codex?

Run `npx skills add agent-skills-hub/agent-skills-hub --skill build-webgl-liquid-glass -a codex`. Or copy the skill folder (skills/build-webgl-liquid-glass in agent-skills-hub/agent-skills-hub) into .agents/skills/build-webgl-liquid-glass in your project. Codex loads it when a task matches its description.

Can I use Build Webgl Liquid Glass in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add agent-skills-hub/agent-skills-hub --skill build-webgl-liquid-glass -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/build-webgl-liquid-glass, .gemini/skills/build-webgl-liquid-glass, .github/skills/build-webgl-liquid-glass and .opencode/skills/build-webgl-liquid-glass in your project.

What does Build Webgl Liquid Glass need to run?

Going by SKILL.md and its folder, Build Webgl Liquid Glass needs TypeScript for the scripts in its folder. Our summary lists: Node.js.

Does Build Webgl Liquid Glass access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Build Webgl Liquid Glass safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Build Webgl Liquid Glass use?

Build Webgl Liquid Glass is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Build Webgl Liquid Glass use?

About 827 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 441 tokens, read only when the agent opens those files.

What are the alternatives to Build Webgl Liquid Glass?

Skills that share tags, products or a category with Build Webgl Liquid Glass: Web Clone (Jane-xiaoer/claude-skill-web-clone, 1k stars), Anatomy (wheresryan22/anatomy, 500 stars), Improve Threejs (millionco/react-doctor, 15k stars) and 23rd (radiumcoders/23rd.dev, 149 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Build Webgl Liquid Glass?

agent-skills-hub (a GitHub organization) maintains it in agent-skills-hub/agent-skills-hub, which has 112 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 2, 2026.

Source: agent-skills-hub/agent-skills-hub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.