·nextjs-image-art-direction
</>

nextjs-image-art-direction

flpbalada/my-opencode-configGitHub: flpbalada/my-opencode-configソース: flpbalada/my-opencode-config

getImageProps() を使用して Next.js 画像のアート ディレクションを実装します。モバイルとデスクトップのアセットを含むホームページのカルーセル、異なるトリミング/構成、またはモバイルとデスクトップの画像が完全に異なる場合など、異なるビューポート サイズに対して異なる画像を表示する場合に使用します。

cached·flpbalada·nextjs·image·art·direction
0インストール·0トレンド·@flpbalada

インストール

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

nextjs-image-art-direction のインストール方法

コマンドラインで nextjs-image-art-direction AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: flpbalada/my-opencode-config。

SKILL.md

原文を見る

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.

getImageProps() を使用して Next.js 画像のアート ディレクションを実装します。モバイルとデスクトップのアセットを含むホームページのカルーセル、異なるトリミング/構成、またはモバイルとデスクトップの画像が完全に異なる場合など、異なるビューポート サイズに対して異なる画像を表示する場合に使用します。 ソース: flpbalada/my-opencode-config。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
ソース
flpbalada/my-opencode-config
カテゴリ
</>開発ツール
認証済み
—
初回登録
2026-02-25
更新日
2026-03-10
URL
https://www.learn-skills.dev/ja/skills/flpbalada/my-opencode-config/nextjs-image-art-direction

Browse more skills from flpbalada/my-opencode-config

クイックアンサー

nextjs-image-art-direction とは？

getImageProps() を使用して Next.js 画像のアート ディレクションを実装します。モバイルとデスクトップのアセットを含むホームページのカルーセル、異なるトリミング/構成、またはモバイルとデスクトップの画像が完全に異なる場合など、異なるビューポート サイズに対して異なる画像を表示する場合に使用します。 ソース: flpbalada/my-opencode-config。

nextjs-image-art-direction のインストール方法は？

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか？

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

詳細

カテゴリ
</>開発ツール
ソース
user
初回登録
2026-02-25

関連 Skills

social-proof-psychology
24 インストール
trust-psychology
21 インストール
five-whys
20 インストール
cognitive-fluency-psychology
20 インストール
visual-cues-cta-psychology
19 インストール
cognitive-biases
18 インストール