·nextjs-image-art-direction
</>

nextjs-image-art-direction

تنفيذ التوجيه الفني لصور Next.js باستخدام getImageProps(). يُستخدم عند عرض صور مختلفة لأحجام مختلفة لإطار العرض، مثل دوارات الصفحة الرئيسية مع أصول الهاتف المحمول مقابل أصول سطح المكتب، أو الاقتصاص/التركيب المختلف، أو عندما تختلف صور الهاتف المحمول وسطح المكتب تمامًا.

0التثبيتات·0الرائج·@flpbalada

التثبيت

$npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction

كيفية تثبيت nextjs-image-art-direction

ثبّت مهارة الذكاء الاصطناعي nextjs-image-art-direction بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: flpbalada/my-opencode-config.

Art direction means showing completely different images based on viewport size — not just resizing the same image. Common use cases include homepage carousels with different assets for mobile vs desktop, switching from landscape (desktop) to portrait (mobile), or showing cropped vs full compositions.

| Art Direction | Different image content/composition | with multiple elements | | Responsive Images | Same image, different sizes | sizes prop with srcset |

The getImageProps() function (stable since Next.js 14.1.0) generates the necessary props without calling React useState(), making it ideal for art direction.

تنفيذ التوجيه الفني لصور Next.js باستخدام getImageProps(). يُستخدم عند عرض صور مختلفة لأحجام مختلفة لإطار العرض، مثل دوارات الصفحة الرئيسية مع أصول الهاتف المحمول مقابل أصول سطح المكتب، أو الاقتصاص/التركيب المختلف، أو عندما تختلف صور الهاتف المحمول وسطح المكتب تمامًا. المصدر: flpbalada/my-opencode-config.

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction
الفئة
</>أدوات التطوير
موثق
أول ظهور
2026-02-25
آخر تحديث
2026-03-10

Browse more skills from flpbalada/my-opencode-config

إجابات سريعة

ما هي nextjs-image-art-direction؟

تنفيذ التوجيه الفني لصور Next.js باستخدام getImageProps(). يُستخدم عند عرض صور مختلفة لأحجام مختلفة لإطار العرض، مثل دوارات الصفحة الرئيسية مع أصول الهاتف المحمول مقابل أصول سطح المكتب، أو الاقتصاص/التركيب المختلف، أو عندما تختلف صور الهاتف المحمول وسطح المكتب تمامًا. المصدر: flpbalada/my-opencode-config.

كيف أثبّت nextjs-image-art-direction؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/flpbalada/my-opencode-config