·responsive-images
</>

responsive-images

✓
jezweb/claude-skillsGitHub: jezweb/claude-skillsFonte: jezweb/claude-skills

Implementa immagini reattive performanti con srcset, dimensioni, caricamento lento e formati moderni (WebP, AVIF). Copre le proporzioni per la prevenzione CLS, l'elemento immagine per la direzione artistica e la priorità di recupero per l'ottimizzazione LCP. Da utilizzare quando: aggiungere immagini alle pagine, ottimizzare i Core Web Vitals, impedire lo spostamento del layout, implementare la direzione artistica o convertire in formati moderni.

jezweb·responsive·images
362Installazioni·0Tendenza·@jezweb

Installazione

GitHub: jezweb/claude-skills
$npx skills add https://github.com/jezweb/claude-skills --skill responsive-images

Come installare responsive-images

Installa rapidamente la skill AI responsive-images nel tuo ambiente di sviluppo tramite riga di comando

  1. Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
  2. Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/jezweb/claude-skills --skill responsive-images
  3. Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Fonte: jezweb/claude-skills.

SKILL.md

Visualizza raw

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 |

Implementa immagini reattive performanti con srcset, dimensioni, caricamento lento e formati moderni (WebP, AVIF). Copre le proporzioni per la prevenzione CLS, l'elemento immagine per la direzione artistica e la priorità di recupero per l'ottimizzazione LCP. Da utilizzare quando: aggiungere immagini alle pagine, ottimizzare i Core Web Vitals, impedire lo spostamento del layout, implementare la direzione artistica o convertire in formati moderni. Fonte: jezweb/claude-skills.

Fatti (pronti per citazione)

Campi e comandi stabili per citazioni AI/ricerca.

Comando di installazione
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images
Fonte
jezweb/claude-skills
Categoria
</>Sviluppo
Verificato
✓
Prima apparizione
2026-02-01
Aggiornato
2026-03-10
URL
https://www.learn-skills.dev/it/skills/jezweb/claude-skills/responsive-images

Browse more skills from jezweb/claude-skills

Risposte rapide

Che cos'è responsive-images?

Implementa immagini reattive performanti con srcset, dimensioni, caricamento lento e formati moderni (WebP, AVIF). Copre le proporzioni per la prevenzione CLS, l'elemento immagine per la direzione artistica e la priorità di recupero per l'ottimizzazione LCP. Da utilizzare quando: aggiungere immagini alle pagine, ottimizzare i Core Web Vitals, impedire lo spostamento del layout, implementare la direzione artistica o convertire in formati moderni. Fonte: jezweb/claude-skills.

Come installo responsive-images?

Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/jezweb/claude-skills --skill responsive-images Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Dov'è il repository sorgente?

https://github.com/jezweb/claude-skills

Dettagli

Categoria
</>Sviluppo
Fonte
skills.sh
Prima apparizione
2026-02-01

Skills correlate

tailwind-v4-shadcn
2.7K Installazioni
tanstack-query
2.5K Installazioni
fastapi
2.0K Installazioni
zustand-state-management
1.2K Installazioni
react-hook-form-zod
1.2K Installazioni
tailwind-patterns
1.1K Installazioni