hyva-render-media-image — скилл для Claude Code
Генерирует код адаптивных <picture> для шаблонов Hyvä Theme через view model Media. Пригодится, когда нужны разные изображения под мобильные и десктоп.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-codeЧто делает hyva-render-media-image
Скилл подключает агента к \Hyva\Theme\ViewModel\Media и по вашим данным собирает вызов getResponsivePictureHtml(). На вход идут массив конфигураций картинок, атрибуты для <img> (alt, class, loading, fetchpriority) и атрибуты для обёртки <picture>. Дальше агент сам выбирает шаблон под задачу: одна картинка литералом, картинка из переменной, несколько из массива или разные источники под медиазапросы.
Стратегию загрузки скилл разводит по типу изображения: для hero-баннера и всего, что попадает в первый экран, ставит 'loading' => 'eager' и 'fetchpriority' => 'high', для остального — 'loading' => 'lazy'. Это влияет на LCP и CLS, поэтому для картинки первого экрана ленивую загрузку лучше не просить.
Перед запуском подготовьте путь к файлу в pub/media/ и его размеры в пикселях — без них конфигурацию не собрать. Если картинка приходит из PHP-переменной, скилл скажет, какой структуре массива она должна соответствовать, и подсмотрит формат в references/rendering-images.md. Там же лежит полный справочник по API.
Какие задачи решает
- собрать
<picture>с разными источниками под мобильные и десктоп - вывести hero-баннер с приоритетной загрузкой
- вставить картинку товара в PHTML-шаблон Hyvä
- перевести изображения ниже первого экрана на ленивую загрузку
- задать alt и классы для
<img>и обёртки<picture>
Примеры запросов агенту
- Сделай адаптивную картинку для баннера из
wysiwyg/hero.jpg, 1920x800, для мобильных другой файл - Отрендери изображение товара из переменной
$imageDataв шаблоне Hyvä - Добавь картинку ниже первого экрана с ленивой загрузкой и alt-текстом
Как установить hyva-render-media-image
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-code2Вручную: положить файлы
~/.claude/skills/hyva-render-media-image/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/hyva-render-media-image/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a codex2Вручную: положить файлы
.agents/skills/hyva-render-media-image/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a cursor2Вручную: положить файлы
.cursor/skills/hyva-render-media-image/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-render-media-image2Вручную: положить файлы
.github/skills/hyva-render-media-image/SKILL.md1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a gemini-cli2Командой платформы
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-render-media-imageВручную: положить файлы
.devin/skills/hyva-render-media-image/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о hyva-render-media-image
Как установить hyva-render-media-image в Claude Code?
Выполните npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-code. Скилл окажется в ~/.claude/skills/hyva-render-media-image/SKILL.md.
Что делает hyva-render-media-image?
Собирает код адаптивных <picture> для шаблонов Hyvä Theme через view model \Hyva\Theme\ViewModel\Media. Агент вызывает getResponsivePictureHtml() с вашими конфигурациями картинок и атрибутами.
Что нужно подготовить для работы скилла?
Путь к изображению в pub/media/ и его размеры в пикселях. Если картинка берётся из PHP-переменной, нужна структура массива — её формат описан в references/rendering-images.md.
