remotion-motion-graphics: تحويل الشعارات والنصوص إلى شيفرة حركة قابلة للتصدير بصيغة MP4 باستخدام Remotion

لمن هذا Skill

هذا Skill موجّه لمن يريد التعامل مع الحركات المتحركة (motion graphics) كأنها شيفرة برمجية تُصان وتُطوَّر: مسؤولو الحملات التسويقية وصنّاع الفيديوهات القصيرة ومطوّرو الواجهات الأمامية الذين يرغبون في استخدام مقطع فيديو مرجعي مع شعار (Logo) واحد لإنتاج kinetic-typography (حركات نصية ديناميكية)، أو أنيميشن للشعار، أو أفلام دعائية قصيرة للعلامة التجارية، مع تصديرها مباشرة بصيغة MP4. وفق الدليل الرسمي، فإنه يدعم إخراج مقاسَي 9:16 و16:9 من نفس الشيفرة.

وهو غير مناسب في الحالات التالية: البيئات التي لا تتوفر فيها Node.js 18+ (المطلوبة لـ Remotion 4) أو التي لا يوجد فيها ffmpeg / ffprobe على PATH، لأن سكربتات التحليل والفحص لن تعمل؛ وعند أول عملية render ستقوم Remotion بتنزيل Chrome تلقائيًا، وقد تتعطل هذه الخطوة في البيئات المقيّدة الشبكيًا. الأدلة الرسمية لا تذكر ما إذا كانت تدعم بيئات تشغيل أو منصات أخرى، ولا تذكر أي لغات لواجهات الـ agent مدعومة، وهذه نقاط مجهولة.

أول تجربة في 3 دقائق

المسار الرئيسي الموصى به هو التثبيت المحلي عبر Claude Code:

1. المتطلبات المسبقة: Node.js 18+، ووجود ffmpeg / ffprobe على PATH.
2. نفّذ أمر التثبيت الرسمي في الطرفية (terminal) لنسخ الـ Skill إلى ~/.claude/skills/:

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

1. شغّل مهمة منخفضة المخاطر في Claude Code: قدّم مقطعًا مرجعيًا وشعارًا (SVG أو موقعًا إلكترونيًا)، واطلب إجراء التحليل فقط في البداية — اطلب من الـ agent توليد beat map من contact sheets الخاصة بالمقطع المرجعي، واستخراج الألوان والخطوط والنصوص من أصول العلامة التجارية، ورسم مسار الشعار (Logo path) بحيث تُحرَّك النصوص والرسوميات بشكل منفصل. لا تطلب render كاملًا في مرحلة التحليل.

مؤشر النجاح: أن يقرأ الـ agent الأصول ويقدّم beat map مع نتائج استخراج عناصر العلامة التجارية، ما يعني أن سير عمل الـ Skill قد عمل فعلًا. لاحظ أن مرحلة الـ render ستُنفّذ أوامر وتكتب ملفات وتنزّل Chrome؛ الأدلة لا تذكر ما إذا كانت عملية render تتطلب تأكيدًا إضافيًا، لذا اتفق مع الـ agent على مسار المخرجات قبل تنفيذ أي إجراء. مستخدمو claude.ai / Cowork لا يملكون هذا المسار؛ البديل الرسمي المتاح لهم هو تنزيل dist/remotion-motion-graphics.skill ورفعه عبر Settings → Capabilities → Skills، وهو طريقة ثانوية خاصة بمنصة أخرى.

حالات الاستخدام

الحالة الأولى: استخراج الإيقاع من مقطع مرجعي. أرسل للـ agent فيديو ترويجيًا لمنافس وشعارك الخاص، واطلب توليد beat map واستخراج الألوان والخطوط، ثم إنتاج حركة برمجية وفق سير عمل الـ Skill وتصدير MP4 بمقاس 9:16. الخطوات القابلة للتأكيد هي قراءة الأصول وتوليد beat map؛ أما جودة الـ render والفيديو النهائي فتتوقف على التنفيذ الفعلي للـ agent.

الحالة الثانية: أنيميشن دخول الشعار. قدّم SVG الخاص بالشعار، واطلب تحريك النصوص والرسوميات بشكل منفصل لإنتاج فيلم دعائي قصير للعلامة التجارية. سيرسم الـ Skill مسار الشعار بحيث تتحرك العناصر منفصلة؛ وقبل التصدير اتبع سير التحقق الرسمي: نجاح tsc، ثم render تجريبي بمقياس 0.3، ثم فحص contact sheets صورةً صورة، وعمل render ساكن للإطارات المشبوهة وإصلاحها، ثم الـ render النهائي واستخراج إطارات من الفيديو الناتج كدليل إثبات. النتيجة النهائية القابلة للتأكيد هي الحصول على ملف MP4 مع إطارات الإثبات.

حدود الاستخدام

عملية الـ render ستُنفّذ أوامر tsc وأوامر الـ render الخاصة بـ Remotion، وتكتب ملفات المشروع، وتنزّل Chrome عند أول تشغيل — هذه سلوكيات موصوفة صراحةً في الدليل الرسمي. سكربتات التحليل والفحص في الـ Skill تعتمد على ffmpeg / ffprobe. الأدلة الرسمية لا توضح: ما إذا كان الـ render يتطلب تأكيد المستخدم، أو ما هي المسارات المحددة التي ستُكتب فيها الملفات، أو ما إذا كان يمكن التشغيل دون اتصال، أو نطاق اللغات المدعومة (لا تستنتج أنها تدعم المواد الإنجليزية فقط لمجرد أن README بالإنجليزية). مخرجات الـ Skill هي ملف MP4 المُrender والشيفرة؛ والأدلة لا تذكر أنه يعدّل ملفات المستخدم الموجودة مسبقًا؛ اعتمد في تحديد نطاق تأثيره على نظام الملفات على السلوك الفعلي للـ agent. تختلف طريقة التثبيت بين المنصتين: في Claude Code تكون عبر git clone ونسخ المجلد، وفي claude.ai / Cowork تكون برفع ملف .skill، ولا يجوز خلط الطريقتين ببعضهما.