web-shader-extractor

Установка

npx skillfoxx add skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .claude/skills
cp -R "$tmp/web-shader-extractor" .claude/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .github/skills
cp -R "$tmp/web-shader-extractor" .github/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractor

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .devin/skills
cp -R "$tmp/web-shader-extractor" .devin/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .cline/skills
cp -R "$tmp/web-shader-extractor" .cline/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .roo/skills
cp -R "$tmp/web-shader-extractor" .roo/skills/web-shader-extractor

npx skills add lixiaolin94/skills --skill web-shader-extractor -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractor

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractor

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lixiaolin94/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /web-shader-extractor/
git -C "$tmp" checkout ee7e9c50049bf9278b7810c3cd00802cfa401138
mkdir -p .agents/skills
cp -R "$tmp/web-shader-extractor" .agents/skills/web-shader-extractor

npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл ведет агента через разбор визуального эффекта на веб-странице: анимированного фона, интерактивной 3D-сцены, шейдера или Canvas-анимации. Сначала он фиксирует целевую группу поверхностей рендеринга, затем собирает доказательную базу: исходный код, объекты во время выполнения, кадровые захваты, source maps, тайминги и ввод. По этим данным он строит локальный базовый вариант, совпадающий с оригиналом, и только потом оформляет его в редактируемый проект. Работа устроена как машина состояний с жесткими воротами перехода: пока цель не зафиксирована, разрешены только узкие пробы, а базовый вариант нельзя переписывать ради упрощения. Отдельное правило запрещает подгонять яркость, время и цвет, чтобы скрыть нехватку данных о конвейере, и требует честно помечать факты как подтвержденные, частичные или предположительные. Для обычного клонирования DOM и CSS скилл не предназначен.

Для кого. Для фронтенд-разработчиков и дизайнеров, которые изучают и воспроизводят графические эффекты со страниц.

Пример запроса к агенту

Разбери анимированный фон с этой страницы и собери локальную копию на нативном JS

Ограничения

Скилл рассчитан только на задачи с шейдером или Canvas, для клонирования DOM, CSS и статичных скриншотов он не подходит. Он загружает и разбирает содержимое целевой страницы, включая отрисованный DOM и бандлы, поэтому применять его стоит с оглядкой на права на исходный эффект. Крупные захваты и результаты складываются в каталог вывода, а не в переписку.

Как отключить. Удалите папку web-shader-extractor из каталога скиллов агента, например ~/.claude/skills/.

Проверка безопасности

• Загружает и разбирает содержимое произвольных веб-страниц, включая отрисованный DOM и бандлы
• Запускает вспомогательные скрипты на машине пользователя

Коротко о README

README представляет небольшую коллекцию скиллов для кодовых агентов, в которой сейчас один скилл, web-shader-extractor. Он извлекает эффекты на WebGL, Canvas и шейдерах со страниц и переносит их в отдельные проекты на нативном JS. Установить можно весь репозиторий или один скилл командой npx skills add. Есть раздел благодарностей и указана лицензия MIT. Внутри скилла подробные справочники по этапам разбора, шаблоны отчетов и вспомогательные скрипты.

SKILL.md

---
name: web-shader-extractor
description: >
  Use when a user gives or references a webpage URL and wants to extract,
  reproduce, port, or locally replay a WebGL, WebGPU, Canvas, shader-like,
  animated background, interactive 3D, or web visual effect. Locks the target
  rendering surface group, records shader/resource/render graph/timing/input
  evidence, builds an evidence-matched local baseline, then projectizes it.
  Do not use for ordinary DOM/CSS page cloning.
---

# Web Shader Extractor

Index for WebGL / WebGPU / Canvas rendering investigation and local replay.
Start from the target visual. Lock the surface group. Trace source or runtime facts. Build a runnable baseline. Then projectize.

Похожие