קורן בן עזרא
Remotion (remotion-dev)מה זה Remotion Best Practices?
Remotion היא ספרייה שבה כותבים סרטון כמו שכותבים אתר, ב-React, ומפיקים ממנו קובץ MP4. הצוות של Remotion מתחזק 12 סקילים רשמיים, ובראשם remotion-best-practices, שמלמדים את Claude להקים פרויקט, לבנות סצנות, להוסיף כתוביות, קריינות ומפות, להציג תצוגה מקדימה ולרנדר רק כשמבקשים.
סרטון שנבנה בקוד הוא סרטון שאפשר לשכפל. ברגע שיש תבנית של סרטון מוצר, אפשר להחליף שם, מחיר ותמונה ולקבל עשר גרסאות בלי לפתוח תוכנת עריכה. Remotion מאפשרת את זה עם React, והסקילים הרשמיים שלה מלמדים את Claude לעבוד נכון בתוך הספרייה: איך בונים קומפוזיציה, איך מתזמנים אנימציות לפי פריימים, איך משלבים אודיו, גופנים ותמונות, ואיך נמנעים מבעיות רינדור.
המאגר remotion-dev/skills כולל 12 סקילים. remotion-best-practices הוא הנתב: הוא קובע כמה כללי עבודה ומפנה את Claude לחלק הרלוונטי, למשל ליצירת פרויקט חדש, להנחיות markup, למפות או לכתוביות. בתוך remotion-markup לבד יש 30 קובצי הנחיות, בהם תלת-ממד, ויזואליזציה של אודיו, Lottie, FFmpeg, מעברים, מדידת טקסט, אפקטים קוליים וזיהוי שקט. הסקילים ממוספרים לפי גרסת Remotion (4.0.530 בזמן הבדיקה), ומתעדכנים יחד עם הספרייה.
חשוב להבין את שיטת העבודה שהסקיל מכתיב. כשמבקשים "תכין סרטון", Claude בונה את הקומפוזיציה ופותח את Remotion Studio לתצוגה מקדימה, ולא מרנדר אוטומטית. רינדור ל-MP4 קורה רק כשכותבים במפורש "תרנדר" או "תייצא". כך אפשר לראות, לתקן ולשנות לפני שמחכים לקובץ סופי. הסקיל גם מורה ל-Claude לא לדרוס שינויים שעשיתם בקוד בעצמכם בזמן השיחה.
למי זה מתאים
- עסקים וסוכנויות שמייצרים סרטוני מוצר, מבצעים או סטוריז בכמות ורוצים תבנית שאפשר לשכפל
- יוצרי תוכן שרוצים כתוביות מונפשות, קריינות וגרפיקה בלי תוכנת עריכה
- מפתחים שבונים שירות שמייצר סרטונים אוטומטית, למשל סרטון אישי לכל לקוח
- מי שצריך סרטוני הסבר עם מפות, מסלולים וגרפים מונפשים
מה הוא עושה
נתב אחד לכל הידע
remotion-best-practices מכיל הפניות לכל שאר הסקילים, ולכן גם מי שמתקין רק אותו מקבל את כל ההנחיות. Claude טוען רק את החלק שרלוונטי למשימה.
הקמת פרויקט אוטומטית
remotion-create בודק את התיקייה, מקים פרויקט עם npx create-video@latest ומוסיף קומפוזיציה. בתיקייה לא ריקה הוא יוצר תת-תיקייה במקום לדרוס קבצים.
30 קובצי הנחיות למרקאפ
remotion-markup מכסה קומפוזיציות, תזמון, רצפים, מעברים, גופני Google ומקומיים, תמונות, וידאו מוטמע, GIF, Lottie, תלת-ממד, טשטוש תנועה, FFmpeg ועוד.
כתוביות ותמלול מקומי
remotion-captions מסביר איך להציג כתוביות, לייבא קובץ SRT ולתמלל אודיו עם @remotion/whisper-webgpu שרץ על כרטיס המסך במחשב, בלי שירות ענן.
קריינות AI
קובץ ההנחיות voiceover מתאר יצירת קריינות לכל סצנה עם ElevenLabs (או ספק TTS אחר) והתאמה אוטומטית של אורך הסרטון לאורך האודיו.
מפות מונפשות
remotion-maps מציע חמש טכניקות: מפה סטטית, Mapbox, MapLibre (חינמית, בלי מפתח), MapTiler ו-CesiumJS לטיסה תלת-ממדית מעל שטח.
תצוגה מקדימה לפני רינדור
הסקיל מורה לפתוח Remotion Studio ולא לרנדר עד שמבקשים. כשמבקשים, remotion-render מריץ npx remotion render לווידאו או npx remotion still לתמונה.
מוצר ו-SaaS
remotion-saas מסביר בניית אפליקציה סביב Remotion: נגן <Player>, רינדור ב-Lambda, Vercel או Cloudflare, ובחירת תבנית מתאימה.
מה יש בפנים
remotion-best-practicesהנתב הראשי. מפנה לכל שאר הסקילים ומגדיר את כללי העבודה: לא לדרוס שינויים של המשתמש, תצוגה מקדימה לפני רינדור.remotion-createיצירת פרויקט Remotion חדש או קומפוזיציה חדשה, כולל כללי פריסה וגודל טקסט לסרטון.remotion-markupהנחיות לכתיבת markup ב-React: קומפוזיציות, אנימציה, פריסה, טיפוגרפיה, מדיה, אפקטים, אודיו וגופנים, ב-30 קובצי הנחיות.remotion-studioהפעלת Remotion Studio לתצוגה מקדימה של הסרטון בדפדפן.remotion-renderרינדור לווידאו או לתמונה, כולל פריימים נבחרים ווידאו עם רקע שקוף.remotion-mapsאנימציות מפה: מסלולים, סמנים, הסברים גאוגרפיים ו-GeoJSON, עם Mapbox, MapLibre, MapTiler או CesiumJS.remotion-captionsתמלול, הצגה והנפשה של כתוביות, כולל ייבוא SRT.remotion-saasארכיטקטורה לאפליקציות ומוצרים שמבוססים על Remotion.remotion-interactivityמבנה קוד שמאפשר לערוך אלמנטים ישירות ב-Studio ולכתוב את השינוי חזרה לקוד.remotion-docsחיפוש בתיעוד של Remotion ושליפת כל עמוד כ-Markdown, כדי שהקוד יתבסס על ה-API העדכני.remotion-upgradeשדרוג Remotion, החבילות הקשורות, Mediabunny והסקילים עצמם.remotion-multimediaעבודה עם Mediabunny בדפדפן: אורך אודיו ווידאו, מידות וידאו ומטא-דאטה.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
סרטון מבצע לחנות
/remotion-create תכין סרטון אנכי של 15 שניות למבצע סוף עונה בחנות בגדים: שלושה מוצרים מהתיקייה products, מחיר לפני ואחרי, ובסוף כתובת האתר. אל תרנדר, רק תפתח לי תצוגה מקדימה.מה מקבלים: פרויקט Remotion עם קומפוזיציה אנכית, סצנה לכל מוצר ומעברים, שנפתח ב-Remotion Studio לצפייה ולתיקונים.
כתוביות לסרטון קיים
יש לי סרטון בשם interview.mp4. תתמלל אותו ותוסיף כתוביות מונפשות שמדגישות כל מילה בזמן שהיא נאמרת.מה מקבלים: תמלול מקומי עם whisper-webgpu וקומפוננטת כתוביות מסונכרנת. בדרך הוא יבקש להתקין את החבילות הנדרשות.
מפת סניפים מונפשת
/remotion-maps תכין סרטון שמראה מסלול מתל אביב לחיפה ולנצרת, עם סמן לכל סניף של הרשת שלנו. תשתמש ב-MapLibre כדי שלא נצטרך מפתח API.מה מקבלים: סרטון מפה עם מסלול מונפש וסמנים, על בסיס MapLibre החינמי.
תבנית ל-20 גרסאות
תבנה תבנית סרטון עדות לקוח שמקבלת שם, ציטוט ותמונה כפרמטרים, ואז תרנדר 20 גרסאות מהקובץ testimonials.json.מה מקבלים: קומפוזיציה עם פרמטרים ואחרי אישור רינדור של 20 קובצי MP4, אחד לכל לקוח.
מה צריך לפני שמתחילים
- Node.js ו-Git במחשב. הסקילים מקימים פרויקט עם npx create-video@latest ומריצים npx remotion
- רישיון Remotion: חינמי ליחידים, לחברות למטרות רווח עם עד 3 עובדים ולעמותות. חברות גדולות יותר צריכות רישיון חברה בתשלום
- קריינות לפי ההנחיות דורשת מפתח ElevenLabs (ELEVENLABS_API_KEY) או ספק TTS אחר, וזה שירות בתשלום
- תמלול מקומי דורש כרטיס מסך תואם, ולפי הסקיל הוא לא עובד על Linux arm64
- מפות Mapbox דורשות מפתח. MapLibre עובדת בלי מפתח
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Remotion Best Practices.
יש 2 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה.
הדרך הקלה: מדביקים בצ'אט של Claude Code
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי את 12 הסקילים הרשמיים של Remotion מ-GitHub. תריץ את הפקודה הבאה ותגיד לי כשהיא מסתיימת: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/remotion-dev/skills "$D/repo" && mkdir -p ~/.claude/skills && find "$D/repo/skills" -maxdepth 2 -name SKILL.md -exec dirname {} \; | while read d; do cp -R "$d" ~/.claude/skills/; done && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
D="$(mktemp -d)"
git clone --depth 1 -q https://github.com/remotion-dev/skills "$D/repo"
mkdir -p ~/.claude/skills
find "$D/repo/skills" -maxdepth 2 -name SKILL.md -exec dirname {} \; | while read d; do cp -R "$d" ~/.claude/skills/; done
rm -rf "$D"אין מפתחות חובה, רק פותחים סשן חדש של Claude Code כדי שהסקילים ייטענו. מפתח ElevenLabs או Mapbox צריך רק אם משתמשים בקריינות או במפות של Mapbox, ואז מגדירים אותו כמשתנה סביבה לפי מה ש-Claude מבקש.
- מקלידים / בסשן חדש ובודקים שמופיעים remotion-best-practices, remotion-create ו-remotion-render
- בטרמינל מריצים ls ~/.claude/skills | grep remotion ואמורות להופיע 12 תיקיות
- שואלים את Claude "אילו סקילים של Remotion יש לך?"
מוחקים את התיקיות עם rm -rf ~/.claude/skills/remotion-* ומריצים שוב את פקודת ההתקנה. בתוך פרויקט Remotion קיים אפשר גם לבקש /remotion-upgrade, שמעדכן את Remotion, את החבילות הקשורות ואת הסקילים המותקנים.
rm -rf ~/.claude/skills/remotion-*
איך משתמשים ביום יום
- הדרך הפשוטה: מבקשים "תכין סרטון" ומתארים אותו. remotion-best-practices ינתב את Claude ליצירת פרויקט ולהנחיות המתאימות.
- אפשר לפנות לסקיל מסוים עם /, למשל /remotion-create, /remotion-maps או /remotion-docs, כמו בדוגמאות שבתיעוד של Remotion.
- אחרי שהקומפוזיציה מוכנה, Claude פותח את Remotion Studio (npx remotion studio) ואתם צופים ומבקשים תיקונים.
- כשהתוצאה מתאימה כותבים במפורש "תרנדר ל-MP4", ורק אז Claude מריץ npx remotion render.
- דרך ההתקנה הרשמית של Remotion היא npx skills add remotion-dev/skills, ובפרויקט חדש שנוצר עם bun create video מוצעת ההתקנה כחלק מההקמה.
טיפים שימושיים
- תנו ל-Claude את החומרים מראש, כמו לוגו, תמונות מוצרים וקובץ מוזיקה, בתוך תיקיית public של הפרויקט.
- לפני שמשתמשים בסרטונים בעסק עם יותר משלושה עובדים, בדקו את תנאי רישיון Remotion ואם צריך רישיון חברה.
- לעברית בסרטון בקשו גופן עברי מ-Google Fonts וכיוון מימין לשמאל, ובדקו את הטקסט בתצוגה המקדימה לפני רינדור.
- כשהקוד לא מתנהג כמו שציפיתם, בקשו מ-Claude להשתמש ב-/remotion-docs כדי לבדוק את ה-API העדכני במקום לנחש.
תקלות נפוצות
הפקודה npx create-video נכשלת
Studio לא נפתח בדפדפן
התמלול נכשל
הרינדור איטי מאוד
שאלות ותשובות
Remotion חינמית?
צריך לדעת React?
מה ההבדל בין remotion-best-practices לשאר הסקילים?
אפשר ליצור סרטונים לאינסטגרם ולטיקטוק?
הקריינות עובדת בעברית?
קרדיט ומקור. Remotion Best Practices נכתב על ידי Remotion (remotion-dev) ונמצא ב-remotion-dev/skills ברישיון No license file (Remotion itself uses the Remotion License). את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
digitalsamba
Anthropic