responsive-images
✓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 cuando: agregue imágenes a páginas, optimice Core Web Vitals, evite cambios de diseño, implemente dirección de arte o convierta a formatos modernos.
Instalación
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals
| Use Case | Widths to Generate | Sizes Attribute |
| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw | | Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px | | Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw | | Sidebar thumbnail | 150w, 300w | 150px |
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 cuando: agregue imágenes a páginas, optimice Core Web Vitals, evite cambios de diseño, implemente dirección de arte o convierta a formatos modernos. Fuente: jezweb/claude-skills.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images- Fuente
- jezweb/claude-skills
- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es responsive-images?
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 cuando: agregue imágenes a páginas, optimice Core Web Vitals, evite cambios de diseño, implemente dirección de arte o convierta a formatos modernos. Fuente: jezweb/claude-skills.
¿Cómo instalo responsive-images?
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/jezweb/claude-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 o Cursor
¿Dónde está el repositorio de origen?
https://github.com/jezweb/claude-skills
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01