skill CX Codex

hyva-render-media-image — Claude Code skill: responsive Hyvä images

Q: How do I install hyva-render-media-image in Claude Code?

Run `npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-code`. The skill lands at `~/.claude/skills/hyva-render-media-image/SKILL.md`.

Q: What does hyva-render-media-image do?

It generates responsive `` code for Hyvä Theme templates using the `\Hyva\Theme\ViewModel\Media` view model. The agent calls `getResponsivePictureHtml()` with your image configs and attributes.

Q: What do I need before using the skill?

The image path inside `pub/media/` and its width and height in pixels. If the image comes from a PHP variable, you also need the array structure — its format is documented in `references/rendering-images.md`.

Writes responsive <picture> markup for Hyvä Theme templates through the Media view model. Useful when mobile and desktop need different image sources.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-code

Open on GitHub

What hyva-render-media-image does

The skill points the agent at \Hyva\Theme\ViewModel\Media and builds a getResponsivePictureHtml() call from your data. You supply an array of image configs, attributes for the <img> tag (alt, class, loading, fetchpriority) and attributes for the <picture> wrapper. The agent then picks the right pattern: a single image with literal values, one pulled from a PHP variable, several images from an array, or separate sources behind media queries.

Loading strategy follows the image's role. A hero or any above-the-fold image gets 'loading' => 'eager' with 'fetchpriority' => 'high'; everything further down gets 'loading' => 'lazy'. That split matters for LCP and CLS, so don't ask for lazy loading on the image that fills the first screen.

Have the file path inside pub/media/ and its pixel dimensions ready before you start — the config can't be assembled without them. When the image comes from a PHP variable, the skill tells you which array shape it expects and points to references/rendering-images.md, where the full API reference lives.

What it helps with

build a <picture> with separate mobile and desktop sources
render a hero banner with priority loading
drop a product image into a Hyvä PHTML template
switch below-the-fold images to lazy loading
set alt text and classes on both <img> and the <picture> wrapper

Example prompts for the agent

Render a responsive hero from wysiwyg/hero.jpg, 1920x800, with a different file for mobile
Output the product image from $imageData in my Hyvä template
Add a below-the-fold image with lazy loading and alt text

How to install hyva-render-media-image

1Skills CLI (Vercel)

npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-code

2Manually: put the files in place

~/.claude/skills/hyva-render-media-image/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/hyva-render-media-image/

1Skills CLI (Vercel)

npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a codex

2Manually: put the files in place

.agents/skills/hyva-render-media-image/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a cursor

2Manually: put the files in place

.cursor/skills/hyva-render-media-image/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install hyva-themes/hyva-ai-tools hyva-render-media-image

2Manually: put the files in place

.github/skills/hyva-render-media-image/SKILL.md

1Skills CLI (Vercel)

npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a gemini-cli

2Platform CLI

gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-render-media-image

Manually: put the files in place

.devin/skills/hyva-render-media-image/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about hyva-render-media-image

How do I install hyva-render-media-image in Claude Code?

Run npx skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image -a claude-code. The skill lands at ~/.claude/skills/hyva-render-media-image/SKILL.md.

What does hyva-render-media-image do?

It generates responsive <picture> code for Hyvä Theme templates using the \Hyva\Theme\ViewModel\Media view model. The agent calls getResponsivePictureHtml() with your image configs and attributes.

What do I need before using the skill?

The image path inside pub/media/ and its width and height in pixels. If the image comes from a PHP variable, you also need the array structure — its format is documented in references/rendering-images.md.

Similar skills

Everything for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set12

hyva-create-module Scaffolds a Magento 2 module in app/code/ with registration.php, composer.json and etc/module.xml. Useful when you need a new module without copying boilerplate by hand. CX Codex +1 1,300installs hyva-theme-list Walks a Magento 2 project and prints the path of every Hyvä theme it finds. Useful when the agent has to know which theme it is editing. CX Codex +1 1,300installs hyva-playwright-test Guides writing Playwright end-to-end tests for Hyvä Magento storefronts using Alpine.js. It resolves locator conflicts caused by hidden DOM elements. CX Codex +1 1,300installs hyva-ui-component This skill applies template-based Hyvä UI components to a selected theme. It helps choose a component, review its variant and copy the required files. CX Codex +1 1,300installs hyva-compile-tailwind-css Builds Tailwind CSS stylesheets for Hyvä themes in Magento 2. It triggers production builds or watch mode when updated utility classes fail to render on the storefront. CX Codex +1 1,300installs hyva-child-theme Builds a Hyvä child theme inside a Magento 2 project, including its frontend structure and Tailwind CSS setup. Useful when starting a custom theme. CX Codex +1 1,300installs hyva-alpine-component Guides the agent through building Alpine.js components for Hyvä themes in Magento 2 that keep working when Content Security Policy is strict. CX Codex +1 1,300installs hyva-exec-shell-cmd Identifies the Magento dev setup and selects the right command wrapper for containers or local execution. CX Codex +1 1,300installs