npx skills add lixiaolin94/skills --skill web-shader-extractor
nexu-io/motion-anything · Archived
web-shader-extractor
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.
Installation
$
npx skills add nexu-io/motion-anything --skill web-shader-extractor
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
motion-anything
Same source · more installs
nexu-io/motion-anything
Turn one sentence of intent into tasteful, produced motion. Given a natural-language request li…
22 installs
gsap-scrolltrigger
Same source
nexu-io/motion-anything
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use…
13 installs
gsap-timeline
Same source
nexu-io/motion-anything
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use…
13 installs
web-to-design-md
Same source
nexu-io/motion-anything
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a …
13 installsSimilar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
data-context-extractor
Similar name
anthropics/knowledge-work-plugins
Generate or improve a company-specific data analysis skill by extracting tribal knowledge from …
2.8K installs
competitive-ads-extractor
Similar name
composiohq/awesome-claude-skills
Extracts and analyzes competitors' ads from ad libraries (Facebook, LinkedIn, etc.) to understa…
4.7K installs
table-extractor
Similar name
claude-office-skills/skills
>
4.1K installs
data-extractor
Similar name
claude-office-skills/skills
>
4K installs
wechat-article-extractor
Similar name
freestylefly/wechat-article-extractor-skill
Extract metadata and content from WeChat Official Account articles. Use when user needs to pars…
3.8K installs
competitive-ads-extractor
Similar name
nexu-io/open-design
Extract and analyze competitors' ads from ad libraries to understand messaging and creative app…
2.4K installsAlso in this package
Other skills from nexu-io/motion-anything · top by installs.
npx skills add nexu-io/motion-anything
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Also listed on
Alternate registries and mirrors of this skill.
Repository health
Stars
763
License
LICENSE
Default branch
main
Open issues
4
Status
Archived
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md2,233 B -
docs
SUMMARY.md453 B
History
- First seen on skills.sh
- First recorded snapshot · 14 installs
SKILL.md
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