New Experiment
Tresjs/tres
Create a new experiment in TresJS Lab with all necessary files
从网页中提取 WebGL/Canvas/Shader 视觉特效代码，反混淆后移植为独立原生 JS 项目. An agent skill from Ali-Marandi/Web-Scraper-Framework.
Install Web Shader Extractor
The automated check flagged lines worth reading first. See the safety section below.
$ npx skills add Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Ali-Marandi/Web-Scraper-Framework 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/Ali-Marandi/Web-Scraper-Framework.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/Ali-Marandi/Web-Scraper-Framework/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/Ali-Marandi/Web-Scraper-Framework/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 Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Ali-Marandi/Web-Scraper-Framework web-shader-extractor --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ali-Marandi/Web-Scraper-Framework.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/Ali-Marandi/Web-Scraper-Framework/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 Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Ali-Marandi/Web-Scraper-Framework web-shader-extractor --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ali-Marandi/Web-Scraper-Framework.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/Ali-Marandi/Web-Scraper-Framework/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/Ali-Marandi/Web-Scraper-Framework.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 Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Ali-Marandi/Web-Scraper-Framework 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/Ali-Marandi/Web-Scraper-Framework.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/Ali-Marandi/Web-Scraper-Framework/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 Ali-Marandi/Web-Scraper-Framework 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 Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Ali-Marandi/Web-Scraper-Framework.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/Ali-Marandi/Web-Scraper-Framework/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 Ali-Marandi/Web-Scraper-Framework --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 Ali-Marandi/Web-Scraper-Framework web-shader-extractor --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ali-Marandi/Web-Scraper-Framework.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/Ali-Marandi/Web-Scraper-Framework/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
- 107
- Token cost
- ~1.1k tokens
- SKILL.md length
- 144 words
- Files
- 12 (incl. scripts, references)
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- None found
At a glance
从网页中提取 WebGL/Canvas/Shader 视觉特效代码，反混淆后移植为独立原生 JS 项目. An agent skill from Ali-Marandi/Web-Scraper-Framework.
- Works in 2 steps: 环境检查（首次自动执行） → 获取源码
- Tasks that involve Shaders
- SKILL.md covers Phase 0: 环境检查（首次自动执行）, Phase 1: 获取源码 and Reference 索引
- Runs JavaScript and Shell scripts from its folder; calls node, curl and brew; reaches npmmirror.com and nodejs.org
What it does
Web Shader Extractor is an agent skill from Ali-Marandi/Web-Scraper-Framework. 从网页中提取 WebGL/Canvas/Shader 视觉特效代码，反混淆后移植为独立原生 JS 项目。 触发条件：用户提供网址并要求提取 shader、提取特效、提取动画效果、提取 canvas 效果、 复刻某网站的视觉效果、"把这个网站的背景效果扒下来" 等。
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including scripts and reference files (for example `references/config-extraction.md`, `references/encoded-definitions.md` and `references/extraction-workflow.md`).
It sits in Game Development, covering Shaders and 3D graphics and WebGL. It works with Playwright. The repository describes itself as: Flexible and Scalable Web Scraping Framework.
When your agent uses it
- Tasks that involve Shaders
- Tasks that involve 3D graphics and WebGL
Example prompts
- “把这个网站的背景效果扒下来”
- “/web-shader-extractor”
Requirements
- Node.js
- A Bash shell
Workflow steps
2 steps, taken from the step headings in SKILL.md.
- 环境检查（首次自动执行）
- 获取源码
What it can do on your machine
Read from SKILL.md and the folder at commit f8af4cd. 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
Ships 2 files in scripts/ (JavaScript and Shell), which the agent can run.
Shell commands in SKILL.md call:
nodecurlbrewnpmnpx
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:
npmmirror.comnodejs.org
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 1.1k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 38 tokens; SKILL.md has 144 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: warnings
The automated check found patterns that need a careful read before installing.
- WarningTells the agent its actions are pre-authorized / not to stop for confirmationSKILL.md:62
），先尝试自动修复（重新安装依赖），若仍失败则降级为纯 curl 模式继续工作，不要停下来询问用户。
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); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 144 words (~1,055 tokens).
- name
- web-shader-extractor
Files
SKILL.md and 11 other files (scripts, references) in skills/web-shader-extractor of Ali-Marandi/Web-Scraper-Framework.
- SKILL.md
- references/config-extraction.md
- references/encoded-definitions.md
- references/extraction-workflow.md
- references/porting-strategy.md
- references/shader-injection.md
- references/shaders-com.md
- references/tech-signatures.md
- references/tsl-extraction.md
- references/unicorn-studio.md
- scripts/fetch-rendered-dom.mjs
- scripts/scan-bundle.sh
Open the folder on GitHubat commit f8af4cd
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 skillAli-Marandi/Web-Scraper-Framework | 107 | — | ~1.1k | Automated safety check: Warn | None | |
| New ExperimentTresjs/tres | 3.8k | — | ~782 | Automated safety check: Pass | MIT | |
| Shader Extractcth9191/site-clone | 133 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Typegpusoftware-mansion-labs/skills | 291 | 2 repos | ~5.6k | Automated safety check: Pass | None | |
| Tslpmndrs/glyph | 393 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Stage RenderingSiege-Perilous/tableslayer | 122 | — | ~4.1k | Automated safety check: Pass | Custom licence |
Similar skills
Shader Extract
cth9191/site-clone
Extract, reproduce, and locally replay a single WebGL / WebGPU / Canvas / shader / animated-3D visual effect from a web page — the GPU-rendered surface that DOM/CSS cloning is blind to.
Typegpu
software-mansion-labs/skills
TypeGPU is type-safe WebGPU in TypeScript. An agent skill from software-mansion-labs/skills.
Tsl
pmndrs/glyph
Implement, migrate, review, debug, or verify Three.js Shading Language (TSL) materials, node graphs, WebGPU compute work, and post-processing.
Stage Rendering
Siege-Perilous/tableslayer
Architecture and gotchas for packages/stage — the Threlte/Three.js map renderer (layers, two-pass rendering, shaders, coordinate flips, performance tiers, disposal).
Threejs Materials
OWWZO/ai-agent
Three.js materials - PBR, basic, phong, shader materials, material properties.
More from Ali-Marandi/Web-Scraper-Framework
All 12 skills in this repoAminer Deep Search
Ali-Marandi/Web-Scraper-Framework
Activate this skill when the user wants deep, multi-round academic paper collection for a survey or literature review.
Interview Prep
Ali-Marandi/Web-Scraper-Framework
帮用户准备面试。基于目标 JD、公司、岗位方向，生成"高频面试题 + 参考回答 + 行为面 / 技术面 / Case 面分类题库"，并产出可打印的『面试备战手册』。当用户说"帮我准备面试""明天有面试 / 后天面试""面试题""面经""模拟面试""我要面 X 公司 Y 岗位""帮我准备 STAR 故事""怎么回答这道面试题""自我介绍 / 离职原因 / 优缺点 怎么答"，必须触发本…
Jd Resume Tailor
Ali-Marandi/Web-Scraper-Framework
给定一份 JD 和一份现有简历，做"JD 拆解 + 简历定向改写"。拆 JD 抽出硬技能、软技能、加分项；对照简历做 gap 分析；产出针对该岗位重写后的简历，突出相关经验、补齐关键词缺口、并保留候选人真实经历不编造。当用户说"针对这个岗位 / 这家公司改简历""帮我对一下这个 JD""我想投这个职位你看怎么改""把这份简历针对 X 公司优化""做一份定向版简历"，或同时给出 JD 文本 +…
Job Intent Tracker
Ali-Marandi/Web-Scraper-Framework
帮助用户梳理求职意向、生成目标岗位画像，并维护一份结构化的"岗位投递追踪表"。当用户说"我想换工作 / 不知道投什么岗 / 帮我看看我适合什么岗位 / 帮我管理投递进度 / 我投了好几家但记不住状态了 / 想做一个求职 OKR / 整理一下求职方向"，或上传简历但没说要改简历时，应该主动触发本 skill。本 skill 也适用于实习生、应届生、转行候选人在求职启动阶段做"自我盘点 +…
Resume Builder
Ali-Marandi/Web-Scraper-Framework
从零生成或全面优化一份中文简历，并导出 docx / pdf / markdown 多种格式。用 STAR 法则改写经历、做 ATS 关键词覆盖率检查、根据行业（互联网产品 / 技术 / 金融 / 通用）选模板。当用户说"帮我写简历 / 优化简历 / 简历不会写 / 我的简历太弱了 / 简历看起来不专业 / 简历改一改 / 给我做个简历模板 / 简历导出 / 简历加点关键词"，或者上传…
Dream Interpreter
Ali-Marandi/Web-Scraper-Framework
AI 解梦大师。用户描述梦境，智能追问关键细节后，从三个视角（周公解梦/心理分析/赛博神棍）生成解读，输出结构化 JSON 供前端渲染"梦境解析卡"。
Related
Works with
Categories
Questions about Web Shader Extractor
What does Web Shader Extractor do?
从网页中提取 WebGL/Canvas/Shader 视觉特效代码，反混淆后移植为独立原生 JS 项目. An agent skill from Ali-Marandi/Web-Scraper-Framework. Web Shader Extractor is an agent skill from Ali-Marandi/Web-Scraper-Framework.
When should I use Web Shader Extractor?
Web Shader Extractor fits situations like: tasks that involve Shaders; tasks that involve 3D graphics and WebGL.
How do I install Web Shader Extractor in Claude Code?
Run `npx skills add Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a claude-code`. Or copy the skill folder (skills/web-shader-extractor in Ali-Marandi/Web-Scraper-Framework) 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 Ali-Marandi/Web-Scraper-Framework --skill web-shader-extractor -a codex`. Or copy the skill folder (skills/web-shader-extractor in Ali-Marandi/Web-Scraper-Framework) 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 Ali-Marandi/Web-Scraper-Framework --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 JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (node, curl, brew, npm and npx). Our summary lists: Node.js; A Bash shell.
Does Web Shader Extractor access the network?
SKILL.md names 2 domains. In commands or code: npmmirror.com and nodejs.org; the agent is likely to contact these 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 flagged 1 warning(s): tells the agent its actions are pre-authorized / not to stop for confirmation. Read the flagged lines before installing; the check is not a guarantee either way. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Web Shader Extractor use?
No licence was found for Web Shader Extractor or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Web Shader Extractor use?
About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 9.5k tokens, read only when the agent opens those files.
What are the alternatives to Web Shader Extractor?
Skills that share tags, products or a category with Web Shader Extractor: New Experiment (Tresjs/tres, 3.8k stars), Shader Extract (cth9191/site-clone, 133 stars), Typegpu (software-mansion-labs/skills, 291 stars) and Tsl (pmndrs/glyph, 393 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?
Ali-Marandi (a GitHub user) maintains it in Ali-Marandi/Web-Scraper-Framework, which has 107 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on August 31, 2026.
Source: Ali-Marandi/Web-Scraper-Framework on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.