Implementieren Sie performante responsive Bilder mit srcset, Größen, Lazy Loading und modernen Formaten (WebP, AVIF). Deckt das Seitenverhältnis zur CLS-Prävention, das Bildelement für die Art Direction und die Abrufpriorität zur LCP-Optimierung ab. Verwenden Sie diese Option, wenn Sie Bilder zu Seiten hinzufügen, Core Web Vitals optimieren, Layoutverschiebungen verhindern, Art Direction implementieren oder in moderne Formate konvertieren.
Installieren Sie den KI-Skill responsive-images schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: 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.
Implementieren Sie performante responsive Bilder mit srcset, Größen, Lazy Loading und modernen Formaten (WebP, AVIF). Deckt das Seitenverhältnis zur CLS-Prävention, das Bildelement für die Art Direction und die Abrufpriorität zur LCP-Optimierung ab. Verwenden Sie diese Option, wenn Sie Bilder zu Seiten hinzufügen, Core Web Vitals optimieren, Layoutverschiebungen verhindern, Art Direction implementieren oder in moderne Formate konvertieren. Quelle: oakoss/agent-skills.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/oakoss/agent-skills --skill responsive-imagesImplementieren Sie performante responsive Bilder mit srcset, Größen, Lazy Loading und modernen Formaten (WebP, AVIF). Deckt das Seitenverhältnis zur CLS-Prävention, das Bildelement für die Art Direction und die Abrufpriorität zur LCP-Optimierung ab. Verwenden Sie diese Option, wenn Sie Bilder zu Seiten hinzufügen, Core Web Vitals optimieren, Layoutverschiebungen verhindern, Art Direction implementieren oder in moderne Formate konvertieren. Quelle: oakoss/agent-skills.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/oakoss/agent-skills --skill responsive-images Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/oakoss/agent-skills