Implemente imágenes responsivas de alto rendimiento con srcset, tamaños, carga diferida y formatos modernos (WebP, AVIF). Cubre la relación de aspecto para la prevención de CLS, el elemento de imagen para la dirección de arte y la prioridad de búsqueda para la optimización de LCP. Úselo al agregar imágenes a páginas, optimizar Core Web Vitals, evitar cambios de diseño, implementar dirección de arte o convertir a formatos modernos.
Instala rápidamente el skill de IA responsive-images en tu entorno de desarrollo mediante línea de comandos
Fuente: oakoss/agent-skills.
Responsive images serve the right image size and format based on viewport, device pixel ratio, and browser capabilities. Proper implementation prevents layout shift (CLS), optimizes Largest Contentful Paint (LCP), and reduces bandwidth by 50-70% with modern formats.
When to use: Any page with images, especially content images, hero images, product photos, and gallery layouts.
When NOT to use: Inline SVG icons, CSS background patterns, or canvas-rendered graphics.
Implemente imágenes responsivas de alto rendimiento con srcset, tamaños, carga diferida y formatos modernos (WebP, AVIF). Cubre la relación de aspecto para la prevención de CLS, el elemento de imagen para la dirección de arte y la prioridad de búsqueda para la optimización de LCP. Úselo al agregar imágenes a páginas, optimizar Core Web Vitals, evitar cambios de diseño, implementar dirección de arte o convertir a formatos modernos. Fuente: oakoss/agent-skills.
Campos y comandos estables para citas de IA/búsqueda.
npx skills add https://github.com/oakoss/agent-skills --skill responsive-imagesImplemente imágenes responsivas de alto rendimiento con srcset, tamaños, carga diferida y formatos modernos (WebP, AVIF). Cubre la relación de aspecto para la prevención de CLS, el elemento de imagen para la dirección de arte y la prioridad de búsqueda para la optimización de LCP. Úselo al agregar imágenes a páginas, optimizar Core Web Vitals, evitar cambios de diseño, implementar dirección de arte o convertir a formatos modernos. Fuente: oakoss/agent-skills.
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/oakoss/agent-skills --skill responsive-images 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/oakoss/agent-skills