Implementieren Sie die Art Direction für Next.js-Bilder mit getImageProps(). Verwenden Sie diese Option, wenn Sie unterschiedliche Bilder für unterschiedliche Ansichtsfenstergrößen anzeigen, z. B. Homepage-Karussells mit Mobil- und Desktop-Assets, unterschiedlichen Zuschnitten/Kompositionen oder wenn Mobil- und Desktop-Bilder völlig unterschiedlich sind.
Installieren Sie den KI-Skill nextjs-image-art-direction schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: 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.
Implementieren Sie die Art Direction für Next.js-Bilder mit getImageProps(). Verwenden Sie diese Option, wenn Sie unterschiedliche Bilder für unterschiedliche Ansichtsfenstergrößen anzeigen, z. B. Homepage-Karussells mit Mobil- und Desktop-Assets, unterschiedlichen Zuschnitten/Kompositionen oder wenn Mobil- und Desktop-Bilder völlig unterschiedlich sind. Quelle: flpbalada/my-opencode-config.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-directionImplementieren Sie die Art Direction für Next.js-Bilder mit getImageProps(). Verwenden Sie diese Option, wenn Sie unterschiedliche Bilder für unterschiedliche Ansichtsfenstergrößen anzeigen, z. B. Homepage-Karussells mit Mobil- und Desktop-Assets, unterschiedlichen Zuschnitten/Kompositionen oder wenn Mobil- und Desktop-Bilder völlig unterschiedlich sind. Quelle: flpbalada/my-opencode-config.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/flpbalada/my-opencode-config