Навыки typegpu
🎨
typegpu
Безопасно
Создание GPU-рендеринговых композиций HyperFrames с TypeGPU и WebGPU
Композиции HyperFrames, которым нужны эффекты на шейдерах, упираются в ограничения DOM и CSS. Этот навык даёт Claude шаблоны WGSL, шаги инициализации WebGPU и интеграцию с таймлайном, необходимые для детерминированного рендеринга кадров на GPU во всех режимах плеера HyperFrames.
Поддерживает: Claude Codex Code(CC)
1
Скачать ZIP навыка
2
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
3
Включите и начните использовать
Протестировать
Использование «typegpu». Как следует упорядочить инициализацию WebGPU относительно регистрации таймлайна GSAP?
Ожидаемый результат:
- Шаг 1: зарегистрируйте все GSAP-твины синхронно перед любым await
- Шаг 2: войдите в асинхронный IIFE, который вызывает navigator.gpu.requestAdapter() и adapter.requestDevice()
- Шаг 3: настройте контекст холста с устройством и предпочтительным форматом
- Шаг 4: добавьте слушатель события hf-seek, который вызывает функцию рендеринга с e.detail.time
- Шаг 5: для видео-рендеров ожидайте device.queue.onSubmittedWorkDone() после каждой отправки
Использование «typegpu». Какой alphaMode использовать для наложения частиц поверх обычного видеоэлемента?
Ожидаемый результат:
- Используйте alphaMode: 'premultiplied' в конфигурации контекста GPU-холста
- GPU-холст остаётся прозрачным там, где alpha равна 0, позволяя видеть нижележащий <video>
- Используйте alphaMode: 'opaque' для случаев, когда GPU-конвейер рисует весь кадр целиком, включая видеоконтент
Аудит безопасности
Безопасноv1 • 6/7/2026
Static analysis flagged 49 patterns as potentially malicious (32 medium-severity backtick execution, 17 high-severity C2 and crypto keywords), but every flagged location is a markdown code fence, inline code span, WGSL shader snippet, or documentation heading within SKILL.md. The file contains no executable JavaScript, no network calls, no file system access, no environment access, and no command execution. All 49 findings are false positives caused by the static scanner misidentifying markdown backticks as Ruby/shell backtick execution and WGSL/GPU terminology as C2 or crypto indicators.
1
Просканировано файлов
175
Проанализировано строк
3
находки
1
Всего аудитов
Проблемы среднего риска (2)
Markdown backticks misidentified as shell backtick execution (32 locations)
The static analyzer flagged markdown fenced code blocks and inline code spans as 'Ruby/shell backtick execution' at SKILL.md lines 8, 12, 13, 14, 16, 18, 22, 69, 73, 75, 91, 95, 97, 124, 126, 135, 139, 140, 146, 154, 156, 160, 165, 171, 172, 173. All instances are triple-backtick code fences or single-backtick inline code used to display HTML, JavaScript, and WGSL shader examples for educational documentation. There is no actual shell or Ruby execution in this file.
WGSL shader snippets misidentified as C2 keywords (15 locations)
The static analyzer flagged legitimate WGSL shader code (struct declarations, builtin attributes like @builtin(position) and @location(0), array literals, and vector type names) as C2 keywords at SKILL.md lines 147, 150, 151, 161, 162, 163. These are WGSL grammar tokens for GPU shader programming shown inside a markdown code block. They are not command-and-control indicators; the skill does not perform any network communication.
Проблемы низкого риска (1)
Documentation headers and description misidentified as system reconnaissance and weak crypto (4 locations)
The static analyzer flagged 'Weak cryptographic algorithm' at SKILL.md:3 and 'System reconnaissance' at SKILL.md:3, 93, 158. Line 3 is the YAML frontmatter description field. Lines 93 and 158 are documentation section headings ('Video-Backed Effects (Liquid Glass, Distortion)' and 'Rounded-Rect SDF (Liquid Glass Pill)'). No cryptography, fingerprinting, or host enumeration occurs in this file.
Проверено: claude
Оценка качества
38
Архитектура
100
Сопровождаемость
87
Контент
50
Сообщество
93
Безопасность
91
Соответствие спецификации
Что вы можете построить
Создание шейдерной композиции-наложения
Дизайнер хочет наложить системы частиц или эффекты искажений поверх HTML-видеоэлемента с помощью прозрачного GPU-холста.
Миграция существующей WebGL-композиции на WebGPU
Инженер имеет рабочий конвейер WebGL и хочет конвертировать шейдеры и циклы рендеринга в современный API WebGPU с WGSL.
Создание эффекта glass-morphism или жидкого стекла
Креативный кодер хочет получить матовое размытие, хроматическую рефракцию и скруглённый прямоугольник SDF, скомпонированные на видео для брендового ролика.
Попробуйте эти промпты
Создать WebGPU-наложение с частицами
Напишите композицию HyperFrames, которая использует прозрачный WebGPU-холст для рендеринга эффекта дрейфа 5000 частиц поверх фонового видео. Используйте шаблоны из навыка typegpu: регистрируйте GSAP-твины синхронно, инициализируйте WebGPU внутри асинхронного IIFE, слушайте события hf-seek и вызывайте onSubmittedWorkDone для захвата в режиме рендеринга.
Конвертировать фрагментный шейдер WebGL в WGSL
Переведите этот фрагментный шейдер WebGL GLSL в WGSL, затем подключите его к WebGPU-холсту HyperFrames, используя полноэкранный треугольный вершинный шейдер из навыка typegpu. Шейдер создаёт эффект матового стекла поверх видеотекстуры.
Добавить жидкостеклянную капсулу к видео
Используя шаблоны скруглённого прямоугольника SDF и двухпроходного даунсэмпл-размытия из навыка typegpu, создайте композицию HyperFrames, в которой жидкостеклянная капсула с хроматической рефракцией накладывается на видеоэлемент. Анимируйте радиус скругления капсулы от 0 до 32 пикселей за 1,5 секунды.
Диагностика недетерминированного GPU-рендера
Композиция HyperFrames с использованием навыка typegpu корректно рендерится в превью, но выдаёт разные кадры при каждом запуске в режиме рендеринга. Проверьте код на наличие Math.random, requestAnimationFrame, performance.now и отсутствующих вызовов onSubmittedWorkDone. Предложите конкретные исправления со ссылкой на раздел о детерминизме в навыке typegpu.
Лучшие практики
- Регистрируйте все таймлайны GSAP и дескрипторы HF-таймлайна синхронно до первого await, чтобы плеер HyperFrames считал их при загрузке страницы.
- Запускайте каждый GPU-рендер из события hf-seek и window.__hfTypegpuTime, никогда из requestAnimationFrame или performance.now, чтобы композиции оставались детерминированными в режимах плеера и рендеринга.
- Для GPU-эффектов на основе видео ожидайте loadedmetadata перед созданием исходной текстуры и используйте нативные размеры видео, чтобы избежать артефактов масштабирования.
Избегать
- Не вызывайте Math.random() внутри кода рендеринга или шейдера; используйте сидированный PRNG, чтобы кадры были воспроизводимыми между запусками.
- Не используйте requestAnimationFrame в качестве цикла рендеринга; рендерите только в ответ на события hf-seek, чтобы соответствовать перемотке таймлайна HyperFrames.
- Не полагайтесь на copyExternalImageToTexture для видеовходов в режиме headless-рендеринга; предварительно извлеките ключевые кадры в формате PNG для продакшн-рендеров.
Часто задаваемые вопросы
Запускает ли этот навык какой-либо код самостоятельно?
Нет. Навык представляет собой один markdown-файл, содержащий документацию, фрагменты WGSL и справочные шаблоны. Агент читает его и пишет новый код композиции для пользователя.
Какая функция WebGPU требуется?
Браузер должен предоставлять navigator.gpu и успешно возвращать адаптер из navigator.gpu.requestAdapter(). Навык не предоставляет fallback на WebGL.
Можно ли использовать этот навык со стандартным видеоэлементом HyperFrames?
Да. Используйте alphaMode: 'premultiplied', чтобы сделать GPU-холст прозрачным и позволить нижележащему видеоэлементу просвечивать, затем используйте copyExternalImageToTexture для передачи видео в шейдер.
Почему GSAP-твины должны регистрироваться до любого await?
Плеер HyperFrames считывает window.__timelines сразу при загрузке страницы. Если вы регистрируете их внутри асинхронного блока, плеер мог уже просканировать страницу и пропустить таймлайн.
Как обеспечить совпадение вывода в режиме рендеринга с превью?
Избегайте Math.random, requestAnimationFrame и performance.now. Рендерите только по событиям hf-seek. После каждой отправки на GPU ожидайте device.queue.onSubmittedWorkDone(), чтобы кадр был сброшен до захвата.
Каков рекомендуемый способ создать размытие матового стекла в WGSL?
Используйте двухпроходный подход: сначала отрендерите полноразмерную текстуру в текстуру масштаба 1/6, затем сэмплируйте эту маленькую текстуру с билинейной фильтрацией для матовой внутренности, сохраняя полноразмерное сэмплирование для резких областей и хроматической рефракции.