·nextjs-image-art-direction
</>

nextjs-image-art-direction

Реализуйте художественное оформление изображений Next.js с помощью getImageProps(). Используйте при показе разных изображений для разных размеров области просмотра, например, каруселей на главной странице с ресурсами для мобильных и настольных компьютеров, разной обрезкой/композицией или когда изображения для мобильных и настольных компьютеров полностью различаются.

0Установки·0Тренд·@flpbalada

Установка

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

Как установить nextjs-image-art-direction

Быстро установите AI-навык nextjs-image-art-direction в вашу среду разработки через командную строку

  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.

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
Категория
</>Разработка
Проверено
Впервые замечено
2026-02-25
Обновлено
2026-03-10

Browse more skills from flpbalada/my-opencode-config

Короткие ответы

Что такое nextjs-image-art-direction?

Реализуйте художественное оформление изображений Next.js с помощью getImageProps(). Используйте при показе разных изображений для разных размеров области просмотра, например, каруселей на главной странице с ресурсами для мобильных и настольных компьютеров, разной обрезкой/композицией или когда изображения для мобильных и настольных компьютеров полностью различаются. Источник: 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