·nextjs-image-art-direction
</>

nextjs-image-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.

0Installs·0Trend·@flpbalada

Installation

$npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction

How to Install nextjs-image-art-direction

Quickly install nextjs-image-art-direction AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: flpbalada/my-opencode-config.

SKILL.md

View raw

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.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
Category
</>Dev Tools
Verified
First Seen
2026-02-25
Updated
2026-03-10

Browse more skills from flpbalada/my-opencode-config

Quick answers

What is nextjs-image-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.

How do I install nextjs-image-art-direction?

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

Where is the source repository?

https://github.com/flpbalada/my-opencode-config