web-shader-extractor

This skill acts as an automated bridge between complex web-based visual environments and standalone development. It is designed for developers, digital artists, and creative technologists who need to replicate sophisticated interactive visuals, background animations, or 3D shader effects found on the web without relying on the original site's infrastructure. By leveraging Playwright for rendering simulation and custom extraction scripts, the agent reconstructs the underlying logic from minified or obfuscated sources.

• Automatically performs environment setup, including Node.js and Playwright, to ensure the extraction environment is ready without manual intervention.

• Performs multi-stage extraction, starting with rendered DOM and network analysis to identify frameworks like Three.js, Babylon.js, PixiJS, or raw WebGL.

• Implements an automated deobfuscation workflow that maps minified variables to meaningful naming conventions and isolates GLSL shader code for vertex and fragment shaders.

• Supports advanced porting strategies, ranging from stripping heavy framework dependencies to full vanilla WebGL2 implementations for lightweight, high-performance projects.

• Provides dedicated workflows for common platforms and techniques, such as Unicorn Studio or Nuxt-based shader configurations, ensuring high success rates for proprietary web stacks.

• Users should provide a target URL, and the agent will handle the discovery, cloning, and project structural setup.

• The tool is read-only; it performs no destructive actions on the target website and operates primarily by analyzing static assets and rendering output.

• Outputs typically consist of a standalone directory containing the reconstructed JS, GLSL shader files, and index.html, ready for local hosting or integration.

• The agent generates a comprehensive technical report summarizing the extraction timeline, rendering pipeline architecture, and any remaining differences between the source and the ported version.

• Designed for high-fidelity replication; the agent first aims for a 1:1 match before suggesting optimizations or framework simplifications to the user.