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