web-shader-extractor

Extract and port WebGL/Canvas shader effects from web pages to standalone JavaScript projects.

Updated Apr 20, 2026
One-click install
npx skills add https://github.com/Kraits/cxc-ace --skill web-shader-extractor-kraits
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-shader-extractor
Source: https://github.com/Kraits/cxc-ace/tree/main/skills-backup/web-shader-extractor
Command: npx skills add https://github.com/Kraits/cxc-ace --skill web-shader-extractor-kraits

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

从网页中提取 WebGL/Canvas/Shader 视觉特效代码,反混淆后移植为独立原生 JS 项目。

Core Features & Use Cases

  • 1:1 复刻与去混淆后移植:提取网页中的着色器、渲染逻辑和时间线,整理为可独立运行的 JS 项目。
  • 自动化阶段化工作流:环境检查、资源抓取、解混淆、端到端移植、验证与报告。
  • Use Case: 站点视觉特效需要离线复刻、教学演示或离线可复现的 shader 渲染。

Quick Start

Provide a URL to a webpage and let the extractor fetch, deobfuscate, and port its WebGL/Canvas shader effects to a standalone JavaScript project.

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 website?

To extract WebGL shader code from a website, provide the page URL to automate environment checks, fetch resources, and pull the rendering logic into a standalone JavaScript project.

Can I port Canvas shader effects into a vanilla JavaScript project?

Yes, you can port Canvas shader effects into a vanilla JavaScript project by de-obfuscating the original rendering logic and timelines into an independent, runnable format.

What is the best way to deobfuscate web shader effects for offline use?

The best way to deobfuscate web shader effects is using an automated phased workflow that fetches resources, cleans the code, and ports the visuals for offline reproduction.

Does the shader extraction process work with any web page?

Yes, the shader extraction process applies to any web page utilizing WebGL or Canvas, fetching the specific shader effects and porting them across configurable workflow phases.

How to replicate online visual effects for an offline teaching demo?

You can replicate online visual effects for an offline teaching demo by porting the extracted WebGL shaders and rendering timelines into a standalone, reproducible JavaScript project.

What are the limitations of porting deobfuscated shaders to vanilla JS?

Porting deobfuscated shaders to vanilla JS involves automated phases for environment checks and validation, ensuring the standalone project accurately matches the original web visuals.