Implement art direction for Next.js images using getImageProps(). Use when showing different images for different viewport sizes, such as homepage carousels with mobile vs desktop assets, different cropping/composition, or when mobile and desktop images differ completely.
Quickly install nextjs-image-art-direction AI skill to your development environment via command line
Source: flpbalada/my-opencode-config.
Art direction means showing completely different images based on viewport size — not just resizing the same image. Common use cases include homepage carousels with different assets for mobile vs desktop, switching from landscape (desktop) to portrait (mobile), or showing cropped vs full compositions.
| Art Direction | Different image content/composition | with multiple elements | | Responsive Images | Same image, different sizes | sizes prop with srcset |
The getImageProps() function (stable since Next.js 14.1.0) generates the necessary props without calling React useState(), making it ideal for art direction.
Implement art direction for Next.js images using getImageProps(). Use when showing different images for different viewport sizes, such as homepage carousels with mobile vs desktop assets, different cropping/composition, or when mobile and desktop images differ completely. Source: flpbalada/my-opencode-config.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-directionImplement art direction for Next.js images using getImageProps(). Use when showing different images for different viewport sizes, such as homepage carousels with mobile vs desktop assets, different cropping/composition, or when mobile and desktop images differ completely. Source: flpbalada/my-opencode-config.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/flpbalada/my-opencode-config