skills.rest
zeroix07
zeroix07COMMUNITY
Explore all skills by this author →
GitHub

web-shader-extractor

Extract WebGL, Canvas, and shader effects from live web pages.

Updated May 30, 2026
Search Tags:#extraction#webgl#three.js#deobfuscation#shader#porting#visual-effects
One-click install
npx skills add https://github.com/zeroix07/mcp-skill-agent --skill web-shader-extractor-zeroix07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-shader-extractor
Source: https://github.com/zeroix07/mcp-skill-agent/tree/main/web-shader-extractor
Command: npx skills add https://github.com/zeroix07/mcp-skill-agent --skill web-shader-extractor-zeroix07

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill eliminates the need for manual, expert-level reverse-engineering of visual effects from live websites, saving developers hours of debugging and research into WebGL, shader code, and frontend rendering pipelines.

Core Features & Use Cases

  • Automated Effect Extraction: Retrieves and parses post-rendered DOM, WebGL metadata, and minified JS bundles from any public URL to locate shader and visual effect code.
  • Multi-Framework Support: Handles effects built with Three.js, Babylon.js, PixiJS, raw WebGL, and no-code platforms including Unicorn Studio and shaders.com, with dedicated optimized workflows for each supported platform.
  • Standalone Project Porting: Deobfuscates extracted shader code and transplants it into independent, dependency-minimized native JavaScript projects, with optional framework retention for complex 3D, PBR, or GPGPU effects. Use Case: If you find a website with a unique animated background or interactive visual effect you want to reuse in your own project, this Skill can automatically extract the underlying shader code, resolve obfuscation, and generate a working standalone port of the effect.

Quick Start

Provide the URL of a website with the visual effect you want to replicate and request to extract its shader or animation effects to receive a fully functional standalone project port of the effect.

Frequently Asked Questions about web-shader-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract WebGL shader code from a live website without manual reverse-engineering?▼

To extract WebGL shader code from a live website, the Skill retrieves and parses post-rendered DOM, WebGL metadata, and minified JS bundles from the target URL. It automates the source code retrieval and configuration extraction process, eliminating manual reverse-engineering of visual effects.

Can I deobfuscate Three.js shader code and port it to a standalone JavaScript project?▼

Yes, you can deobfuscate Three.js shader code and port it to a standalone JavaScript project. The Skill deobfuscates extracted minified shader code and transplants it into dependency-minimized native JavaScript projects, with optional framework retention for complex 3D or GPGPU effects.

Does the shader extractor work with no-code platforms like Unicorn Studio and shaders.com?▼

Yes, the shader extractor works with no-code platforms like Unicorn Studio and shaders.com. It provides dedicated optimized workflows for these platforms alongside multi-framework support for Three.js, Babylon.js, PixiJS, and raw WebGL to replicate website visual effects.

What is the best way to replicate an animated background from a public URL into my own project?▼

The best way to replicate an animated background from a public URL is to provide the link and request an extraction. The Skill automatically identifies the technology stack, deobfuscates the underlying shader code, and generates a working standalone port of the visual effect for your project.

Do I need playwright installed to automate deobfuscating minified shader code?▼

Yes, you need playwright installed to automate deobfuscating minified shader code. Playwright is the required dependency for retrieving post-rendered DOM and WebGL metadata from live web pages to locate and extract the visual effect code.

Related Skills

Explore More Software Engineering Skills→
felipesantiago-coderfelipesantiago-coder

web-shader-extractor

Extract WebGL and Canvas visual effects from websites into standalone JS projects.

Community
Advanced
ncsound919ncsound919

web-shader-extractor

Extract WebGL/Canvas shader code from a webpage into a standalone JS project.

Community
Advanced
treygoff24treygoff24
5

glsl-shaders

Generate, debug, and optimize GLSL shaders for Three.js and WebGL applications.

Community
Advanced
Aurora-AIAurora-AI
1

site_forensics

Analyze architecture, rendering, and performance of 3D websites using GSAP, Three.js, and GLSL.

Community
Advanced