web-shader-extractor — скилл Claude Code: что делает и установка
Извлекает и локально воспроизводит WebGL, WebGPU, Canvas и шейдерные эффекты со страницы. Нужен для разбора анимированных фонов и интерактивной 3D-графики.
npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-codeЧто делает web-shader-extractor
Скилл исследует визуальный эффект на веб-странице, фиксирует поверхность рендеринга и собирает сведения о шейдерах, ресурсах, графе рендера, времени и вводе. Затем он создаёт локальный воспроизводимый baseline, сверенный с наблюдаемыми данными, и переносит его в редактируемый проект.
Внутри есть маршрутизация по состояниям, набор reference-файлов, шаблоны отчётов и манифестов, а также скрипты для DOM и bundle-инвентаризации. Сначала нужно зафиксировать целевую поверхность, затем добиться готового replay и проверить baseline. Для обычного клонирования DOM/CSS скилл не предназначен. Playwright нужен только для scripts/fetch-rendered-dom.mjs, если он уже доступен.
Какие задачи решает
- разобрать WebGL-эффект на странице
- зафиксировать шейдеры и ресурсы рендера
- воспроизвести анимированный фон локально
- собрать проверяемый baseline перед переносом в проект
- исследовать граф рендера и временные параметры
Примеры запросов агенту
- Проанализируй визуальный эффект на этой веб-странице и зафиксируй целевую поверхность рендеринга.
- Воспроизведи локально интерактивную WebGL-сцену, сначала собрав доказательства о шейдерах, ресурсах и времени.
- Собери проверяемый baseline для Canvas-эффекта, затем подготовь его к переносу в проект.
Как установить web-shader-extractor
1Через Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code2Вручную: положить файлы
~/.claude/skills/web-shader-extractor/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-shader-extractor/
1Через Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a codex2Вручную: положить файлы
.agents/skills/web-shader-extractor/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a cursor2Вручную: положить файлы
.cursor/skills/web-shader-extractor/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install lixiaolin94/skills web-shader-extractor2Вручную: положить файлы
.github/skills/web-shader-extractor/SKILL.md1Через Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a gemini-cli2Командой платформы
gemini skills install https://github.com/lixiaolin94/skills --path web-shader-extractorВручную: положить файлы
.devin/skills/web-shader-extractor/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add lixiaolin94/skills --skill web-shader-extractor -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о web-shader-extractor
Как установить web-shader-extractor в Claude Code?
Выполните npx skills add lixiaolin94/skills --skill web-shader-extractor -a claude-code, затем проверьте файл ~/.claude/skills/web-shader-extractor/SKILL.md.
Что делает web-shader-extractor?
Скилл исследует WebGL, WebGPU, Canvas и похожие визуальные эффекты на веб-странице, собирает данные о рендеринге и подготавливает локальное воспроизведение перед проектизацией.
Подходит ли скилл для клонирования обычной HTML/CSS-страницы?
Нет. Он рассчитан на задачи с WebGL, WebGPU, Canvas, шейдерами, анимированными фонами или интерактивной 3D-графикой.
