Leaderboard/Developer Tooling/skills
Last commit on July 3, 2026·Created on March 12, 2026

lixiaolin94/skills

Captures web visual effects as evidence, then replays them locally.
Combined rank
#398
across all skills
In Developer Tooling
#34
category rank
Stars
763
+0.3% in last 7d
Forks
47
-2.1% in last 7d
Watchers
1
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

Web Shader Extractor gives frontend engineers, performance analysts, and archival specialists a structured pipeline for extracting, reproducing, and porting WebGL, WebGPU, and Canvas visual effects from live webpages. It records shader source, render graph data, timing, and input evidence, builds an evidence-matched local baseline, and projectizes it into an editable form—all while enforcing honest labeling and no fabricated numbers. The skill helps creative developers remix reference implementations, QA teams investigate rendering pipelines, and archivists faithfully replay web visual content.

WHO IT'S FOR
Creative Frontend Engineers
extracting and replaying shader/canvas effects from webpages
Performance and QA Engineers
capturing render graph, timing, and resource facts
Web Archiving and Forensics Specialists
replaying web visual content faithfully from evidence
Open Web Graphics Researchers
analyzing web rendering pipelines from source and runtime
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

Install the whole skills repository

Installs: The complete lixiaolin94/skills repository bundle; the documented collection includes web-shader-extractor, though other skills may also be included by the bundle.

  1. Run this terminal command to install the whole repository.

    npx skills add https://github.com/lixiaolin94/skills
README.md · Checked Sep 18, 2026web-shader-extractor/SKILL.md · Checked Sep 18, 2026

Give it something to do.

Suggested first task

Identify and document a webpage’s target visual

Uses web-shader-extractor

  • [WEBPAGE_URL]: the webpage containing the visual effect
  • [TARGET_VISUAL]: a concise description of the particular visual to investigate
  • [OUTPUT_DIRECTORY]: the directory where evidence and generated artifacts should be stored
Use the web-shader-extractor skill to inspect [WEBPAGE_URL]. Identify and lock the target WebGL, WebGPU, Canvas, shader, or animated visual specified as [TARGET_VISUAL]. Record the target-bound facts, current unknowns, and next action in [OUTPUT_DIRECTORY]. Stop before implementation or projectization.
web-shader-extractor/SKILL.md · Checked Sep 18, 2026