Реализуйте художественное оформление изображений Next.js с помощью getImageProps(). Используйте при показе разных изображений для разных размеров области просмотра, например, каруселей на главной странице с ресурсами для мобильных и настольных компьютеров, разной обрезкой/композицией или когда изображения для мобильных и настольных компьютеров полностью различаются.
Быстро установите AI-навык nextjs-image-art-direction в вашу среду разработки через командную строку
Источник: 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.
Реализуйте художественное оформление изображений Next.js с помощью getImageProps(). Используйте при показе разных изображений для разных размеров области просмотра, например, каруселей на главной странице с ресурсами для мобильных и настольных компьютеров, разной обрезкой/композицией или когда изображения для мобильных и настольных компьютеров полностью различаются. Источник: flpbalada/my-opencode-config.
Стабильные поля и команды для ссылок в AI/поиске.
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-directionРеализуйте художественное оформление изображений Next.js с помощью getImageProps(). Используйте при показе разных изображений для разных размеров области просмотра, например, каруселей на главной странице с ресурсами для мобильных и настольных компьютеров, разной обрезкой/композицией или когда изображения для мобильных и настольных компьютеров полностью различаются. Источник: flpbalada/my-opencode-config.
Откройте терминал или инструмент командной строки (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