hyva-render-media-image
OfficialGenerate responsive images for Hyvä templates.
Authorhyva-themes
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill simplifies generating compliant, responsive image markup for Hyvä templates by automating the creation of a <picture> element using the Hyva Theme Media view model. It eliminates manual coding of responsive images and ensures correct width/height to reduce CLS.
Core Features & Use Cases
- Semantic markup: Generate a complete <picture> element with multiple sources for art-direction.
- Flexible configurations: Support multiple image configs including path, width, height, media queries, and an optional fallback image.
- Real-world scenarios: Use for hero banners, product galleries, and CMS content images across desktop and mobile.
- Best practices: Guidance on lazy/eager loading, alt text, and media-query separation to optimize performance.
Quick Start
Use the hyva-render-media-image skill to generate a responsive picture element for a hero image with path 'wysiwyg/homepage-hero.jpg', width 1920, height 600, and a mobile variant.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: hyva-render-media-image Download link: https://github.com/hyva-themes/hyva-ai-tools/archive/main.zip#hyva-render-media-image Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.