شو السكيل وكيف بيشتغل
الـ Skill بـ Claude Code = مجلد فيه ملف SKILL.md: تعليمات بيقرأها Claude Code لما تستدعيها بـ /اسمها. سكيل effects بتحكيله: «المستخدم بيعطيك كليب عمودي واسم تأثير. ابنِ التأثير بـ Remotion، ارندره، وسلّمه MP4». يعني المونتاج صار كود: Claude Code بيكتبه، وإنت بتوصف وبتعدّل بجملة.
- إنت كليبك العمودي بمجلد
clips/، وتكتب/effects glass-widgets. - Claude Code أول مرة بيجهّز مشروع Remotion صغير بالمجلد (دقيقة أو اثنتين). بعدها بيكتب مكوّن التأثير فوق كليبك.
- Claude Code بيطلّع صورة فحص (frame 45) وبيتأكد إنه النص جوّا الكادر وما في شي على وجهك، بعدين بيرندر
out/glass-widgets.mp4وبيضبط الصوت. - إنت بتشوف الناتج، وبتعدّل بجملة: «كبّر البطاقات شوي وخلّي اللون أزرق براندي».
ليش Remotion؟ لأنه بيحوّل كود React لفيديو فريم فريم: كل تأثير = مكوّن صغير، وكل حركة = دالة. هاد اللي بيخلّي «غيّر الحركة» تصير جملة بدل سحب طبقات. لو بدك الخلفية: دليل الريل بـ Remotion. ولو همّك قواعد المونتاج نفسها (الهوك، الكابشن تحت…): دليل ملف المونتاج؛ الاثنين بيشتغلوا مع بعض.
شو بتحتاج على جهازك
- Claude Code على خطة Claude مدفوعة (Pro أو Max). التركيب الموصى به من الوثائق: ماك/لينكس
curl -fsSL https://claude.ai/install.sh | bash، ويندوز بـ PowerShellirm https://claude.ai/install.ps1 | iex. الشرح بـ دليل التركيب. - Node.js 20 أو أحدث (nodejs.org): Remotion بيشتغل عليه.
- ffmpeg وffprobe على الـ PATH: للفحص وضبط الصوت والدمج. ويندوز:
winget install Gyan.FFmpeg، ماك:brew install ffmpeg. - كليب عمودي 1080×1920 (من الموبايل بينفع)، 5 إلى 30 ثانية، باسم
clip.mp4. - لتأثير «النص وراك» (spotlight): نسخة من كليبك بخلفية شفافة (clip.webm بألفا). ما عندك؟ السكيل بيحط النص جنبك بدل وراك، أو بتطلب من Claude Code يعمل القصّ بـ rembg فريم فريم (بطيء، بس بيشتغل).
- أرقامك الحقيقية لتأثير الويدجتس والشارت: أعلى ريل، عدد المتابعين، عدد البوستات. السكيل ممنوع يخترع رقم.
ملف واحد، مجلد، وأمر.
الملف: SKILL.md كامل تنسخه
انسخه زي ما هو. أول جزء (بين الشرطات) هو اللي بيقرأه Claude Code عشان يعرف إمتى يستعمل السكيل وشو الأدوات المسموحة؛ الباقي تعليمات المونتاج بالإنجليزي (Claude بيفهمها أدق هيك، وإنت بتكتبله بالعربي). كلمتا $0 و$1 = أول وثاني كلمة بعد الأمر (اسم التأثير ومسار الكليب)، حسب وثائق Claude Code.
---
name: effects
description: ركّب تأثير مونتاج جاهز على كليب عمودي بريموشن وارندره فيديو جاهز. استعمله لما أكتب الأمر أو أطلب «تأثير»، «مونتاج» أو «ركّب على الكليب».
argument-hint: [effect] [clip]
allowed-tools: Bash(npx *) Bash(npm *) Bash(ffmpeg *) Bash(ffprobe *)
---
# /effects — one clip, seven looks, zero apps
Usage: `/effects <glass-widgets|documentary|orbit|split|spotlight|checklist|timeline> [clip path]`
Effect requested: $0 (one of glass-widgets, documentary, orbit, split, spotlight, checklist, timeline). Clip: $1 (default `clips/clip.mp4`).
You are the editor. The user gives you ONE vertical clip (1080×1920, 30 fps) and the name of an effect. Build it with Remotion (React), render it, and hand back `out/<effect>.mp4`. Never ask the user to open an editing app. If the effect name is missing or unknown, list the seven names and stop.
## Setup (first run only)
1. If `package.json` has no `remotion`, scaffold a blank Remotion project in this folder: `npx create-video@latest --template blank .` (or `npm i remotion @remotion/cli @remotion/renderer react react-dom`).
2. Copy the clip to `public/clips/clip.mp4`. Probe it with `ffprobe` (duration, fps). If the frame rate is variable, re-encode: `ffmpeg -i clips/clip.mp4 -r 30 -c:v libx264 -crf 18 -pix_fmt yuv420p public/clips/clip.mp4`.
3. Load fonts with `@remotion/google-fonts` (Cairo for Arabic display, IBM Plex Sans Arabic for body, Space Grotesk for Latin). Arabic text always gets `direction: rtl`; never letter-space Arabic.
4. One composition per effect, id `<effect>916`, 1080×1920, 30 fps, duration = clip duration (cap previews at 8 s).
## The clip component (shared)
`<Clip>` = `<AbsoluteFill>` with `<Video src={staticFile('clips/clip.mp4')} muted style={{width:1080,height:1920,objectFit:'cover'}} />`. Props: `headScale` (shrinks the subject from the bottom edge: `transform: scale(s); transformOrigin: '50% 100%'`), `shade` (bottom dark gradient 0–1), `under` (nodes rendered BEHIND the subject — only with an alpha clip `clips/clip.webm`), children (nodes OVER the subject).
## The seven effects
- **glass-widgets** — 5–7 frosted cards around the subject (`background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.3); backdropFilter: blur(22px)`), each pops in with a back-out ease, staggered 0.1 s, floating ±4 px. Content = the user's real numbers (ask once: top post, follower count, posts this quarter). A bottom pill «المونتاج: Claude». headScale 0.84, shade 0.65.
- **documentary** — dark pink grade over the room (`linear-gradient(180deg, rgba(60,10,40,.45), rgba(5,3,8,.8))`), a tiny series line on top, a 2-line centered title (Cairo 900, 92 px, one word per line in pink #FF2D6F), a white «متابعة» button bottom-left, a lower third: name on a pink block + handle on a dark block. headScale 0.86.
- **orbit** — 8 covers of the user's own posts (`public/covers/*.jpg`, ask for them) in rounded phone frames (3 px white border, big shadow) around the subject, each drifting with sin/cos(t), popping in staggered. headScale 0.9.
- **split** — top half paper (#E9E5DB + 60 px grid): a bar chart of the user's top 7 posts (bars grow with ease-out, staggered 0.09 s; the top bar amber #E0A325, the rest #8E2F2F; a dashed average line). Bottom half: the clip in a rounded box (scale 0.926 inside a 1000×940 box, face kept in view).
- **spotlight** — the room at brightness(.22), a radial vignette, then huge neon text BEHIND the subject (`color #FF2D6F; textShadow 0 0 24px / 70px / 140px`), flickering for 0.6 s, with the alpha clip on top. Without an alpha clip, put the text beside the head instead.
- **checklist** — the clip + a dark card (rgba(18,18,18,.86), blur) at y 1010: header «✳ Claude عم يمنتج الكليب · n من 5», five rows that reveal one by one; the first three get a green check (#22C55E) on a timer, the last two stay as rings; a mono tag at the end of each row.
- **timeline** — paper top with «Claude بيرندر», a fake render window (#141214): a status list (cut / captions / grade / effects / sound), a strip of 9 thumbnails of the clip, three coloured track clips, a 96-bar waveform coloured up to the playhead, a red progress bar 60→74 %. The clip in a rounded box below.
## Render
1. QA still first: `npx remotion still src/index.ts <effect>916 out/qa.png --frame 45` — LOOK at it: text inside the frame, nothing over the face, Arabic shaped correctly. Fix before rendering.
2. `npx remotion render src/index.ts <effect>916 out/<effect>.mp4 --codec h264 --crf 18`
3. Master the sound: `ffmpeg -i out/<effect>.mp4 -c:v copy -af loudnorm=I=-14:TP=-1.5 out/<effect>-final.mp4`
4. Tell the user the output path and the one thing you were unsure about.
## Rules
- Every number on screen comes from the user; never invent a stat.
- Keep the subject's face clear; put cards beside or below it.
- 2–3 s per effect is enough for a reel; the user cuts them together with `ffmpeg -f concat`.
- Do not add music or download assets from the internet.الفرق عن الملف اللي بالريل: نفس السبع تأثيرات بنفس الأرقام، بس زدت سطرين من وثائق Claude Code: argument-hint (بيعرض لك شكل الأمر بقائمة «/») وallowed-tools (بيسمح لـ Claude Code يشغّل npx وffmpeg بدون ما يسألك عن كل أمر، بالدور اللي بتستدعي فيه السكيل بس).
وين تحطه، وأول أمر
بمجلد المشروع (مجلد جديد لريلزك) حسب وثائق Claude Code:
mkdir -p my-reels/clips my-reels/.claude/skills/effects
cd my-reels
# الصق ملف SKILL.md من القسم 1 في .claude/skills/effects/SKILL.md
# وحط كليبك في clips/clip.mp4
claudeعلى ويندوز نفس الشي بـ PowerShell: New-Item -ItemType Directory -Force my-reels\clips, my-reels\.claude\skills\effects ثم الصق الملف. لو بدك السكيل بكل مشاريعك: حطه بـ ~/.claude/skills/effects/SKILL.md بدل مجلد المشروع. ما بتحتاج تعيد تشغيل Claude Code: بيلتقط الملف بنفس الجلسة.
أول أمر (جوّا Claude Code):
/effects glass-widgetsأو بالعربي، نفس النتيجة (الوصف بالملف بيخلّيه يفهم):
ركّب تأثير glass-widgets على clips/clip.mp4. أرقامي: أعلى ريل 13,842 تعليق، 48 ألف متابع، 184 ريل من حزيران. اعرض لي صورة الفحص قبل الرندر.شو بيصير لما تشغّله (وكيف تتأكد)
- Claude Code أول مرة: بيجهّز مشروع Remotion (بيسألك قبل ما يركّب حزم npm، وافق)، بينسخ الكليب لـ
public/clips/، وبيفحصه بـ ffprobe. - Claude Code بيكتب ملفين تقريباً: مكوّن الكليب المشترك ومكوّن التأثير، وبيسجّل تركيبة glass-widgets916.
- Claude Code بيطلّع
out/qa.png(الفريم 45) وبيفتحه لحاله ويفحصه. لو شي غلط، بيصلّح قبل الرندر. - Claude Code بيرندر
out/glass-widgets.mp4ثم النسخة النهائية بصوت مضبوط -final.mp4. كليب 10 ثواني بياخد دقيقة أو اثنتين على لابتوب عادي. - إنت افتح الناتج. أول تعديل بجملة: «البطاقات أصغر بـ 20% وأبعد عن وجهي». الثاني: «بدّل اللون الزهري لتيل براندي #2DD4BF».
تأكد إنه قرأ السكيل (أول مرة بس):
قبل ما تبدأ: اعرض لي أسماء السبع تأثيرات اللي بتعرفها من سكيل effects، وشو بيحتاج كل واحد مني.إذا عدّد السبعة بأسمائهم، السكيل شغّال. إذا لا، راجع مسار الملف (القسم 2) أو اكتب /reload-skills.
السبعة اللي بالريل، وستايلاتك إنت.
السبع تأثيرات: شو كل واحد وشو بده
| الأمر | شو بتشوف | شو بده منك |
|---|---|---|
/effects glass-widgets | بطاقات زجاجية حواليك فيها أرقامك (أعلى ريل، متابعين، بوستات) بتطلع وحدة وحدة وبتعوم. | أرقامك الحقيقية (3 أرقام). |
/effects documentary | تدريج لوني وثائقي زهري غامق، عنوان كبير بكلمتين، زر «متابعة»، وشريط باسمك وحسابك. | اسمك وحسابك والعنوان. |
/effects orbit | أغلفة ريلاتك القديمة بإطارات موبايل بتدور حواليك. | 8 صور أغلفة بمجلد public/covers/. |
/effects split | النص العلوي ورقة فيها شارت أعلى 7 ريلات إلك، والكليب بصندوق تحت. | 7 أرقام (تعليقات أو مشاهدات) بأسمائها. |
/effects spotlight | الغرفة معتمة ونص نيون كبير وراك بيرفرف. | كليب بألفا (clip.webm)، وإلا النص بصير جنبك. |
/effects checklist | بطاقة «Claude عم يمنتج الكليب 3 من 5» وخطوات بتتعلّم واحدة واحدة. | ولا شي. أسماء الخطوات بتعدّلها لو بدك. |
/effects timeline | نافذة رندر وهمية: حالة، مصغّرات الكليب، مسارات ملوّنة، موجة صوت، وشريط 74%. | ولا شي. |
بالريل كل تأثير ظهر 2–3 ثواني بس. هاد كافي؛ التأثير الكامل على كليب 30 ثانية بيصير ثقيل على العين. والأرقام اللي بالريل (أعلى ريل 13,842 تعليق…) أرقامي الحقيقية من تصدير حسابي؛ حط أرقامك إنت، ولو ما عندك أرقام بعد، ابدأ بـ checklist وtimeline وdocumentary.
ستايلاتك إنت: زي ريل «كل ستايلات ريلاتي»
بالريل الثاني رجّعت بنفس الكليب كل ستايلات ريلاتي القديمة (الورقي، الـ Vox، الليلي، الطرفية، الماسكوت، الموبايل، الكروت). نفس الآلة: كل ستايل = «تأثير» إضافي بالسكيل، موصوف بكلمات. عشان تضيف ستايلك، زيد سطر تحت «The seven effects» بهالشكل:
- **paper** — my paper look: background #F3EFE6 with a faint 60 px grid, a 2-line Cairo 900 title at the top (teal #0F766E, one word amber), the clip in a rounded card (radius 36, soft shadow) at y 560, a caption band at y 1480 with 2–4 words per line, and a small «ضياء» chip bottom-right. No music.كيف توصف ستايل بشكل Claude Code يبنيه صح: خلفية (لون/ورق/غامق)، العنوان (خط، حجم، لون، مكان)، مكان الكليب (ملء الشاشة أو صندوق)، الكابشن (وين وكم كلمة)، عنصر مميّز (ختم، ماسكوت، إطار موبايل). خمس جمل بتكفي. ولو عندك ريل قديم بالستايل، ارفق لقطة منه واطلب: «طلّع لي وصف الستايل من هالصورة وضيفه للسكيل باسم night».
بعدها /effects paper بيشتغل زي الباقي. هيك بتصير مكتبة ستايلاتك ملف واحد، وأي كليب جديد بتلبّسه أي ستايل بجملة.
دمج التأثيرات بريل واحد
ريل «7 تأثيرات» = 7 مقاطع قصيرة ورا بعض (2–3 ثواني لكل واحد) + بطاقة بالآخر. أسهل طريقة بعد ما ترندر التأثيرات: اطلب من Claude Code يقصّ ويدمج بـ ffmpeg:
خذ أول 2.5 ثانية من كل ملف بمجلد out/ ينتهي بـ -final.mp4، بالترتيب: glass-widgets، documentary، orbit، split، spotlight، checklist، timeline. ادمجهم بملف واحد out/all-effects.mp4 بنفس المقاس وبدون موسيقى، واعمل انتقال قصّ مباشر (بدون تلاشي). بالآخر ضيف 2 ثانية بطاقة سوداء مكتوب عليها «علّق Claude وببعتلك السكيل».اللي بيعمله تحت الغطا (لو بدك تفهم):
# قصّ كل تأثير لـ 2.5 ثانية
ffmpeg -i out/glass-widgets-final.mp4 -t 2.5 -c copy out/cut-1.mp4
# ... نفس الشي للباقي، بعدين قائمة ودمج
printf "file 'cut-1.mp4'\nfile 'cut-2.mp4'\n" > out/list.txt
ffmpeg -f concat -safe 0 -i out/list.txt -c copy out/all-effects.mp4الكابشن والهوك فوق الكل بيخضعوا لقواعد المونتاج (الهوك بأول ثانية ونص، الكابشن تحت): ملف المونتاج بيكمّل هالسكيل. والمؤثرات الصوتية لو بدك: دليل الصوت.
الأخطاء، والحدود بصراحة.
أخطاء بتضيّع وقتك
| الغلط | شو بيصير | الصح |
|---|---|---|
| كليب أفقي أو بمقاس غريب | قصّ غلط أو شريط أسود. | 1080×1920 من البداية، أو اطلب reframe قبل التأثير. |
| ما تعطيه أرقامك | بيوقف ويسأل (ممنوع يخترع). | حط الأرقام بنفس الرسالة. |
| spotlight بدون كليب ألفا | النص بيطلع جنبك مش وراك. | اعمل clip.webm بألفا، أو اقبل النسخة الجانبية. |
| كليب بفريم ريت متغيّر (من الموبايل) | الصوت والصورة بينزاحوا. | السكيل بيعيد الترميز لـ 30 إطار؛ خلّيه يعملها. |
| ترندر الكليب كامل بكل تأثير | دقايق رندر لكل تأثير، والناتج ثقيل. | معاينة 8 ثواني، وبالآخر 2–3 ثواني لكل تأثير بالريل. |
| تعدّل الكود بإيدك بين الطلبات | Claude Code بيضيع. | التعديل بجملة، وخلّيه هو يلمس الكود. |
| نص عربي مقطّع أو معكوس | خط بدون دعم عربي أو بدون RTL. | السكيل بيطلب Cairo + direction rtl؛ لو انكسر قله «النص العربي منفصل، صلّح الخط والاتجاه». |
تنبيهات صدق
- بالريل التأثيرات انعملت بكود كتبه Claude Code فعلاً، بس على كذا جولة ومع تعديلات مني؛ مش «أمر واحد وطلع الريل كامل». أول نتيجة من السكيل بتكون قريبة، والجمال بالتعديل بجملة أو جملتين.
- مش مجاني بالكامل: Claude Code بده خطة مدفوعة. Remotion مجاني للأفراد والشركات الصغيرة (لحد 3 أشخاص) حسب رخصتهم، وبعدها بده رخصة شركة.
- كل تأثير محادثة طويلة. أول تركيب + 7 تأثيرات بيستهلكوا من حدّ الاستخدام بالساعة على Pro. دليل الحدود.
- الأرقام اللي بالريل أرقامي (أعلى 7 ريلات بالتعليقات من تصدير حسابي). السكيل بيطلب أرقامك وما بيخترع.
- الفيديو اللي بالريل AI: رأسي من HeyGen على خلفية براندي. السكيل بيشتغل على كليب حقيقي من كاميرتك بنفس الطريقة.
- الفكرة من ريل rafa.grandi (كليب واحد، 36 تأثير بالأصل)، معمولة من جديد بأدواتي وأرقامي.