كيفية تحويل كود Claude إلى مخرج فيديو باستخدام Remotion

أطلقت Remotion للتو مهارات الوكيل (Agent Skills)، وهذا يغير كل شيء لإنشاء الفيديو باستخدام الذكاء الاصطناعي.

npx skills add remotion-dev/skills

هذا كل شيء. أمر واحد، ويصبح Claude Code خبيرًا في إنشاء الفيديو ويفهم إطار عمل Remotion للفيديو المستند إلى React من الداخل والخارج.

ما هي مهارات وكيل Remotion؟

مهارات الوكيل هي "أدلة تعليمات" تعلم وكلاء الذكاء الاصطناعي مثل Claude Code كيفية استخدام أدوات وأطر عمل محددة بشكل صحيح. تمنح مهارات Remotion الرسمية Claude معرفة عميقة بما يلي:

هندسة مكونات Remotion (<Composition>, <Sequence>, <AbsoluteFill>)
واجهات برمجة تطبيقات الرسوم المتحركة (interpolate, spring, useCurrentFrame)
أفضل الممارسات للتوقيت والأداء والعرض
أنماط شائعة للمقدمات والانتقالات والتأثيرات

بدون المهارات، قد يولد Claude كود Remotion به أخطاء أو غير صحيح. مع المهارات، يكتب مكونات فيديو بجودة إنتاجية من المحاولة الأولى.

💡

هل ترغب في بناء واجهة برمجة تطبيقات (API) لإنشاء الفيديو؟ يشمل هذا البرنامج التعليمي أيضًا إنشاء نقاط نهاية REST لعرض الفيديو عند الطلب. استخدم Apidog لتصميم واختبار وتوثيق واجهات برمجة تطبيقات إنشاء الفيديو الخاصة بك مع الاختبار التلقائي والتعاون في الوقت الفعلي.

زر

ما ستبنيه

في هذا البرنامج التعليمي، ستقوم بما يلي:

تثبيت مهارات وكيل Remotion في أمر واحد
إنشاء فيديو مقدمة كامل باستخدام اللغة الطبيعية
تحسين الرسوم المتحركة من خلال المحادثة
عرض الفيديو الخاص بك بتنسيق MP4
التوسع باستخدام Remotion Lambda (اختياري)

ملخص سريع

# 1. أنشئ مشروع Remotion
npx create-video@latest my-video && cd my-video

# 2. ثبّت مهارات الوكيل (الخطوة الرئيسية!)
npx skills add remotion-dev/skills

# 3. ابدأ Claude Code واصف الفيديو الخاص بك
claude

# 4. قم بالعرض
npx remotion render <composition-name> out/video.mp4

هذه هي سير العمل بالكامل. تعلم مهارات الوكيل كلود كيفية كتابة كود Remotion الصحيح، حتى تتمكن من التركيز على وصف ما تريده بدلاً من تصحيح أخطاء مكونات React.

المتطلبات الأساسية

قبل البدء، تأكد من أن لديك:

المتطلب	الإصدار	أمر التحقق
Node.js	18+	`node --version`
npm أو yarn	الأحدث	`npm --version`
Claude Code	الأحدث	`claude --version`
محرر كود	يوصى بـ VS Code	—

يجب أن يكون لديك أيضًا:

إلمام أساسي بسطر الأوامر
فهم أساسي لـ React (مفيد ولكن ليس مطلوبًا)

الخطوة 1: تثبيت Remotion وإنشاء مشروعك

أولاً، قم بإنشاء مشروع Remotion جديد باستخدام واجهة سطر الأوامر الرسمية (CLI).

1.1 افتح طرفيتك (terminal) وقم بتشغيل:

npx create-video@latest my-first-video

1.2 عند المطالبة، حدد هذه الخيارات:

? ما هو الاسم الذي ترغب في إطلاقه على مشروعك؟ my-first-video
? اختر قالبًا: blank
? هل تستخدم TypeScript؟ Yes
? هل تثبت التبعيات؟ Yes

1.3 انتقل إلى مشروعك:

cd my-first-video

1.4 تحقق من التثبيت:

npm run dev

يفتح هذا Remotion Studio في متصفحك على http://localhost:3000. يجب أن ترى لوحة فارغة مع شريط زمني في الأسفل.

النتيجة المتوقعة: نافذة متصفح بواجهة Remotion Studio.

الخطوة 2: تثبيت مهارات وكيل Remotion

هنا يحدث السحر. أمر واحد يمنح Claude Code معرفة مستوى الخبراء بـ Remotion.

2.1 في دليل مشروعك، قم بتشغيل:

npx skills add remotion-dev/skills

عندما ترى Added skill: remotion معروضًا، يكون التثبيت ناجحًا.

2.2 ماذا حدث للتو؟

أضاف الأمر مهارة إلى .claude/skills/remotion/ في مشروعك. يحتوي هذا المجلد على SKILL.md — دليل التعليمات الذي يعلم Claude كيفية كتابة كود Remotion الصحيح.

2.3 تحقق من التثبيت:

تحقق من وجود ملف المهارة:

ls .claude/skills/remotion/

الإخراج المتوقع:

SKILL.md

2.4 يبدو هيكل مشروعك الآن كالتالي:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # "العقل" الذي يعلم كلود Remotion
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

نصيحة احترافية: إذا لم يتم التعرف على المهارة، أعد تشغيل npx skills add remotion-dev/skills مرة أخرى أو أعد تشغيل Claude Code.

الخطوة 3: إنشاء أول فيديو لك باستخدام Claude Code

الآن دعنا نستخدم Claude Code لإنشاء فيديو كامل. افتح طرفيتك في دليل المشروع.

3.1 ابدأ تشغيل Claude Code:

claude

3.2 صف الفيديو الخاص بك:

اكتب هذا التوجيه إلى Claude Code:

أنشئ فيديو مقدمة مدته 5 ثوانٍ لشركة تقنية تدعى "DevFlow".

المتطلبات:
- الدقة: 1920x1080
- معدل الإطارات: 30 إطارًا في الثانية
- الخلفية: تدرج داكن من #1a1a2e إلى #16213e
- تسلسل الرسوم المتحركة:
  1. نص الشعار "DevFlow" يتلاشى من شفافية 0 إلى 1 (الإطارات 0-30)
  2. الشعار يتوسع قليلاً مع تأثير ارتداد (الإطارات 15-45)
  3. الشعار الفرعي "Build faster. Ship smarter." يتلاشى في الأسفل (الإطارات 45-90)
  4. كل شيء يبقى ثابتًا للإطارات المتبقية

استخدم خطًا حديثًا ونظيفًا من عائلة خطوط Inter.

3.3 Claude Code ينشئ الملفات:

سينشئ Claude Code أو يعدل هذه الملفات:

src/Root.tsx - تعريف التركيب:

import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="devflow-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

src/DevFlowIntro.tsx - مكون الفيديو الرئيسي:

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade in (frames 0-30)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo bounce scale (frames 15-45)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Tagline fade in (frames 45-90)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        >
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        >
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 معاينة الفيديو الخاص بك:

إذا لم يكن Remotion Studio قيد التشغيل، فابدأ تشغيله:

npm run dev

حدد "devflow-intro" من القائمة المنسدلة للتركيب (composition dropdown). استخدم الشريط الزمني للتنقل عبر الفيديو ومعاينة الرسوم المتحركة.

النتيجة المتوقعة: فيديو المقدمة الخاص بك يعمل مع رسوم متحركة لتلاشي الشعار والشعار الفرعي.

الخطوة 4: تحسين الفيديو الخاص بك باستخدام مطالبات المتابعة

قوة Claude Code تكمن في التحسين التكراري. دعنا نحسن الفيديو الخاص بنا.

4.1 أضف تأثير خلفية جزيئات وغيّر نظام الألوان

أضف خلفية جزيئات متحركة خفيفة مع نقاط بيضاء صغيرة
تطفو ببطء نحو الأعلى. اجعلها بسيطة - حوالي 20-30 جزيئًا،
بشفافية منخفضة جدًا (0.1-0.2)، وحركة بطيئة.
غيّر التدرج اللوني إلى نظام ألوان أزرق-بنفسجي:
- لون البداية: #0f0c29
- لون المنتصف: #302b63
- لون النهاية: #24243e
اجعله تدرجًا من 3 نقاط توقف.

4.3 أضف إشارة مؤثر صوتي (اختياري):

أضف تعليق علامة حيث يجب تشغيل مؤثر صوتي "whoosh"
عندما يرتد الشعار. سأضيف الصوت لاحقًا.

في كل مرة تقدم فيها ملاحظات، يقوم Claude Code بتعديل الكود ذي الصلة ويمكنك معاينة التغييرات على الفور في Remotion Studio.

الخطوة 5: إضافة محتوى ديناميكي باستخدام الخصائص (Props)

اجعل الفيديو الخاص بك قابلاً لإعادة الاستخدام عن طريق قبول خصائص ديناميكية (dynamic props). يتيح لك هذا إنشاء مقاطع فيديو متعددة بمحتوى مختلف.

5.1 اطلب من Claude Code إضافة خصائص:

أعد صياغة الفيديو لقبول هذه الخصائص:
- companyName (سلسلة نصية) - تحل محل "DevFlow"
- tagline (سلسلة نصية) - تحل محل نص الشعار الفرعي
- primaryColor (سلسلة نصية) - اللون الأساسي للتدرج
- secondaryColor (سلسلة نصية) - اللون الثانوي للتدرج

أضف أيضًا تحقق مخطط Zod لسلامة النوع.

5.2 Claude Code ينشئ المخطط:

src/DevFlowIntro.tsx (مُحدّث):

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... component uses these props
};

src/Root.tsx (مُحدّث):

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 اختبر بخصائص مختلفة في Remotion Studio:

في Remotion Studio، انقر على لوحة Props وقم بتعديل القيم:

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

تتحدث المعاينة في الوقت الفعلي.

الخطوة 6: إنشاء فيديو متعدد المشاهد

دعنا نبني فيديو أكثر تعقيدًا بمشاهد متعددة.

6.1 توجيه Claude Code:

أنشئ فيديو توضيحي للمنتج مدته 30 ثانية بالمشاهد التالية:

المشهد 1 (0-5 ثوانٍ): رسوم متحركة لمقدمة الشعار
المشهد 2 (5-12 ثانية): عرض الميزات مع ظهور 3 أيقونات واحدة تلو الأخرى
  - الأيقونة 1: صاروخ (السرعة)
  - الأيقونة 2: درع (الأمان)
  - الأيقونة 3: مخطط (التحليلات)
  يجب أن تظهر كل أيقونة من اليسار مع تلاشي

المشهد 3 (12-22 ثانية): نموذج وهمي للوحة تحكم المنتج
  - عرض نموذج واجهة مستخدم بسيط
  - تسليط الضوء على الأقسام المختلفة بالتتابع

المشهد 4 (22-30 ثانية): دعوة لاتخاذ إجراء
  - "ابدأ تجربتك المجانية"
  - عنوان الموقع الإلكتروني يتلاشى

استخدم مكون <Sequence> لتنظيم المشاهد.
المدة الإجمالية: 900 إطارًا بمعدل 30 إطارًا في الثانية.

6.2 Claude Code ينشئ هيكل المشهد:

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Scene 1: Logo Intro (frames 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Scene 2: Feature Showcase (frames 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Scene 3: Dashboard Mockup (frames 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Scene 4: Call to Action (frames 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code ينشئ مكونات المشهد الفردية:

src/scenes/FeatureShowcase.tsx:

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Speed', delay: 0 },
  { icon: '🛡️', label: 'Security', delay: 30 },
  { icon: '📊', label: 'Analytics', delay: 60 },
];

export const FeatureShowcase: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

الخطوة 7: إضافة الصوت إلى الفيديو الخاص بك

7.1 أضف مقطع موسيقى خلفية:

ضع ملف الصوت الخاص بك في مجلد public:

public/
└── audio/
    └── background-music.mp3

7.2 اطلب من Claude Code دمج الصوت:

أضف موسيقى خلفية من public/audio/background-music.mp3
- تتلاشى (Fade in) خلال أول 30 إطارًا
- تتلاشى (Fade out) خلال آخر 30 إطارًا
- اضبط مستوى الصوت على 0.5

7.3 Claude Code يضيف مكون الصوت:

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Audio fade in/out
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... rest of scenes */}
    </AbsoluteFill>
  );
};

الخطوة 8: عرض الفيديو الخاص بك

الآن دعنا نصدر الفيديو الخاص بك إلى ملف.

8.1 العرض من سطر الأوامر:

# العرض إلى MP4 (موصى به لمعظم الاستخدامات)
npx remotion render company-intro out/company-intro.mp4

# العرض بخصائص مخصصة
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 خيارات العرض:

# جودة عالية (أبطأ)
npx remotion render company-intro out/video.mp4 --crf=18

# جودة أقل (أسرع، ملف أصغر)
npx remotion render company-intro out/video.mp4 --crf=28

# العرض كملف GIF
npx remotion render company-intro out/video.gif --codec=gif

# العرض كملف WebM
npx remotion render company-intro out/video.webm --codec=vp8

# عرض نطاق إطارات محدد
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 تقدم العرض:

سترى إخراجًا مثل:

ℹ Rendering frames 0-150
████████████████████████████████████████ 100% | 150/150 frames
✓ Rendered 150 frames in 12.3s (12.2 fps)
✓ Encoded video in 3.2s
✓ Video saved to out/company-intro.mp4

النتيجة المتوقعة: ملف فيديو معروض في دليل out/ الخاص بك.

الخطوة 9: التوسع باستخدام Remotion Lambda (اختياري)

للعرض على نطاق واسع (المئات أو الآلاف)، استخدم Remotion Lambda.

9.1 تثبيت تبعيات Lambda:

npm install @remotion/lambda

9.2 تكوين بيانات اعتماد AWS:

# إعداد بيانات اعتماد AWS
aws configure

# إنشاء دور Remotion Lambda
npx remotion lambda policies role

9.3 نشر دالة Lambda الخاصة بك:

# نشر دالة العرض
npx remotion lambda functions deploy

# نشر موقع الفيديو الخاص بك
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 العرض عبر Lambda:

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 العرض البرمجي:

import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('Video URL:', result.url);

الخطوة 10: بناء واجهة برمجة تطبيقات (API) لإنشاء الفيديو

أنشئ نقطة نهاية API تقوم بإنشاء مقاطع فيديو عند الطلب.

10.1 اطلب من Claude Code إنشاء خادم Express:

أنشئ خادم API بـ Express.js مع نقاط النهاية هذه:

POST /api/videos/generate
- يقبل: template, props, format
- يشغل عملية عرض Remotion Lambda
- يعيد: jobId, status

GET /api/videos/status/:jobId
- يعيد تقدم العرض ورابط التنزيل عند الانتهاء

قم بتضمين معالجة الأخطاء المناسبة والتحقق من صحة Zod.

10.2 Claude Code ينشئ الخادم:

server/index.ts:

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('Video API running on http://localhost:3001');
});

10.3 اختبر واجهة برمجة التطبيقات الخاصة بك باستخدام Apidog:

استخدم Apidog لاختبار نقاط نهاية إنشاء الفيديو الخاصة بك:

أنشئ طلبًا جديدًا لـ POST /api/videos/generate
اضبط المحتوى:

{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}

أرسل وتحقق من أن الاستجابة تحتوي على jobId
استعلم عن نقطة نهاية الحالة حتى تكون status: "completed"

تساعدك ميزات الاختبار التلقائي في Apidog على التحقق من أن مسار إنشاء الفيديو يعمل بشكل موثوق.

مثال كامل: مولد فيديو تسويقي

إليك مثال كامل يمكنك استخدامه كقالب.

توجيه لـ Claude Code:

أنشئ مولد فيديو تسويقي كامل بالميزات التالية:

1. القالب: "social-promo"
   - المدة: 15 ثانية (450 إطارًا بمعدل 30 إطارًا في الثانية)
   - الدقة: 1080x1080 (مربع إنستغرام)

2. المشاهد:
   - نص جاذب (0-3 ثوانٍ): نص كبير وجريء يجذب الانتباه
   - صورة المنتج (3-9 ثوانٍ): عرض منتج بتأثير Ken Burns
   - قائمة الميزات (9-12 ثانية): 3 نقاط تظهر بالتتابع
   - دعوة لاتخاذ إجراء (12-15 ثانية): "تسوق الآن" مع رسوم متحركة نابضة

3. الخصائص (Props):
   - hookText: سلسلة نصية
   - productImageUrl: سلسلة نصية
   - features: مصفوفة سلاسل نصية (3 عناصر)
   - ctaText: سلسلة نصية
   - brandColor: سلسلة نصية

4. أدرج خفض صوت الموسيقى (audio ducking) عند ظهور النص

أنشئ جميع الملفات اللازمة لكي يعمل هذا.

سيقوم Claude Code بإنشاء قالب فيديو كامل وجاهز للإنتاج يمكنك تخصيصه وعرضه على نطاق واسع.

استكشاف المشكلات الشائعة وإصلاحها

مشكلة: "لا يمكن العثور على الوحدة 'remotion'"

# الحل: أعد تثبيت التبعيات
rm -rf node_modules
npm install

مشكلة: الخطوط لا يتم تحميلها

// أضف استيراد الخط إلى المكون الخاص بك
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// استخدمه في الأنماط
style={{ fontFamily }}

مشكلة: الفيديو يظهر بلون أسود

تحقق من أن مكوناتك تعيد محتوى مرئيًا
تحقق من أن AbsoluteFill لديه لون خلفية محدد
تأكد من أن الرسوم المتحركة ليست كلها عند شفافية 0

مشكلة: Claude Code لا يتعرف على مهارات Remotion

# أعد تثبيت المهارة
npx skills add remotion-dev/skills

# تحقق من وجود .claude/skills/remotion/SKILL.md
ls .claude/skills/remotion/

# أعد تشغيل Claude Code

مشكلة: أخطاء عدم توافق الإصدارات

# تحقق من إصدارات Remotion وقم بتحديثها
npx remotion versions

# هذا غالبًا ما يحل مشاكل التوافق

هل تبني واجهات برمجة تطبيقات لإنشاء الفيديو؟ جرب Apidog مجانًا لتصميم واختبار وتوثيق نقاط النهاية الخاصة بك. تحقق من مخططات الطلبات، وأتمتة سيناريوهات الاختبار، وتأكد من أن مسار الفيديو الخاص بك يتعامل مع الحالات الهامشية بسلاسة.

زر