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 Sdf Liquid Glass

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

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

MITAuto-check passedGame Development

Install Build Sdf Liquid Glass

skills CLI
$ npx skills add agent-skills-hub/agent-skills-hub --skill build-sdf-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-sdf-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-sdf-liquid-glass .claude/skills/build-sdf-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-sdf-liquid-glass
GitHub stars
112
Token cost
~674 tokens
SKILL.md length
315 words
Files
4 (incl. references, assets)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 7 steps: Inspect the existing component… → Install vaso with the repository's… → Adapt assets/react/SDFLiquidGlass.tsx… → …
  • Responsive refractive cards
  • SKILL.md covers When to Use This Skill, Example Request, Workflow and Default Tuning, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Build Sdf Liquid Glass is an agent skill from agent-skills-hub/agent-skills-hub. Build lightweight SDF/canvas displacement glass with Vaso. Use for responsive refractive cards, no-WebGL fallbacks, many compact surfaces, or explicit SDF requests.

Its SKILL.md is about 670 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files and assets (for example `references/tuning.md`).

It sits in Game Development, covering 3D graphics and WebGL. 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

  • Responsive refractive cards
  • No-WebGL fallbacks
  • Many compact surfaces
  • Explicit SDF requests

Example prompts

  • “/build-sdf-liquid-glass”

Workflow steps

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

  1. Inspect the existing component framework, card dimensions, background, and browser targets.
  2. Install vaso with the repository's package manager.
  3. Adapt assets/react/SDFLiquidGlass.tsx and sdf-liquid-glass.css for React projects. Preserve the same layer separation elsewhere.
  4. Render Vaso as an absolute background layer and place text and controls in a sibling overlay. Do not let the displacement filter process…
  5. Measure the host with ResizeObserver instead of hard-coding responsive width.
  6. Keep a translucent CSS background under the effect so unsupported browsers still show a usable card.
  7. Verify light, dark, and detailed backgrounds. Drag or resize the surface and check that the map follows its bounds.

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

    No scripts in the folder and no shell commands in SKILL.md.

    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 Sdf Liquid Glass loads about 674 tokens when it runs, and up to ~1k if it reads all its reference files. Until then it costs about 47 tokens; SKILL.md has 315 words of instructions outside code blocks.

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

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). 315 words, ~674 tokens.

Download SKILL.mdSave it as .claude/skills/build-sdf-liquid-glass/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
build-sdf-liquid-glass
description
Build lightweight SDF/canvas displacement glass with Vaso. Use for responsive refractive cards, no-WebGL fallbacks, many compact surfaces, or explicit SDF requests.
risk
safe
source
https://github.com/woodfishhhh/glass-material-skills

Build SDF Liquid Glass

Create a bounded displacement lens with a sharp, accessible content layer.

When to Use This Skill

  • Use when the user explicitly asks for SDF glass, Canvas Map, Vaso, or the WeFlow D material.
  • Use when WebGL is unavailable or many compact glass cards make a shared GPU renderer inappropriate.
  • Do not select it by default when the WebGL liquid-glass approach is suitable.

Example Request

text
Use build-sdf-liquid-glass to add a responsive Vaso notification card with sharp DOM text above the displacement layer.

Workflow

  1. Inspect the existing component framework, card dimensions, background, and browser targets.
  2. Install vaso with the repository's package manager.
  3. Adapt assets/react/SDFLiquidGlass.tsx and sdf-liquid-glass.css for React projects. Preserve the same layer separation elsewhere.
  4. Render Vaso as an absolute background layer and place text and controls in a sibling overlay. Do not let the displacement filter process readable content.
  5. Measure the host with ResizeObserver instead of hard-coding responsive width.
  6. Keep a translucent CSS background under the effect so unsupported browsers still show a usable card.
  7. Verify light, dark, and detailed backgrounds. Drag or resize the surface and check that the map follows its bounds.

Default Tuning

Start with:

  • radius: 16
  • depth: 0.58
  • blur: 0.4
  • dispersion: 0.32
  • Stable notification height: 86px

Read references/tuning.md before increasing depth or dispersion.

Quality Gates

  • Keep foreground content crisp and outside the filtered layer.
  • Reject doubled text, rainbow fringes across glyphs, stale canvas dimensions, and clipped rounded corners.
  • Keep depth subtle for operational UI; use stronger distortion only for decorative surfaces.
  • Test resize behavior, Chromium desktop, and a mobile viewport.
  • Check the console and preserve readable CSS fallback colors.

Default Preference

If the user asks only for an optimized glass material without naming D/SDF/Vaso, use $build-webgl-liquid-glass instead.

Limitations

  • Requires browser support for SVG filters and backdrop-filter for the full effect.
  • Strong depth or dispersion values can create distracting edge artifacts.
  • The effect must be remeasured after responsive size changes.
  • 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 3 other files (references, assets) in skills/build-sdf-liquid-glass of agent-skills-hub/agent-skills-hub.

  • SKILL.md
  • assets/react/SDFLiquidGlass.tsx
  • assets/react/sdf-liquid-glass.css
  • references/tuning.md

Open the folder on GitHubat commit efc0b96

Compare with similar skills

Build Sdf 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 Sdf Liquid Glass compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Build Sdf Liquid Glass this skillagent-skills-hub/agent-skills-hub112—~674Automated safety check: PassMIT
Image to Three.js Modelimg2threejs/img2threejs18k1 repos~8.2kAutomated safety check: PassApache-2.0
Web CloneJane-xiaoer/claude-skill-web-clone1k1 repos~2.7kAutomated safety check: PassMIT
Threejs Game Directormajidmanzarpour/threejs-game-skills2.5k—~2.2kAutomated safety check: PassMIT
Game Asset Generatorhtdt/godogen7.1k—~2.8kAutomated safety check: PassMIT
Threejs Gameplay Systemsvalkor-ai/loom1.2k1 repos~1.4kAutomated safety check: PassApache-2.0

Similar skills

  • Image to Three.js Model

    img2threejs/img2threejs

    Rebuilds the object in a reference image as a procedural, animation-ready Three.js model written entirely in code, using staged sculpting with quality checks.

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

  • 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

  • Threejs Game Director

    majidmanzarpour/threejs-game-skills

    Entrypoint for building, upgrading, and finishing Three.js browser games.

    2.5k GitHub stars~2.2k tokensUpdated 13 days ago
    Game DevelopmentAuto-check passed

  • Game Asset Generator

    htdt/godogen

    Generates game art from text prompts: PNG images, GLB 3D models, rigged characters, animations and sprites, with background removal.

    7.1k GitHub stars~2.8k tokensUpdated 9 days ago
    Game DevelopmentAuto-check passed

  • Threejs Gameplay Systems

    valkor-ai/loom

    Build and iterate playable Three.js game systems: starter scaffold, architecture, design briefs, core loops, level and encounter design, entities, input, camera, collision and physics, scoring…

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

  • Threejs World Generation

    calesthio/OpenMontage

    Build deterministic, editable, free-viewpoint Three.js worlds from text or structured briefs.

    66k GitHub stars~2k tokensUpdated 7 days 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

  • 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

  • Mobile Design

    agent-skills-hub/agent-skills-hub

    Mobile-first design and engineering doctrine for iOS and Android apps.

    112 GitHub stars~2.3k tokensUpdated 9 days ago
    Auto-check: notes

Categories

Questions about Build Sdf Liquid Glass

What does Build Sdf Liquid Glass do?

Build lightweight SDF/canvas displacement glass with Vaso. An agent skill from agent-skills-hub/agent-skills-hub. Build Sdf Liquid Glass is an agent skill from agent-skills-hub/agent-skills-hub. Build lightweight SDF/canvas displacement glass with Vaso.

When should I use Build Sdf Liquid Glass?

Build Sdf Liquid Glass fits situations like: responsive refractive cards; no-WebGL fallbacks; many compact surfaces; explicit SDF requests.

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

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

How do I install Build Sdf Liquid Glass in Codex?

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

Can I use Build Sdf 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-sdf-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-sdf-liquid-glass, .gemini/skills/build-sdf-liquid-glass, .github/skills/build-sdf-liquid-glass and .opencode/skills/build-sdf-liquid-glass in your project.

What does Build Sdf Liquid Glass need to run?

SKILL.md names no scripts, command-line tools or credentials: Build Sdf Liquid Glass is instructions for the agent only.

Does Build Sdf 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 Sdf 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 Sdf Liquid Glass use?

Build Sdf 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 Sdf Liquid Glass use?

About 674 tokens (SKILL.md is roughly 2.7k 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 332 tokens, read only when the agent opens those files.

What are the alternatives to Build Sdf Liquid Glass?

Skills that share tags, products or a category with Build Sdf Liquid Glass: Image to Three.js Model (img2threejs/img2threejs, 18k stars), Web Clone (Jane-xiaoer/claude-skill-web-clone, 1k stars), Threejs Game Director (majidmanzarpour/threejs-game-skills, 2.5k stars) and Game Asset Generator (htdt/godogen, 7.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Build Sdf 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.