تنفيذ التوجيه الفني لصور Next.js باستخدام getImageProps(). يُستخدم عند عرض صور مختلفة لأحجام مختلفة لإطار العرض، مثل دوارات الصفحة الرئيسية مع أصول الهاتف المحمول مقابل أصول سطح المكتب، أو الاقتصاص/التركيب المختلف، أو عندما تختلف صور الهاتف المحمول وسطح المكتب تمامًا.
ثبّت مهارة الذكاء الاصطناعي nextjs-image-art-direction بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: 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تنفيذ التوجيه الفني لصور Next.js باستخدام getImageProps(). يُستخدم عند عرض صور مختلفة لأحجام مختلفة لإطار العرض، مثل دوارات الصفحة الرئيسية مع أصول الهاتف المحمول مقابل أصول سطح المكتب، أو الاقتصاص/التركيب المختلف، أو عندما تختلف صور الهاتف المحمول وسطح المكتب تمامًا. المصدر: flpbalada/my-opencode-config.
افتح الطرفية أو أداة سطر الأوامر لديك مثل 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