srcset、サイズ、遅延読み込み、最新の形式 (WebP、AVIF) を使用して、パフォーマンスの高いレスポンシブ イメージを実装します。 CLS 防止のためのアスペクト比、アート ディレクションのための画素、LCP 最適化のためのフェッチ優先度をカバーします。 ページへの画像の追加、Core Web Vitals の最適化、レイアウトのずれの防止、アート ディレクションの実装、または最新の形式への変換を行う場合に使用します。
コマンドラインで responsive-images AI スキルを開発環境にすばやくインストール
ソース: 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.
srcset、サイズ、遅延読み込み、最新の形式 (WebP、AVIF) を使用して、パフォーマンスの高いレスポンシブ イメージを実装します。 CLS 防止のためのアスペクト比、アート ディレクションのための画素、LCP 最適化のためのフェッチ優先度をカバーします。 ページへの画像の追加、Core Web Vitals の最適化、レイアウトのずれの防止、アート ディレクションの実装、または最新の形式への変換を行う場合に使用します。 ソース: oakoss/agent-skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/oakoss/agent-skills --skill responsive-imagessrcset、サイズ、遅延読み込み、最新の形式 (WebP、AVIF) を使用して、パフォーマンスの高いレスポンシブ イメージを実装します。 CLS 防止のためのアスペクト比、アート ディレクションのための画素、LCP 最適化のためのフェッチ優先度をカバーします。 ページへの画像の追加、Core Web Vitals の最適化、レイアウトのずれの防止、アート ディレクションの実装、または最新の形式への変換を行う場合に使用します。 ソース: oakoss/agent-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/oakoss/agent-skills --skill responsive-images インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/oakoss/agent-skills