علّم Claude حركات المونتاج: أضف سكلز الفيديو وطبّقها على لقطاتكTeach Claude Video Moves: Add Video Skills and Apply Them to Your Clips

المصطلحات

Skill (سكل)

ملف تعليمات يقرأه Claude لما تطلب شغلة تناسبه. تكتبه مرة وحدة، ويطبقه كل مرة بنفس الطريقة.

SKILL.md

الملف الأساسي داخل مجلد السكل. فوقه اسم ووصف، وتحته الخطوات. Claude يختار السكل من الوصف.

Remotion (ريموشن)

أداة تصنع فيديو بالكود. كل إطار صفحة ويب، وفي الآخر يطلع لك ملف MP4.

Claude Code (كلود كود)

نسخة Claude اللي تشتغل داخل مجلد على جهازك. تقرأ الملفات وتشغّل الأوامر بنفسها.

الخطوات

1. 1

   الخطوة 1

   جهّز مجلد الريل وافتح Claude Code

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

   سوّ مجلد جديد للريل، وداخله مجلد اسمه clips فيه لقطاتك العمودية. بعدها افتح الطرفية (Terminal) داخل المجلد واكتب claude.

   كل الشغل راح يصير داخل هذا المجلد، فلقطاتك تبقى على جهازك.

   

   نصيحة: سمّ اللقطات بأرقام مثل 01.mp4 و02.mp4، لأن Claude يرتبها أسهل.

2. 2

   الخطوة 2

   أضف سكلز Remotion الرسمية بأمر واحد

   فريق Remotion عنده مجموعة سكلز رسمية للأيجنت (agent) مثل Claude Code.

   اكتب الأمر اللي تحت في الطرفية داخل مجلدك. يضيف سكلز لإنشاء المشروع، وكتابة الحركات، والكابشن، والمعاينة، والتصدير.

   بعدها تقدر تناديها بالسلاش، مثل /remotion-create و/remotion-render.

   remotion.dev

   

   برومبتأمر التثبيت

   نسخ

   npx skills add remotion-dev/skills

   نصيحة: Remotion مجاني للأفراد وللشركات اللي فيها ثلاثة موظفين أو أقل، والشركات الأكبر تحتاج رخصة شركة.

3. 3

   الخطوة 3

   أنشئ مشروع فيديو عمودي

   اطلب من Claude مشروع جديد بمقاس الريلز، وخلّه ينقل لقطاتك داخله.

   البرومبت (prompt) بالإنجليزي، لأن السكلز والكود بالإنجليزي والنتيجة تطلع أدق.

   برومبتبرومبت الإنشاء

   نسخ

   /remotion-create Create a vertical 1080x1920 project at 30 fps. Copy the clips from [clips folder] into public/ and add a composition called Reel that plays [01.mp4] full screen.

4. 4

   الخطوة 4

   اكتب سكل حركاتك مرة وحدة

   هنا الفكرة كلها. بدل ما تشرح كل حركة في كل فيديو، تكتبها مرة وحدة في سكل.

   سوّ مجلد اسمه video-moves داخل ~/.claude/skills، وحط فيه ملف SKILL.md، والصق النص اللي تحت كما هو. على الماك الأمر open -e يفتحه في TextEdit، وعلى أي جهاز ثاني افتحه بأي محرر نصوص.

   بعدها اقفل Claude Code وافتحه من جديد حتى يشوف السكل.

   

   برومبتملف SKILL.md كامل

   نسخ

   ---
   name: video-moves
   description: Applies short form video moves to a vertical talking head clip in a Remotion project. Use when the user asks for a face push-in, a glass card, a phone mockup, a synced checklist, a chart that grows, flash word cards, a zoom through cut, word captions with highlighted key words, an Arabic kashida stretch, or a phone showcase of several items.
   ---
   
   # Video moves (Remotion, 1080x1920)
   
   Work inside the current Remotion project. Use the remotion-markup skill for code patterns, remotion-captions for the transcript and remotion-render to export. Ask for any missing clip or word. Never invent numbers on screen.
   
   ## Rules for every move
   - Timing comes from the words: transcribe the clip first, then anchor each move to a spoken word.
   - At most two moves on screen at once. Keep text off the face and above the bottom 380 px (the app's buttons sit there).
   - Animate with spring() or interpolate() with easing. No linear motion.
   
   ## Moves
   1. Face push-in: scale the clip from 1.00 to 1.08 over 0.6 s starting on the key word, origin at the face, then hold.
   2. Glass card: a rounded card (radius 40) with backdrop-filter blur(6px) saturate(1.6), a 1 px white border at 35% opacity and a soft shadow. It springs in beside the face with one icon and one short line.
   3. Phone mockup: a phone frame (radius 86, 14 px black bezel) that plays a second clip, tilted -3 degrees, at chest height.
   4. Synced checklist: numbered rows in two columns at the top corners. The row of the item on screen turns yellow (#FFD60A) on the exact frame its clip starts; the other rows stay white at 55% opacity.
   5. Counter pill: a small dark pill reading 05/17 in the phone's top corner, updated on every cut.
   6. Chart grow: bars grow from 0 to their value, 4 frames apart, then the number counts up. Real numbers only, or label the chart "example".
   7. Flash word cards: 3 or 4 full frame cards with one word each, 6 frames per card, the last card holds 12 frames.
   8. Zoom through cut: the outgoing shot scales to 1.25 with a 20 px blur over 6 frames while the next shot scales from 0.85 to 1.00.
   9. Word captions: one or two words at a time at 60% of the height, white, key words yellow, no outline.
   10. Kashida stretch (Arabic only): on one key word, insert the tatweel character after a letter that joins forward, grow it from 1 to 3 characters over 10 frames, then let it spring back.
   
   ## Phone showcase (a list of items)
   When the user lists N items: the phone plays one item clip every 0.9 to 1.2 s with hard cuts, item 1 already on screen at frame 0. A two line title sits at the top with the count in yellow. Use the synced checklist and the counter pill. No captions until the list ends, then cut to the talking clip with word captions. The number in the title must equal the number of items actually shown.

   نصيحة: الوصف في أول الملف هو اللي يخلي Claude يختار السكل لحاله، فخلّه واضح ومحدد.

5. 5

   الخطوة 5

   طبّق الحركات على لقطتك

   الآن اطلب الحركات بالاسم، واذكر الكلمة اللي تبدأ عليها كل حركة، لأن التوقيت يجي من كلامك.

   Claude يفرّغ الصوت أول، بعدين يربط كل حركة بكلمتها.

   برومبتبرومبت الحركات

   نسخ

   /video-moves Apply to [01.mp4]: a face push-in on the word [word], a glass card with [short line] next to me on the word [word], and word captions with these key words in yellow: [key words]. Keep everything clear of my face.

6. 6

   الخطوة 6

   جرّب صيغة قائمة الإثبات

   هذي الصيغة اللي شفتها في الريل: تلفون في يدك، كل ثانية تقريباً حركة جديدة، والقائمة فوق تتلوّن مع كل قطعة.

   جهّز لقطة قصيرة لكل عنصر. ورقم العنوان لازم يساوي عدد العناصر اللي تطلع فعلاً، لا أكثر.

   برومبتبرومبت القائمة

   نسخ

   /video-moves Build a phone showcase: [N] items, one clip each from [clips/items], [1.0] s per item. Title line 1: [title]. Title line 2: [line 2]. Checklist names in order: [name 1], [name 2], [name 3]. Then cut to [talk clip] with word captions.

7. 7

   الخطوة 7

   18 حركة من الريل، وبرومبت لكل مجموعة

   في ريل ١٨ حركة في ٢٠ ثانية، هذي أسماء الحركات في أربع مجموعات.

   نص وكتابة: هوك يتحرك (kinetic hook)، كلمة تطيح (gravity drop)، كابشن عملاق (giant captions).

   واجهات وملفات: prompt bar، storyboard، أيقونة تنشطب (icon strike)، ملف ينسحب (file drop)، timeline (NLE timeline)، أيقونات ترجف وتنحذف (jiggle delete).

   ألوان: سلايدر الألوان (grade slider)، قطّارة الألوان (eyedropper grade)، لوك سينمائي (film look).

   كروت والـ CTA: كرت عنوان (title card)، شبكة فيديوهات (playing grid)، فيد ريلز (reel feed)، كرت فيديو (video card)، كومنت CTA (comment CTA)، الكومنت يطيح (comment drop).

   لكل مجموعة برومبت. أول واحد تحت، والثلاثة الباقية في قائمة البرومبتات في آخر الدليل. كلها تشتغل على نفس السكلز اللي ثبّتها فوق، وتخلي Claude يبني الحركات على لقطتك. البرومبتات بالإنجليزي، لأن السكلز والكود بالإنجليزي.

   برومبتبرومبت 1: نص وكتابة

   نسخ

   /video-moves Build these text moves on [01.mp4], using the video-moves skill and the Remotion skills already installed. Transcribe the clip first and anchor every move to a spoken word.
   
   1. Kinetic hook: the opening line [hook line] animates in word by word during the first [1.5] s, with a spring scale and a small rotation.
   2. Gravity drop: on the word [word] at [timestamp], the word falls from the top of the frame, lands and bounces once.
   3. Giant captions: from [start] to [end], one or two words at a time, very large, filling most of the frame width, with these key words in yellow: [key words].
   
   Before you write code, tell me in one line how you read each move. Keep text off my face and above the bottom 380 px. Never put a number on screen that I did not give you.

   نصيحة: الصق كل برومبت لحاله، وعاين النتيجة قبل ما تنتقل للمجموعة الثانية، حتى ما تتراكم الأخطاء.

8. 8

   الخطوة 8

   عاين وصدّر

   الأمر /remotion-studio يفتح معاينة في المتصفح تشوف فيها كل إطار. لو شي طالع غلط، قول لـ Claude وين بالضبط: الثانية والعنصر.

   لما يعجبك، /remotion-render يطلع لك ملف MP4 جاهز للنشر.

   برومبتبرومبت التصدير

   نسخ

   /remotion-render Render the Reel composition to out/reel.mp4 at 1080x1920.

   نصيحة: عدّل جزء واحد في كل طلب، حتى ما تخرب الحركات اللي ضبطت.

9. 9

   الخطوة 9

   استخدم نفس السكل في claude.ai

   السكل يشتغل كمان في claude.ai على الويب. اضغط مجلد video-moves في ملف ZIP.

   من Settings ثم Capabilities شغّل Code execution and file creation. بعدها من Customize ثم Skills اضغط +، ثم Create skill، ثم Upload a skill، وارفع الملف.

   اسم المجلد لازم يطابق اسم السكل. والتصدير الأسهل يبقى في Claude Code على جهازك.

   

برومبتات جاهزة للنسخ

Add a new move to my video-moves skill: [describe the move in one sentence]. Use it when [the moment it fits]. Write it in the same format as the other moves and keep SKILL.md short.

Watch out/reel.mp4 frame by frame at [seconds to check]. List anything that covers my face, any caption under the bottom 380 px, and any move that starts off its word.

/video-moves Build these UI and file moves on [01.mp4], using the video-moves skill and the Remotion skills already installed. Transcribe the clip first and anchor every move to a spoken word.

1. Prompt bar: at [timestamp] a chat style input bar types [prompt text] letter by letter, then presses send.
2. Storyboard deck: [3] frame cards fan out in a row, one per scene: [scene 1], [scene 2], [scene 3].
3. Icon strike: icons for [item 1], [item 2], [item 3] appear in a row, and each gets a line through it on the words [word 1], [word 2], [word 3].
4. File drop: a file icon named [file name] slides into a folder window on the word [word].
5. NLE timeline: a video editor timeline with [3] tracks scrolls under a playhead from [start] to [end], with clips named [clip 1] and [clip 2].
6. Jiggle delete: the icons [icon list] jiggle like on a phone home screen, then get deleted one by one on [word].

Before you write code, tell me in one line how you read each move. Keep everything off my face and above the bottom 380 px. Never put a number on screen that I did not give you.

/video-moves Build these colour moves on [01.mp4], using the video-moves skill and the Remotion skills already installed. Transcribe the clip first and anchor every move to a spoken word.

1. Grade slider: at [timestamp] a slider UI drags from left to right, and the colour grade of the clip changes with it, from flat to rich.
2. Eyedropper grade: at [timestamp] an eyedropper picks the colour of [object] in the frame, and the grade shifts toward that colour.
3. Film look: from [timestamp] to [end], apply a film look with a warm grade, light grain, a soft vignette and gentle contrast.

Before you write code, tell me in one line how you read each move. Keep my skin tone natural, keep the UI off my face and above the bottom 380 px, and never put a number on screen that I did not give you.

/video-moves Build these card and call to action moves on [01.mp4], using the video-moves skill and the Remotion skills already installed. Transcribe the clip first and anchor every move to a spoken word.

1. Title card: a full frame card with [title] and [subtitle], springs in at [timestamp] and out after [1] s.
2. Playing grid: a grid of [6] small video tiles, each playing a clip from [clips folder], and one tile highlights on the word [word].
3. Reel feed: a phone showing a vertical feed of [3] clips from [clips folder] scrolling up, [1] s each.
4. Video card: one glass card that plays [clip] beside me on the word [word].
5. Comment CTA: a comment box that types the keyword [KEYWORD], with the line [call to action line] above it, from [timestamp] to the end.
6. Comment drop: a comment bubble with [KEYWORD] drops in from the top of the frame and lands at [timestamp].

Before you write code, tell me in one line how you read each move. Keep everything off my face and above the bottom 380 px. Never put a number on screen that I did not give you.