Room From Photos
SkylarKitchen/skills
Builds a 3D model of a real room from a few phone photos, with movable furniture layouts, as one Three.js HTML page you can open in a browser.
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g.
Install Web Shader Extractor
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nexu-io/motion-anything web-shader-extractor --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-shader-extractor .claude/skills/web-shader-extractor && rm -rf skills-srcUse ~/.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/
Install the "web-shader-extractor" agent skill from https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractor into .claude/skills/web-shader-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-shader-extractor", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractorType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nexu-io/motion-anything web-shader-extractor --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/web-shader-extractor .agents/skills/web-shader-extractor && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-shader-extractor" agent skill from https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractor into .agents/skills/web-shader-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-shader-extractor", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nexu-io/motion-anything web-shader-extractor --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/web-shader-extractor .cursor/skills/web-shader-extractor && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-shader-extractor" agent skill from https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractor into .cursor/skills/web-shader-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-shader-extractor", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/nexu-io/motion-anything.git --path skills/web-shader-extractor--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nexu-io/motion-anything web-shader-extractor --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/web-shader-extractor .gemini/skills/web-shader-extractor && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-shader-extractor" agent skill from https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractor into .gemini/skills/web-shader-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-shader-extractor", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install nexu-io/motion-anything web-shader-extractorInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/web-shader-extractor .github/skills/web-shader-extractor && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-shader-extractor" agent skill from https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractor into .github/skills/web-shader-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-shader-extractor", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nexu-io/motion-anything web-shader-extractor --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/web-shader-extractor .opencode/skills/web-shader-extractor && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-shader-extractor" agent skill from https://github.com/nexu-io/motion-anything/tree/main/skills/web-shader-extractor into .opencode/skills/web-shader-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-shader-extractor", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-shader-extractor- GitHub stars
- 849
- Token cost
- ~541 tokens
- SKILL.md length
- 160 words
- Files
- 1
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g.
- Works in 3 steps: If not already installed, fetch it… → Then follow that skill's flow against… → Bring the extracted effect back as a…
- The user points at a sites visual effect and wants to reproduce/port/replay it
- SKILL.md covers What it does, How to invoke and Note for maintainers
- Calls npx; reaches github.com
What it does
Web Shader Extractor is an agent skill from nexu-io/motion-anything. Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. an animated gradient mesh, fluid/metaball, gaussian-splat scene, image distortion) and port it to a standalone, dependency-light JS project you can run locally or drop into an HTML artifact. Use when the user points at a site's visual effect and wants to reproduce/port/replay it, especially complex GPU effects our vanilla recipes don't cover.
Its SKILL.md is about 540 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Game Development, covering 3D graphics and WebGL and HTML artifacts. The repository describes itself as: ✨ The agentic motion layer — an open-source, chat-native motion engine. Describe the feeling; your AI ships the animation. The licence is Apache-2.0.
When your agent uses it
- The user points at a sites visual effect and wants to reproduce/port/replay it
- Especially complex GPU effects our vanilla recipes dont cover
Example prompts
- “/web-shader-extractor”
Requirements
- Node.js
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- If not already installed, fetch it (one-time, needs network)
- Then follow that skill's flow against the target URL / effect.
- Bring the extracted effect back as a background layer in an HTML artifact; motion-anything adds
What it can do on your machine
Read from SKILL.md and the folder at commit b016900. 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
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
github.com
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
Web Shader Extractor loads about 541 tokens when it runs. Until then it costs about 112 tokens; SKILL.md has 160 words of instructions outside code blocks.
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 nexu-io/motion-anything at commit b016900, republished under its Apache-2.0 licence (© nexu-io). 160 words, ~541 tokens.
Download SKILL.mdSave it as
.claude/skills/web-shader-extractor/SKILL.md (or your agent's skills folder).- name
- web-shader-extractor
- description
- Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. an animated gradient mesh, fluid/metaball, gaussian-splat scene, image distortion) and port it to a standalone, dependency-light JS project you can run locally or drop into an HTML artifact. Use when the user points at a site's visual effect and wants to reproduce/port/replay it, especially complex GPU effects our vanilla recipes don't cover.
- triggers
- extract this shader / webgl effect, port this webgl background, reproduce this canvas effect, 把这个网站的 webgl/shader 效果扒下来, 复刻高斯泼溅 / gaussian splatting, gpu 背景效果…
- od.mode
- prototype
- od.surface
- web
- od.platform
- desktop
- od.category
- animation-motion
- od.upstream
- https://github.com/lixiaolin94/skills
web-shader-extractor (install-on-demand companion)
This is a thin wrapper. The upstream skill has no open license, so motion-anything cannot redistribute its code — it is fetched on demand instead. Everything below is motion-anything's own description; the implementation lives upstream.
What it does
Locks onto a page's rendering surface (WebGL/WebGPU/Canvas), records shader / resource / render-graph
/ timing / input evidence, builds an evidence-matched local baseline, then projectizes it into a
standalone runnable. This is the right tool for the "复杂网页效果 (WebGL / 高斯泼溅)" need that our
2D compositor deliberately does not draw — see WEBGL.md.
How to invoke
- If not already installed, fetch it (one-time, needs network):
bash npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor - Then follow that skill's flow against the target URL / effect.
- Bring the extracted effect back as a background layer in an HTML artifact; motion-anything adds the surrounding tasteful motion.
Note for maintainers
If lixiaolin94/skills adds a permissive license, vendor it here properly (like skills/web-clone)
so it ships offline with the product. Until then, keep this wrapper.
Upstream: https://github.com/lixiaolin94/skills
© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/web-shader-extractor of nexu-io/motion-anything.
Open the folder on GitHubat commit b016900
Compare with similar skills
Web Shader Extractor 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Shader Extractor this skillnexu-io/motion-anything | 849 | — | ~541 | Automated safety check: Pass | Apache-2.0 | |
| Room From PhotosSkylarKitchen/skills | 117 | — | ~6k | Automated safety check: Pass | MIT | |
| Od Web Effect Extractornexu-io/open-design | 100k | — | ~1.6k | Automated safety check: Pass | Apache-2.0 | |
| 3D Assembly ManualSkylarKitchen/skills | 117 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Molecular Visualization 3dmoljaechang-hits/SciAgent-Skills | 371 | — | ~3.2k | Automated safety check: Pass | BSD-3-Clause | |
| Frontendnotque/vexjoy-agent | 439 | — | ~5k | Automated safety check: Notes | MIT |
Similar skills
Od Web Effect Extractor
nexu-io/open-design
Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable OpenDesign web artifact.
3D Assembly Manual
SkylarKitchen/skills
Builds a phone-first interactive 3D step-by-step build guide as one self-contained Three.js HTML file, starting from a bundled starter template.
Molecular Visualization 3dmol
jaechang-hits/SciAgent-Skills
3Dmol.js WebGL molecular visualization emitted as self-contained HTML.
Frontend
notque/vexjoy-agent
Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.
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.
More from nexu-io/motion-anything
All 12 skills in this repoLike Burst
nexu-io/motion-anything
Add a celebratory particle burst to a like / favorite / reaction button.
Border Beam
nexu-io/motion-anything
Give one card or CTA a lively accent: a small bright comet of light travels around its border.
Magnetic Button
nexu-io/motion-anything
Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back.
Scroll Reveal
nexu-io/motion-anything
Reveal content as it scrolls into view — a gentle rise + fade, once per element.
Web To Design Md
nexu-io/motion-anything
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured design.md an AI can consume.
Count Up
nexu-io/motion-anything
Animate a number counting up to its target as it scrolls into view, once.
Related
Categories
Questions about Web Shader Extractor
What does Web Shader Extractor do?
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. Web Shader Extractor is an agent skill from nexu-io/motion-anything.g.
When should I use Web Shader Extractor?
Web Shader Extractor fits situations like: the user points at a sites visual effect and wants to reproduce/port/replay it; especially complex GPU effects our vanilla recipes dont cover.
How do I install Web Shader Extractor in Claude Code?
Run `npx skills add nexu-io/motion-anything --skill web-shader-extractor -a claude-code`. Or copy the skill folder (skills/web-shader-extractor in nexu-io/motion-anything) into .claude/skills/web-shader-extractor in your project. Claude Code loads it when a task matches its description.
How do I install Web Shader Extractor in Codex?
Run `npx skills add nexu-io/motion-anything --skill web-shader-extractor -a codex`. Or copy the skill folder (skills/web-shader-extractor in nexu-io/motion-anything) into .agents/skills/web-shader-extractor in your project. Codex loads it when a task matches its description.
Can I use Web Shader Extractor 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 nexu-io/motion-anything --skill web-shader-extractor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-shader-extractor, .gemini/skills/web-shader-extractor, .github/skills/web-shader-extractor and .opencode/skills/web-shader-extractor in your project.
What does Web Shader Extractor need to run?
Going by SKILL.md and its folder, Web Shader Extractor needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Web Shader Extractor access the network?
SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Web Shader Extractor 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 Web Shader Extractor use?
Web Shader Extractor is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Shader Extractor use?
About 541 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Web Shader Extractor?
Skills that share tags, products or a category with Web Shader Extractor: Room From Photos (SkylarKitchen/skills, 117 stars), Od Web Effect Extractor (nexu-io/open-design, 100k stars), 3D Assembly Manual (SkylarKitchen/skills, 117 stars) and Molecular Visualization 3dmol (jaechang-hits/SciAgent-Skills, 371 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Shader Extractor?
nexu-io (a GitHub organization) maintains it in nexu-io/motion-anything, which has 849 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on July 7, 2026.
Source: nexu-io/motion-anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.