hyva-themes/hyva-render-media-image
skills/hyva-render-media-image/SKILL.md
Generate responsive image code for Hyvä Theme templates using the Media view model. This skill should be used when the user wants to render images in a Hyvä template, create responsive picture elements, add hero images, product images, or any image that needs responsive breakpoints. Trigger phrases include "render image", "add image to template", "responsive image", "picture element", "hero image", "responsive banner", "image for mobile and desktop", or "banner image".
$ install --global
skillsauthnpx skillsauth add hyva-themes/hyva-ai-tools hyva-render-media-imageInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 5, 2026, 8:54 AM56.6s2 files scanned
SKILL.md
- name:
- hyva-render-media-image
- description:
- Generate responsive image code for Hyvä Theme templates using the Media view model. This skill should be used when the user wants to render images in a Hyvä template, create responsive picture elements, add hero images, product images, or any image that needs responsive breakpoints. Trigger phrases include "render image", "add image to template", "responsive image", "picture element", "hero image", "responsive banner", "image for mobile and desktop", or "banner image".
Hyvä Render Image
Generate responsive <picture> elements for Hyvä Theme templates using the \Hyva\Theme\ViewModel\Media view model.
When to Use
- Adding images to Hyvä PHTML templates
- Creating responsive images with different sources for mobile/desktop
- Implementing hero banners, product images, or CMS content images
- Optimizing images for Core Web Vitals (LCP, CLS)
Workflow
1. Gather Image Requirements
The user may provide image data in one of these ways:
Option A: Direct values - Ask the user for:
- Image path(s) - Location in
pub/media/(e.g.,wysiwyg/hero.jpg,catalog/product/...) - Image dimensions - Width and height in pixels
- Responsive requirements - Different images for mobile vs desktop?
- Image purpose - Hero/LCP image (eager loading) or below-fold (lazy loading)?
- Alt text - Meaningful description for accessibility
Option B: PHP variable - The user provides a variable name (e.g., $imageData, $heroImage). Inform the user of the required array structure documented in references/rendering-images.md under ## Image Configuration Format.
2. Generate the Code
Refer to references/rendering-images.md for the complete API reference, code examples, and all configuration options.
Choose the appropriate pattern:
| Scenario | Pattern to Use |
|----------|---------------|
| Single image, literal values | Single Image Example |
| Single image from variable | Wrap in array: [$imageData] |
| Multiple images from variable | Pass directly: $images |
| Different images for mobile/desktop | Responsive Images with Media Queries |
| Need to style the <picture> wrapper | Picture Element Attributes |
Base template:
<?php
/** @var \Hyva\Theme\ViewModel\Media $mediaViewModel */
$mediaViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Media::class);
echo $mediaViewModel->getResponsivePictureHtml(
$images, // Array of image configs (see reference for format)
$imgAttributes, // Optional: alt, class, loading, fetchpriority
$pictureAttributes // Optional: class, data-* attributes for <picture>
);
3. Set Loading Strategy
| Image Type | Attributes |
|------------|------------|
| Hero/LCP (above fold) | 'loading' => 'eager', 'fetchpriority' => 'high' |
| Below fold | 'loading' => 'lazy' |
Resources
references/rendering-images.md- Complete API reference with method signature, all configuration options, code examples, and best practices
Related Skills
hyva-themes/hyva-ui-component
documentation
VerifiedTrustedCommunity
Apply Hyva UI template-based components to a Hyvä theme. This skill should be used when the user wants to add, install, or apply a Hyva UI component (such as header, footer, gallery, menu, minicart, etc.) to their Hyvä theme. It lists available non-CMS components and their variants, displays component README instructions, and copies component files to the theme directory.
65SKILL.mdUpdated May 5, 2026
hyva-themes/hyva-theme-list
data-ai
VerifiedTrustedCommunity
List all Hyvä theme paths in a Magento 2 project. This skill should be used when the user wants to find Hyvä themes, list available themes, discover theme paths, or when other skills need to locate Hyvä themes. Trigger phrases include "list hyva themes", "find themes", "show themes", "available themes", "theme paths".
65SKILL.mdUpdated May 5, 2026
hyva-themes/hyva-playwright-test
development
VerifiedTrustedCommunity
Write Playwright tests for Hyvä themes with Alpine.js components. This skill should be used when writing e2e tests, creating page objects, or debugging selector issues in Playwright tests for Hyvä Magento storefronts. Trigger phrases include "write playwright test", "playwright alpine", "test hyva page", "e2e test", "playwright selector".
65SKILL.mdUpdated May 5, 2026
hyva-themes/hyva-exec-shell-cmd
tools
VerifiedTrustedCommunity
Utility skill to detect Magento development environment and determine command wrapper. This skill should be used by other skills that need to execute shell commands in the Magento environment. It detects Warden, docker-magento, DDEV, and local environments and provides the appropriate command wrapper.
65SKILL.mdUpdated May 5, 2026