قم بتنفيذ صور سريعة الاستجابة باستخدام srcset والأحجام والتحميل البطيء والتنسيقات الحديثة (WebP وAVIF). يغطي نسبة العرض إلى الارتفاع لمنع CLS، وعنصر الصورة للتوجيه الفني، وأولوية الجلب لتحسين LCP. يُستخدم عند إضافة صور إلى الصفحات، أو تحسين مؤشرات الويب الأساسية، أو منع تغيير التخطيط، أو تنفيذ التوجيه الفني، أو التحويل إلى التنسيقات الحديثة.
ثبّت مهارة الذكاء الاصطناعي responsive-images بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: 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. يُستخدم عند إضافة صور إلى الصفحات، أو تحسين مؤشرات الويب الأساسية، أو منع تغيير التخطيط، أو تنفيذ التوجيه الفني، أو التحويل إلى التنسيقات الحديثة. المصدر: oakoss/agent-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/oakoss/agent-skills --skill responsive-imagesقم بتنفيذ صور سريعة الاستجابة باستخدام srcset والأحجام والتحميل البطيء والتنسيقات الحديثة (WebP وAVIF). يغطي نسبة العرض إلى الارتفاع لمنع CLS، وعنصر الصورة للتوجيه الفني، وأولوية الجلب لتحسين LCP. يُستخدم عند إضافة صور إلى الصفحات، أو تحسين مؤشرات الويب الأساسية، أو منع تغيير التخطيط، أو تنفيذ التوجيه الفني، أو التحويل إلى التنسيقات الحديثة. المصدر: oakoss/agent-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/oakoss/agent-skills --skill responsive-images بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/oakoss/agent-skills