Implemente la dirección de arte para imágenes Next.js usando getImageProps(). Úselo cuando muestre diferentes imágenes para diferentes tamaños de ventana gráfica, como carruseles de páginas de inicio con recursos para dispositivos móviles y de escritorio, diferentes recortes/composiciones, o cuando las imágenes para dispositivos móviles y de escritorio difieren completamente.
Instala rápidamente el skill de IA nextjs-image-art-direction en tu entorno de desarrollo mediante línea de comandos
Fuente: 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.
Implemente la dirección de arte para imágenes Next.js usando getImageProps(). Úselo cuando muestre diferentes imágenes para diferentes tamaños de ventana gráfica, como carruseles de páginas de inicio con recursos para dispositivos móviles y de escritorio, diferentes recortes/composiciones, o cuando las imágenes para dispositivos móviles y de escritorio difieren completamente. Fuente: flpbalada/my-opencode-config.
Campos y comandos estables para citas de IA/búsqueda.
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-directionImplemente la dirección de arte para imágenes Next.js usando getImageProps(). Úselo cuando muestre diferentes imágenes para diferentes tamaños de ventana gráfica, como carruseles de páginas de inicio con recursos para dispositivos móviles y de escritorio, diferentes recortes/composiciones, o cuando las imágenes para dispositivos móviles y de escritorio difieren completamente. Fuente: flpbalada/my-opencode-config.
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
https://github.com/flpbalada/my-opencode-config