web-shader-extractor — скилл
Скилл разбирает и переносит WebGL, WebGPU и Canvas-эффекты со страницы в отдельный локальный проект на нативном JS
- 773 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Загружает и разбирает содержимое произвольных веб-страниц, включая отрисованный DOM и бандлы
- Запускает вспомогательные скрипты на машине пользователя
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/web-shader-extractorОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Загружает и разбирает содержимое произвольных веб-страниц, включая отрисованный DOM и бандлы
- Запускает вспомогательные скрипты на машине пользователя
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл ведет агента через разбор визуального эффекта на веб-странице: анимированного фона, интерактивной 3D-сцены, шейдера или Canvas-анимации. Сначала он фиксирует целевую группу поверхностей рендеринга, затем собирает доказательную базу: исходный код, объекты во время выполнения, кадровые захваты, source maps, тайминги и ввод. По этим данным он строит локальный базовый вариант, совпадающий с оригиналом, и только потом оформляет его в редактируемый проект. Работа устроена как машина состояний с жесткими воротами перехода: пока цель не зафиксирована, разрешены только узкие пробы, а базовый вариант нельзя переписывать ради упрощения. Отдельное правило запрещает подгонять яркость, время и цвет, чтобы скрыть нехватку данных о конвейере, и требует честно помечать факты как подтвержденные, частичные или предположительные. Для обычного клонирования DOM и CSS скилл не предназначен.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые изучают и воспроизводят графические эффекты со страниц.
Подходит, если
- Нужно разобрать WebGL, WebGPU или Canvas-эффект со страницы и понять, как он устроен
- Нужно локально воспроизвести анимированный фон или интерактивную 3D-сцену
- Нужен базовый вариант эффекта, совпадающий с оригиналом, а потом редактируемый проект
Не подходит, если
- Нужно скопировать обычную верстку на DOM и CSS без графического эффекта
- Нужен статичный скриншот, а не работающий рендер
- Нет прав использовать чужой эффект в своем проекте
Пример запроса к агенту
Разбери анимированный фон с этой страницы и собери локальную копию на нативном JSОграничения
Скилл рассчитан только на задачи с шейдером или Canvas, для клонирования DOM, CSS и статичных скриншотов он не подходит. Он загружает и разбирает содержимое целевой страницы, включая отрисованный DOM и бандлы, поэтому применять его стоит с оглядкой на права на исходный эффект. Крупные захваты и результаты складываются в каталог вывода, а не в переписку.
Как отключить. Удалите папку web-shader-extractor из каталога скиллов агента, например ~/.claude/skills/.
Частые вопросы
Это подходит для любой страницы?
Нет. Скилл нужен там, где есть цель на шейдере, WebGL, WebGPU или Canvas. Для обычного клонирования DOM и CSS он не предназначен.
Откуда уверенность, что копия совпадает?
Скилл опирается на доказательства: исходники, объекты во время выполнения, кадровые захваты, и честно помечает факты как подтвержденные, частичные или предположительные.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Скилл помогает писать и отлаживать GLSL-шейдеры из готовых блоков, собирает зависимости в один файл и проверяет код для WebGL2.
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Три скилла для веб-3D: шейдеры GLSL, сцены Three.js с React Three Fiber и частицы на видеокарте.
Скилл для разработки WebGPU-приложений на Three.js с шейдерами на TSL: рендерер, node-материалы, compute-шейдеры, пост-обработка
Скилл ведет агента от выбора рендерера до проверки в браузере для небольших GPU-эффектов в интерфейсах на WebGL и WebGPU.
Коротко о README
README представляет небольшую коллекцию скиллов для кодовых агентов, в которой сейчас один скилл, web-shader-extractor. Он извлекает эффекты на WebGL, Canvas и шейдерах со страниц и переносит их в отдельные проекты на нативном JS. Установить можно весь репозиторий или один скилл командой npx skills add. Есть раздел благодарностей и указана лицензия MIT. Внутри скилла подробные справочники по этапам разбора, шаблоны отчетов и вспомогательные скрипты.
Бейдж для README
Исходный 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.