remotion-render
عرض مقاطع فيديو من كود React/Remotion TSX
متاح أيضًا من: inference-sh-6,inference-sh-9,inference-shell,inferen-sh,inference-sh-8,skillssh,inference-sh-7,toolshell,tul-sh
يتطلب إنشاء مقاطع فيديو برمجية من كود React أدوات متخصصة وبنية تحتية للعرض. تقوم هذه المهارة بدمج خدمة inference.sh لقبول كود TSX وإرجاع مقاطع فيديو بصيغة MP4، مما يمكّن Claude Code من إنشاء رسومات متحركة دون الحاجة لتحرير فيديو يدوي.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "remotion-render". إنشاء فيديو مع نص متحرك يعرض 'Hello World' يظهر بتأثير التلاشي خلال ثانيتين
النتيجة المتوقعة:
تم عرض الفيديو بنجاح. يحتوي الإخراج على رابط فيديو يمكن تنزيله أو تضمينه. يظهر الفيديو نصاً أبيض على خلفية داكنة مع انتقال الشفافية من 0 إلى 1 خلال مدة ثانيتين.
استخدام "remotion-render". إنشاء مربع متحرك بحركة زنبركية يرتد على الشاشة
النتيجة المتوقعة:
اكتمل العرض. يعرض فيديو مدته ثانيتان مربعاً أبيض مستدير الزوايا على خلفية بنفسجية، مع تكبير المربع من حجم صغير إلى الحجم الكامل باستخدام فيزياء الزنبرك (التخميد: 10، الصلابة: 100).
استخدام "remotion-render". إنشاء فيديو مع ثلاثة كتل نصية متسلسلة تظهر واحدة تلو الأخرى
النتيجة المتوقعة:
اكتمل إنشاء الفيديو. يتميز الإخراج مدته 4 ثوانٍ بثلاثة عناصر نصية ('First'، 'Second'، 'Third') تظهر بشكل متتابع في نقاط 0 ثانية و1 ثانية و2 ثانية، كل منها بحركة ظهور بتأثير التلاشي في وسط الشاشة.
التدقيق الأمني
مخاطر متوسطةThe skill is a legitimate video rendering tool that passes React/Remotion TSX code to the inference.sh service for MP4 generation. Static findings include false positives for backtick detection (bash code blocks), false positive for cryptographic detection (description text), and legitimate hardcoded URLs for service endpoints. No confirmed malicious patterns. The skill requires network access to connect to inference.sh, which is expected behavior.
مشكلات عالية المخاطر (2)
مشكلات منخفضة المخاطر (1)
عوامل الخطر
🌐 الوصول إلى الشبكة (5)
⚙️ الأوامر الخارجية (8)
درجة الجودة
ماذا يمكنك بناءه
إنشاء تقارير فيديو آلية
إنشاء تصورات بيانات متحركة أو تقارير بتمرير مكونات React driven بالبيانات. مثالي لإنشاء محتوى فيديو متكرر من خطوط أنابيب CI/CD أو workflows المؤتمتة.
إنشاء صور مصغرة ومعاينات ديناميكية
إنشاء صور مصغرة فيديو مخصصة أو مقاطع معاينة من مكونات React. مفيد لأنظمة إدارة المحتوى التي تحتاج إلى إنشاء أصول فيديو برمجية.
النمذجة السريعة للرسوم المتحركة
نمذجة سريعة للرسوم المتحركة وتصاميم الحركة بكتابة كود TSX. تكرار على الرسوم المتحركة دون مغادرة بيئة البرمجة.
جرّب هذه الموجهات
إنشاء فيديو مدته 3 ثوانٍ مع نص أبيض على خلفية داكنة يظهر بتأثير التلاشي. استخدام Remotion مع useCurrentFrame وinterpolate لحركة الشفافية. دقة 1920x1080 بمعدل 30 إطاراً في الثانية.
إنشاء فيديو مدته 5 ثوانٍ يعرض عداد نسبة من 0 إلى 100%. يجب أن يستخدم العداد حركة زنبركية للحركة السلسة. استخدام useVideoConfig للحصول على معلومات الإطار. إخراج بمعدل 60 إطاراً في الثانية.
إنشاء فيديو مدته 4 ثوانٍ مع ثلاثة عناصر نصية متتالية. يجب أن يظهر كل عنصر بتأثير التلاشي ويستمر لمدة ثانية واحدة قبل الانتقال إلى التالي. استخدام مكونات Sequence للتوقيت.
عرض فيديو مع عنوان وعنوان فرعي مُمررين كخصائص. يجب أن يعرض المكون العنوان بنص أبيض كبير والعنوان الفرعي بنص رمادي أصغر أدناه، في وسط الخلفية السوداء. المدة: 3 ثوانٍ.
أفضل الممارسات
- ابدأ بالرسوم المتحركة البسيطة وكرر - اختبر رسوم الشفافية أو التكبير الأساسية قبل فيزياء الزنبرك المعقدة
- استخدم AbsoluteFill كحاوية جذر لضمان امتداد المحتوى عبر إطار الفيديو الكامل
- حافظ على استقلالية كود TSX - تجنب التبعيات الخارجية غير الموجودة في 'remotion' أو 'react'
تجنب
- لا تمرر كود المستخدم مباشرة دون التحقق - تقبل المهارة TSX لكن تأكد من أن الكود لا يحتوي على أنماط ضارة
- تجنب مدد الفيديو الطويلة جداً (أكثر من 60 ثانية) لأن وقت العرض يزيد بشكل كبير
- لا تستخدم روابط صور أو وسائط خارجية - قد لا يمتلك البيئة المعزولة وصولاً للشبكة لجلب الأصول الخارجية