[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M751TC4PATV055BF3FFBS7GW":3,"skill-same:01M751TC4PATV055BF3FFBS7GW":49},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":31,"ownerHtmlUrl":32,"ownerBlogUrl":31,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M751TC4PATV055BF3FFBS7GW","social-video-formatter",null,"Reframe and export a finished video for social platforms - 9:16 and 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says \"make this vertical\", \"crop to 9:16\", \"format for TikTok\u002FReels\u002FShorts\", \"add captions\", \"why is my video cut off on mobile\", \"resize for Instagram\", or \"export for social\". Decides what to format for the feed, then hands a concrete spec to remotion-compose \u002F remotion-render. Do NOT use for storyboarding (use video-storyboard), animation craft (use motion-design-principles), animated caption styling (use kinetic-typography), palette and lighting (use motion-color-and-light), demo choreography (use product-demo-director), or audio (use sound-and-music-sync).","SkillMedev\u002Fskills","SkillMedev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F298078254?v=4","01M74ZSGTQ918CB0VXW4EG3RMX","SkillMe","01M74ZSGVBT497NA95CBT8JTY4",25,"MIT","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fsocial-video-formatter\u002FSKILL.md",[],[],"2026-11-11 18:22:23",false,"---\nname: social-video-formatter\ndescription: \"Reframe and export a finished video for social platforms - 9:16 and 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says \\\"make this vertical\\\", \\\"crop to 9:16\\\", \\\"format for TikTok\u002FReels\u002FShorts\\\", \\\"add captions\\\", \\\"why is my video cut off on mobile\\\", \\\"resize for Instagram\\\", or \\\"export for social\\\". Decides what to format for the feed, then hands a concrete spec to remotion-compose \u002F remotion-render. Do NOT use for storyboarding (use video-storyboard), animation craft (use motion-design-principles), animated caption styling (use kinetic-typography), palette and lighting (use motion-color-and-light), demo choreography (use product-demo-director), or audio (use sound-and-music-sync).\"\nmetadata:\n  title: \"Social Video Formatter\"\n---\n\n# Social Video Formatter\n\nYou take a video that is already *correct* - the story, motion, and brand are\ndone - and make it *land on the feed*. That is a different job from making it. A\nlandscape demo that looks great on a laptop dies in a vertical feed: it is\nletterboxed to a stripe, the caption sits under a UI button, the first frame is\nblack, and it does not loop. This skill fixes all five, per platform, and emits\nthe exact specs the mechanics pack needs.\n\nThis is the taste layer. It pairs with the **remotion-video-production** pack:\nyou decide the reframe, the safe areas, the caption style, and the loop here,\nthen hand a concrete spec to **remotion-compose** (to author the new\n`\u003CComposition>` width\u002Fheight and burn captions) and **remotion-render** (to\nexport per platform). Do not write composition code or run renders here - name\nthe spec and defer.\n\nTrigger eagerly on any request to reframe, resize, crop, verticalize, caption,\nsubtitle, or \"format \u002F export for social,\" or a named platform (TikTok, Reels,\nShorts, X\u002FTwitter, LinkedIn) - even just \"make this work on mobile.\"\n\n## Workflow\n\nRun these in order. Reframe before captions (the caption safe area depends on the\nnew aspect), and design the first frame and loop before you hand off to render.\n\n### Step 1 - Establish the target platforms and pull their specs\n\nAsk which platforms ship, then pull each one's hard constraints from the table in\n`references\u002Fplatform-specs`. You need four numbers per platform: aspect ratio,\nresolution, max length, and the safe-area insets (the band of pixels the platform\ncovers with its own UI - username, caption, action rail, progress bar). Never\nguess these; a caption inside the action-rail gutter is invisible on the device\nand fine in preview. One source video usually fans out to two or three exports\n(e.g. a 9:16 master for TikTok\u002FReels\u002FShorts plus a 1:1 or 16:9 for LinkedIn\u002FX).\n\n### Step 2 - Choose the reframe strategy (9:16 ↔ 16:9)\n\nCropping changes which pixels survive, so the subject must stay inside the new\nframe. Pick a strategy per export - see `references\u002Freframe-strategies`:\n\n- **Re-layout (best).** Do not crop the 16:9 pixels at all - re-author the scene\n  for the new canvas: stack what was side-by-side, enlarge text, move the subject\n  to the vertical center. This is a `remotion-compose` change (new width\u002Fheight,\n  same content), and it always beats a crop. Hand off the target dimensions.\n- **Center crop.** Keep the middle column of a 16:9 frame for 9:16. Fast, but it\n  discards the outer thirds - only safe when the subject is centered.\n- **Pad \u002F blur-bars.** Fit the whole 16:9 frame into 9:16 with a blurred,\n  scaled copy filling the top\u002Fbottom. Acceptable for talking-head or screen\n  recordings; looks lazy on motion-design pieces.\n- **Punch-and-track.** Crop to the subject and move the crop window over time to\n  follow the action. Strongest result, most work; specify the keyframes for\n  `remotion-compose`.\n\nGoing 9:16 → 16:9 is the same logic in reverse: re-layout to use the new\nhorizontal room rather than pillarboxing a vertical clip into a landscape stripe.\n\n### Step 3 - Map the safe areas onto the new frame\n\nFor each export, overlay the platform's safe-area insets and keep every essential\nelement - captions, logo, CTA, key subject - inside the safe rectangle. The\nright\u002Fbottom gutters (action rail + caption block) are the usual killers on 9:16.\nRun `safe_area.js` (below) to convert the percentage insets into pixel boxes for\nyour exact resolution, then pass those numbers to `remotion-compose` as the\nlayout bounds. Treat the unsafe band as off-limits for anything that must be read.\n\n### Step 4 - Design the platform-native first frame\n\nThe first frame is the thumbnail and the scroll-stopper; autoplay starts muted,\nso frame 0 must carry meaning with zero audio. Do not open on black, on a logo\nsting, or mid-fade. Open on a legible hook: the payoff result, a bold caption\nline, or the subject already on screen. This is a `remotion-compose` edit to the\nintro scene (or a 1-2s prepended hook). Specify exactly what frame 0 shows.\n\n### Step 5 - Specify burned-in captions\n\nAssume muted playback: captions are mandatory, not optional, and must be *burned\nin* (rendered into the pixels), because uploaded .srt sidecars are inconsistent\nand un-styleable across platforms. Specify, for `remotion-compose`: position\n(inside the safe area, typically lower third but above the caption-block gutter),\nstyle (large, high-contrast, semibold, with a stroke or solid backing for\nlegibility over any background), timing (phrase-level chunks synced to speech,\nnot a wall of text), and never more than ~2 lines on screen. For animated\nword-by-word captions, defer the motion design to **kinetic-typography** and just\nname the safe-area box and timing here.\n\n### Step 6 - Design the loop\n\nFeeds replay clips instantly, so a clean loop multiplies watch time. Decide one:\n\n- **Seamless loop** - last frame matches first frame (same composition,\n  position, color) so the replay is invisible. Best for short ambient\u002Fbrand\n  loops.\n- **Hook-back loop** - end on a line that sends the viewer back to the start\n  (\"…and that's step one\"), making the rewatch intentional.\n- **Hard stop** - a definitive CTA end card; correct for longer narrative pieces\n  where a loop would feel broken.\n\nFor a seamless loop, the open and close are a `remotion-compose` constraint\n(match frame 0 and the last frame). Name which loop type and the matching frames.\n\n### Step 7 - Emit the export spec and hand off\n\nFill the `export-spec` template below - one block per platform. That spec is the\nbriefing for the mechanics pack: **remotion-compose** authors a `\u003CComposition>`\nper aspect with the safe-area layout, first frame, and burned captions; then\n**remotion-render** exports each (a 9:16 export is a Composition authored at\n1080×1920, per remotion-render's vertical preset). Do not render here - deliver\nthe spec.\n\n## Quality bar\n\nAn export is A+ only when all hold:\n\n- Every platform export names a real aspect, resolution, max length, AND\n  safe-area box - pulled from the spec table, never guessed.\n- No essential element (caption, logo, CTA, subject) sits in an unsafe gutter on\n  any target platform; verified against the `safe_area.js` boxes.\n- The reframe is a re-layout or tracked crop where the subject would otherwise be\n  lost - not a blind center crop or lazy blur-bar pad on a motion piece.\n- Frame 0 reads with sound off: a hook, result, or subject - never black, never\n  a bare logo, never mid-fade.\n- Captions are burned in, inside the safe area, phrase-chunked, ≤2 lines, high\n  contrast.\n- The loop type is chosen on purpose, and a seamless loop's first\u002Flast frames are\n  specified to match.\n- The output is a spec handed to remotion-compose \u002F remotion-render - this skill\n  authored no composition code and ran no render.\n\n## Do NOT\n\n- Do NOT scaffold the project, write composition code, or run the render here -\n  name the spec and defer to remotion-setup \u002F remotion-compose \u002F remotion-render.\n- Do NOT center-crop a 16:9 source to 9:16 when the subject is off-center; you\n  will crop the subject out. Re-layout or track instead.\n- Do NOT place captions, CTAs, or logos in the right\u002Fbottom gutters where the\n  platform's action rail and caption block cover them.\n- Do NOT rely on uploaded .srt\u002F.vtt sidecar captions for social; burn them into\n  the pixels so they always render and you control the style.\n- Do NOT open on black, a logo sting, or a fade - frame 0 is the thumbnail.\n- Do NOT ship one 16:9 file to every platform; vertical feeds letterbox it to a\n  stripe. Export per aspect.\n- Do NOT exceed a platform's max length expecting it to \"still post\" - it gets\n  truncated or rejected; trim to the limit in the cut.\n- Do NOT design word-by-word caption animation here - that is kinetic-typography;\n  only specify the safe box and timing.\n- Do NOT plan the storyboard or shot order here - if the video does not exist\n  yet, that is video-storyboard; this skill reframes a video that is already cut.\n- Do NOT tune how elements move (easing, spacing, follow-through) here - that is\n  motion-design-principles; this skill only names the new canvas and bounds.\n- Do NOT pick the palette, contrast, or lighting for the reframe here - defer\n  those choices to motion-color-and-light.\n- Do NOT direct the product-demo content or screen choreography here - that is\n  product-demo-director; this skill assumes the content is locked.\n- Do NOT design the score, beat-sync, or sound here - captions assume muted\n  autoplay, but audio is sound-and-music-sync's job.\n\n## Related skills\n\nThis is one craft skill in a video pack; defer to a sibling when the request is\nreally about its concern, and hand the format spec to the mechanics skills:\n\n- **video-storyboard** - plan beats and shot order before a video exists. Comes\n  *before* this skill.\n- **product-demo-director** - direct the demo content and on-screen choreography.\n- **motion-design-principles** - the easing, spacing, and movement craft of the\n  animation; lean on it when re-laying-out a frame for a new aspect.\n- **motion-color-and-light** - palette, contrast, and lighting decisions.\n- **kinetic-typography** - animated word-by-word caption motion (you name the\n  safe box and timing; it designs the animation).\n- **sound-and-music-sync** - score and beat-sync; the audio layer this skill\n  deliberately does not touch.\n- **remotion-compose** \u002F **remotion-render** - the mechanics that consume this\n  skill's export spec to author the per-aspect `\u003CComposition>` and export the MP4.\n\n## Calculator\n\nSelf-contained Node script. Save as `safe_area.js` and run with\n`node safe_area.js`. It converts each platform's percentage safe-area insets into\npixel boxes for that platform's resolution, so you can hand exact layout bounds to\nremotion-compose. No dependencies. Edit the `platforms` block as specs change.\n\n```javascript\n\u002F\u002F Social safe-area calculator. Run: node safe_area.js\n\u002F\u002F Insets are the % of each edge the platform UI covers (top\u002Fright\u002Fbottom\u002Fleft).\n\u002F\u002F Right + bottom are large on 9:16 because of the action rail and caption block.\nconst platforms = [\n  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },\n  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },\n  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },\n  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },\n  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },\n]\n\nfunction box(p) {\n  const insetX = (pct) => Math.round((pct \u002F 100) * p.w)\n  const insetY = (pct) => Math.round((pct \u002F 100) * p.h)\n  const x = insetX(p.left)\n  const y = insetY(p.top)\n  const safeW = p.w - insetX(p.left) - insetX(p.right)\n  const safeH = p.h - insetY(p.top) - insetY(p.bottom)\n  return { x, y, safeW, safeH }\n}\n\nfor (const p of platforms) {\n  const b = box(p)\n  console.log(\n    p.name.padEnd(14),\n    `${p.w}x${p.h}`.padEnd(11),\n    'safe box -> x:' + String(b.x).padEnd(4),\n    'y:' + String(b.y).padEnd(4),\n    'w:' + String(b.safeW).padEnd(5),\n    'h:' + b.safeH\n  )\n}\n```\n\n### Worked example output\n\n```\nTikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479\nReels          1080x1920   safe box -> x:32   y:134  w:918   h:1440\nShorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574\nX (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907\nLinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161\n```\n\nRead it: on TikTok, lay out every must-read element inside x 32→961, y\n115→1594. The right gutter (the action rail: like, comment, share) eats the last\n~119px, and the bottom (username + caption) eats ~326px - anything there is\ncovered on the device though it looks fine in Studio preview. Pass these as the\nlayout bounds to remotion-compose; on a 1080×1920 vertical Composition, position\ncaptions and CTA inside the box, not at the raw frame edges.\n\n## Template: export-spec\n\nFill one block per platform. This is the briefing remotion-compose and\nremotion-render consume - paste the safe-area numbers from `safe_area.js`.\n\n```\nSOCIAL EXPORT SPEC. [FILL: video name]. Source: [FILL: 16:9 master, 1920x1080]\n\nPLATFORM: [FILL: TikTok \u002F Reels \u002F Shorts \u002F X \u002F LinkedIn]\n  Aspect \u002F resolution:   [FILL: 9:16 \u002F 1080x1920]\n  Max length:            [FILL: e.g. \u003C= 60s in-feed]\n  Safe box (px):         x:[FILL] y:[FILL] w:[FILL] h:[FILL]   (from safe_area.js)\n  Reframe strategy:      [FILL: re-layout \u002F center crop \u002F blur-pad \u002F punch-and-track]\n    -> remotion-compose: [FILL: new Composition WxH + layout notes \u002F crop keyframes]\n  First frame (frame 0): [FILL: the muted hook shown at 0 - never black\u002Flogo\u002Ffade]\n  Captions:              burned-in, [FILL: position in safe box], \u003C=2 lines,\n                         phrase-chunked, [FILL: style - size\u002Fcontrast\u002Fbacking]\n  Loop:                  [FILL: seamless \u002F hook-back \u002F hard stop]\n    -> if seamless:      frame 0 matches last frame at [FILL: position\u002Fcolor]\n  Render:                remotion-render [FILL: preset, e.g. 1080x1920 H.264 MP4]\n\n(repeat the block for each target platform)\n```\n\n## references\u002Fplatform-specs\n\nVerify against each platform's current creator docs before shipping; these are\nthe stable shape, but limits drift. Aspect and safe areas matter more than exact\nmax-length.\n\n- **TikTok** - 9:16, 1080x1920. In-feed sweet spot is short (under ~60s),\n  uploads can run much longer. Heavy right action rail and a tall bottom caption\n  block; keep must-read content high and centered. Sound-on culture, but still\n  caption for accessibility and muted autoplay.\n- **Instagram Reels** - 9:16, 1080x1920. Up to ~90s. Similar right\u002Fbottom UI to\n  TikTok plus the profile\u002Faudio row at the bottom. The in-grid crop is 1:1, so\n  the center must read as a square thumbnail too.\n- **YouTube Shorts** - 9:16, 1080x1920. Up to 60s (anything longer is a regular\n  video, not a Short). Bottom title\u002Fdescription and right action column; top is\n  relatively clean.\n- **X \u002F Twitter** - 16:9 or 1:1 in-feed; 1:1 (1080x1080) is the safest scroll\n  format because it claims more vertical feed height than 16:9 without going full\n  vertical. Keep length short; engagement drops fast past ~45s. Minimal platform\n  chrome over the video itself.\n- **LinkedIn** - 1:1 (1080x1080) or 4:5 (1080x1350) for maximum feed real\n  estate; 16:9 also supported. Professional, often-muted, scroll context -\n  burned captions and a text-forward first frame matter most here. Keep under a\n  couple of minutes.\n\nThe one-to-many rule: author a single 9:16 master that serves\nTikTok\u002FReels\u002FShorts (their safe areas mostly overlap - design to the tightest,\nwhich is Reels' bottom inset), and a separate 1:1 or 4:5 master for X\u002FLinkedIn.\nTwo source layouts cover all five platforms.\n\n## references\u002Freframe-strategies\n\nWhen you must change aspect, in order of quality:\n\n1. **Re-layout.** The motion-design answer. The 16:9 frame had room to spread out\n   horizontally; the 9:16 frame has room to stack vertically. Re-author the scene\n   to the new canvas - bigger type, stacked elements, subject centered in the new\n   frame. No pixels are thrown away because you are not cropping; you are\n   re-composing. This is the only strategy that makes a piece look *designed for*\n   the platform rather than *squeezed into* it. Hand remotion-compose the new\n   width\u002Fheight and the re-layout notes. For the re-layout's spacing and visual\n   balance, lean on motion-design-principles.\n2. **Punch-and-track.** When re-layout is impractical (e.g. a screen recording),\n   crop to the subject and animate the crop window to follow the action over\n   time. Specify crop keyframes (which region of the source is visible at which\n   timestamps) for remotion-compose.\n3. **Center crop.** Keep the middle column. Only safe when the subject is dead\n   center the whole time; it silently discards the outer thirds.\n4. **Blur-pad \u002F pillarbox.** Scale the whole frame to fit and fill the gaps with\n   a blurred enlarged copy. Acceptable for talking-head or screen content, weak\n   for designed motion - it signals \"reposted from landscape.\" Last resort.\n\nGeneral rule: re-layout when you control the composition (you do - it's a\nRemotion project), crop\u002Ftrack only when re-layout is impossible. Never blind\ncenter-crop a piece whose subject moves.\n\n## references\u002Ffirst-frame-and-loop\n\n**First frame.** Autoplay is muted and the first frame is the thumbnail, so frame\n0 does double duty: stop the scroll and make the topic legible without sound.\nStrong frame-0 patterns: the end result shown up front (\"here's the finished\nthing\"), a bold caption stating the payoff, the subject already mid-action, or a\nprovocative question on screen. Anti-patterns: opening on black, a logo sting, an\nempty stage, or a cross-fade in progress - all read as \"nothing here\" and get\nscrolled. If the natural intro is slow, prepend a 1-2s hook in remotion-compose.\n\n**Loop.** A feed replays a clip the instant it ends, so a deliberate loop buys\nfree extra watch time. Seamless: make the last frame identical to the first\n(position, scale, color) so the replay is invisible - ideal for short brand or\nambient loops. Hook-back: end on a line or visual that motivates a rewatch (a\nquestion, a \"watch again for the detail you missed\"). Hard stop: a clear CTA end\ncard, correct when the piece tells a complete story and a loop would feel like a\nglitch. Pick on purpose; for a seamless loop, tell remotion-compose exactly which\nelements frame 0 and the final frame must share.\n","# Social Video Formatter\n\nYou take a video that is already *correct* - the story, motion, and brand are\ndone - and make it *land on the feed*. That is a different job from making it. A\nlandscape demo that looks great on a laptop dies in a vertical feed: it is\nletterboxed to a stripe, the caption sits under a UI button, the first frame is\nblack, and it does not loop. This skill fixes all five, per platform, and emits\nthe exact specs the mechanics pack needs.\n\nThis is the taste layer. It pairs with the **remotion-video-production** pack:\nyou decide the reframe, the safe areas, the caption style, and the loop here,\nthen hand a concrete spec to **remotion-compose** (to author the new\n`\u003CComposition>` width\u002Fheight and burn captions) and **remotion-render** (to\nexport per platform). Do not write composition code or run renders here - name\nthe spec and defer.\n\nTrigger eagerly on any request to reframe, resize, crop, verticalize, caption,\nsubtitle, or \"format \u002F export for social,\" or a named platform (TikTok, Reels,\nShorts, X\u002FTwitter, LinkedIn) - even just \"make this work on mobile.\"\n\n## Workflow\n\nRun these in order. Reframe before captions (the caption safe area depends on the\nnew aspect), and design the first frame and loop before you hand off to render.\n\n### Step 1 - Establish the target platforms and pull their specs\n\nAsk which platforms ship, then pull each one's hard constraints from the table in\n`references\u002Fplatform-specs`. You need four numbers per platform: aspect ratio,\nresolution, max length, and the safe-area insets (the band of pixels the platform\ncovers with its own UI - username, caption, action rail, progress bar). Never\nguess these; a caption inside the action-rail gutter is invisible on the device\nand fine in preview. One source video usually fans out to two or three exports\n(e.g. a 9:16 master for TikTok\u002FReels\u002FShorts plus a 1:1 or 16:9 for LinkedIn\u002FX).\n\n### Step 2 - Choose the reframe strategy (9:16 ↔ 16:9)\n\nCropping changes which pixels survive, so the subject must stay inside the new\nframe. Pick a strategy per export - see `references\u002Freframe-strategies`:\n\n- **Re-layout (best).** Do not crop the 16:9 pixels at all - re-author the scene\n  for the new canvas: stack what was side-by-side, enlarge text, move the subject\n  to the vertical center. This is a `remotion-compose` change (new width\u002Fheight,\n  same content), and it always beats a crop. Hand off the target dimensions.\n- **Center crop.** Keep the middle column of a 16:9 frame for 9:16. Fast, but it\n  discards the outer thirds - only safe when the subject is centered.\n- **Pad \u002F blur-bars.** Fit the whole 16:9 frame into 9:16 with a blurred,\n  scaled copy filling the top\u002Fbottom. Acceptable for talking-head or screen\n  recordings; looks lazy on motion-design pieces.\n- **Punch-and-track.** Crop to the subject and move the crop window over time to\n  follow the action. Strongest result, most work; specify the keyframes for\n  `remotion-compose`.\n\nGoing 9:16 → 16:9 is the same logic in reverse: re-layout to use the new\nhorizontal room rather than pillarboxing a vertical clip into a landscape stripe.\n\n### Step 3 - Map the safe areas onto the new frame\n\nFor each export, overlay the platform's safe-area insets and keep every essential\nelement - captions, logo, CTA, key subject - inside the safe rectangle. The\nright\u002Fbottom gutters (action rail + caption block) are the usual killers on 9:16.\nRun `safe_area.js` (below) to convert the percentage insets into pixel boxes for\nyour exact resolution, then pass those numbers to `remotion-compose` as the\nlayout bounds. Treat the unsafe band as off-limits for anything that must be read.\n\n### Step 4 - Design the platform-native first frame\n\nThe first frame is the thumbnail and the scroll-stopper; autoplay starts muted,\nso frame 0 must carry meaning with zero audio. Do not open on black, on a logo\nsting, or mid-fade. Open on a legible hook: the payoff result, a bold caption\nline, or the subject already on screen. This is a `remotion-compose` edit to the\nintro scene (or a 1-2s prepended hook). Specify exactly what frame 0 shows.\n\n### Step 5 - Specify burned-in captions\n\nAssume muted playback: captions are mandatory, not optional, and must be *burned\nin* (rendered into the pixels), because uploaded .srt sidecars are inconsistent\nand un-styleable across platforms. Specify, for `remotion-compose`: position\n(inside the safe area, typically lower third but above the caption-block gutter),\nstyle (large, high-contrast, semibold, with a stroke or solid backing for\nlegibility over any background), timing (phrase-level chunks synced to speech,\nnot a wall of text), and never more than ~2 lines on screen. For animated\nword-by-word captions, defer the motion design to **kinetic-typography** and just\nname the safe-area box and timing here.\n\n### Step 6 - Design the loop\n\nFeeds replay clips instantly, so a clean loop multiplies watch time. Decide one:\n\n- **Seamless loop** - last frame matches first frame (same composition,\n  position, color) so the replay is invisible. Best for short ambient\u002Fbrand\n  loops.\n- **Hook-back loop** - end on a line that sends the viewer back to the start\n  (\"…and that's step one\"), making the rewatch intentional.\n- **Hard stop** - a definitive CTA end card; correct for longer narrative pieces\n  where a loop would feel broken.\n\nFor a seamless loop, the open and close are a `remotion-compose` constraint\n(match frame 0 and the last frame). Name which loop type and the matching frames.\n\n### Step 7 - Emit the export spec and hand off\n\nFill the `export-spec` template below - one block per platform. That spec is the\nbriefing for the mechanics pack: **remotion-compose** authors a `\u003CComposition>`\nper aspect with the safe-area layout, first frame, and burned captions; then\n**remotion-render** exports each (a 9:16 export is a Composition authored at\n1080×1920, per remotion-render's vertical preset). Do not render here - deliver\nthe spec.\n\n## Quality bar\n\nAn export is A+ only when all hold:\n\n- Every platform export names a real aspect, resolution, max length, AND\n  safe-area box - pulled from the spec table, never guessed.\n- No essential element (caption, logo, CTA, subject) sits in an unsafe gutter on\n  any target platform; verified against the `safe_area.js` boxes.\n- The reframe is a re-layout or tracked crop where the subject would otherwise be\n  lost - not a blind center crop or lazy blur-bar pad on a motion piece.\n- Frame 0 reads with sound off: a hook, result, or subject - never black, never\n  a bare logo, never mid-fade.\n- Captions are burned in, inside the safe area, phrase-chunked, ≤2 lines, high\n  contrast.\n- The loop type is chosen on purpose, and a seamless loop's first\u002Flast frames are\n  specified to match.\n- The output is a spec handed to remotion-compose \u002F remotion-render - this skill\n  authored no composition code and ran no render.\n\n## Do NOT\n\n- Do NOT scaffold the project, write composition code, or run the render here -\n  name the spec and defer to remotion-setup \u002F remotion-compose \u002F remotion-render.\n- Do NOT center-crop a 16:9 source to 9:16 when the subject is off-center; you\n  will crop the subject out. Re-layout or track instead.\n- Do NOT place captions, CTAs, or logos in the right\u002Fbottom gutters where the\n  platform's action rail and caption block cover them.\n- Do NOT rely on uploaded .srt\u002F.vtt sidecar captions for social; burn them into\n  the pixels so they always render and you control the style.\n- Do NOT open on black, a logo sting, or a fade - frame 0 is the thumbnail.\n- Do NOT ship one 16:9 file to every platform; vertical feeds letterbox it to a\n  stripe. Export per aspect.\n- Do NOT exceed a platform's max length expecting it to \"still post\" - it gets\n  truncated or rejected; trim to the limit in the cut.\n- Do NOT design word-by-word caption animation here - that is kinetic-typography;\n  only specify the safe box and timing.\n- Do NOT plan the storyboard or shot order here - if the video does not exist\n  yet, that is video-storyboard; this skill reframes a video that is already cut.\n- Do NOT tune how elements move (easing, spacing, follow-through) here - that is\n  motion-design-principles; this skill only names the new canvas and bounds.\n- Do NOT pick the palette, contrast, or lighting for the reframe here - defer\n  those choices to motion-color-and-light.\n- Do NOT direct the product-demo content or screen choreography here - that is\n  product-demo-director; this skill assumes the content is locked.\n- Do NOT design the score, beat-sync, or sound here - captions assume muted\n  autoplay, but audio is sound-and-music-sync's job.\n\n## Related skills\n\nThis is one craft skill in a video pack; defer to a sibling when the request is\nreally about its concern, and hand the format spec to the mechanics skills:\n\n- **video-storyboard** - plan beats and shot order before a video exists. Comes\n  *before* this skill.\n- **product-demo-director** - direct the demo content and on-screen choreography.\n- **motion-design-principles** - the easing, spacing, and movement craft of the\n  animation; lean on it when re-laying-out a frame for a new aspect.\n- **motion-color-and-light** - palette, contrast, and lighting decisions.\n- **kinetic-typography** - animated word-by-word caption motion (you name the\n  safe box and timing; it designs the animation).\n- **sound-and-music-sync** - score and beat-sync; the audio layer this skill\n  deliberately does not touch.\n- **remotion-compose** \u002F **remotion-render** - the mechanics that consume this\n  skill's export spec to author the per-aspect `\u003CComposition>` and export the MP4.\n\n## Calculator\n\nSelf-contained Node script. Save as `safe_area.js` and run with\n`node safe_area.js`. It converts each platform's percentage safe-area insets into\npixel boxes for that platform's resolution, so you can hand exact layout bounds to\nremotion-compose. No dependencies. Edit the `platforms` block as specs change.\n\n```javascript\n\u002F\u002F Social safe-area calculator. Run: node safe_area.js\n\u002F\u002F Insets are the % of each edge the platform UI covers (top\u002Fright\u002Fbottom\u002Fleft).\n\u002F\u002F Right + bottom are large on 9:16 because of the action rail and caption block.\nconst platforms = [\n  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },\n  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },\n  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },\n  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },\n  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },\n]\n\nfunction box(p) {\n  const insetX = (pct) => Math.round((pct \u002F 100) * p.w)\n  const insetY = (pct) => Math.round((pct \u002F 100) * p.h)\n  const x = insetX(p.left)\n  const y = insetY(p.top)\n  const safeW = p.w - insetX(p.left) - insetX(p.right)\n  const safeH = p.h - insetY(p.top) - insetY(p.bottom)\n  return { x, y, safeW, safeH }\n}\n\nfor (const p of platforms) {\n  const b = box(p)\n  console.log(\n    p.name.padEnd(14),\n    `${p.w}x${p.h}`.padEnd(11),\n    'safe box -> x:' + String(b.x).padEnd(4),\n    'y:' + String(b.y).padEnd(4),\n    'w:' + String(b.safeW).padEnd(5),\n    'h:' + b.safeH\n  )\n}\n```\n\n### Worked example output\n\n```\nTikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479\nReels          1080x1920   safe box -> x:32   y:134  w:918   h:1440\nShorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574\nX (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907\nLinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161\n```\n\nRead it: on TikTok, lay out every must-read element inside x 32→961, y\n115→1594. The right gutter (the action rail: like, comment, share) eats the last\n~119px, and the bottom (username + caption) eats ~326px - anything there is\ncovered on the device though it looks fine in Studio preview. Pass these as the\nlayout bounds to remotion-compose; on a 1080×1920 vertical Composition, position\ncaptions and CTA inside the box, not at the raw frame edges.\n\n## Template: export-spec\n\nFill one block per platform. This is the briefing remotion-compose and\nremotion-render consume - paste the safe-area numbers from `safe_area.js`.\n\n```\nSOCIAL EXPORT SPEC. [FILL: video name]. Source: [FILL: 16:9 master, 1920x1080]\n\nPLATFORM: [FILL: TikTok \u002F Reels \u002F Shorts \u002F X \u002F LinkedIn]\n  Aspect \u002F resolution:   [FILL: 9:16 \u002F 1080x1920]\n  Max length:            [FILL: e.g. \u003C= 60s in-feed]\n  Safe box (px):         x:[FILL] y:[FILL] w:[FILL] h:[FILL]   (from safe_area.js)\n  Reframe strategy:      [FILL: re-layout \u002F center crop \u002F blur-pad \u002F punch-and-track]\n    -> remotion-compose: [FILL: new Composition WxH + layout notes \u002F crop keyframes]\n  First frame (frame 0): [FILL: the muted hook shown at 0 - never black\u002Flogo\u002Ffade]\n  Captions:              burned-in, [FILL: position in safe box], \u003C=2 lines,\n                         phrase-chunked, [FILL: style - size\u002Fcontrast\u002Fbacking]\n  Loop:                  [FILL: seamless \u002F hook-back \u002F hard stop]\n    -> if seamless:      frame 0 matches last frame at [FILL: position\u002Fcolor]\n  Render:                remotion-render [FILL: preset, e.g. 1080x1920 H.264 MP4]\n\n(repeat the block for each target platform)\n```\n\n## references\u002Fplatform-specs\n\nVerify against each platform's current creator docs before shipping; these are\nthe stable shape, but limits drift. Aspect and safe areas matter more than exact\nmax-length.\n\n- **TikTok** - 9:16, 1080x1920. In-feed sweet spot is short (under ~60s),\n  uploads can run much longer. Heavy right action rail and a tall bottom caption\n  block; keep must-read content high and centered. Sound-on culture, but still\n  caption for accessibility and muted autoplay.\n- **Instagram Reels** - 9:16, 1080x1920. Up to ~90s. Similar right\u002Fbottom UI to\n  TikTok plus the profile\u002Faudio row at the bottom. The in-grid crop is 1:1, so\n  the center must read as a square thumbnail too.\n- **YouTube Shorts** - 9:16, 1080x1920. Up to 60s (anything longer is a regular\n  video, not a Short). Bottom title\u002Fdescription and right action column; top is\n  relatively clean.\n- **X \u002F Twitter** - 16:9 or 1:1 in-feed; 1:1 (1080x1080) is the safest scroll\n  format because it claims more vertical feed height than 16:9 without going full\n  vertical. Keep length short; engagement drops fast past ~45s. Minimal platform\n  chrome over the video itself.\n- **LinkedIn** - 1:1 (1080x1080) or 4:5 (1080x1350) for maximum feed real\n  estate; 16:9 also supported. Professional, often-muted, scroll context -\n  burned captions and a text-forward first frame matter most here. Keep under a\n  couple of minutes.\n\nThe one-to-many rule: author a single 9:16 master that serves\nTikTok\u002FReels\u002FShorts (their safe areas mostly overlap - design to the tightest,\nwhich is Reels' bottom inset), and a separate 1:1 or 4:5 master for X\u002FLinkedIn.\nTwo source layouts cover all five platforms.\n\n## references\u002Freframe-strategies\n\nWhen you must change aspect, in order of quality:\n\n1. **Re-layout.** The motion-design answer. The 16:9 frame had room to spread out\n   horizontally; the 9:16 frame has room to stack vertically. Re-author the scene\n   to the new canvas - bigger type, stacked elements, subject centered in the new\n   frame. No pixels are thrown away because you are not cropping; you are\n   re-composing. This is the only strategy that makes a piece look *designed for*\n   the platform rather than *squeezed into* it. Hand remotion-compose the new\n   width\u002Fheight and the re-layout notes. For the re-layout's spacing and visual\n   balance, lean on motion-design-principles.\n2. **Punch-and-track.** When re-layout is impractical (e.g. a screen recording),\n   crop to the subject and animate the crop window to follow the action over\n   time. Specify crop keyframes (which region of the source is visible at which\n   timestamps) for remotion-compose.\n3. **Center crop.** Keep the middle column. Only safe when the subject is dead\n   center the whole time; it silently discards the outer thirds.\n4. **Blur-pad \u002F pillarbox.** Scale the whole frame to fit and fill the gaps with\n   a blurred enlarged copy. Acceptable for talking-head or screen content, weak\n   for designed motion - it signals \"reposted from landscape.\" Last resort.\n\nGeneral rule: re-layout when you control the composition (you do - it's a\nRemotion project), crop\u002Ftrack only when re-layout is impossible. Never blind\ncenter-crop a piece whose subject moves.\n\n## references\u002Ffirst-frame-and-loop\n\n**First frame.** Autoplay is muted and the first frame is the thumbnail, so frame\n0 does double duty: stop the scroll and make the topic legible without sound.\nStrong frame-0 patterns: the end result shown up front (\"here's the finished\nthing\"), a bold caption stating the payoff, the subject already mid-action, or a\nprovocative question on screen. Anti-patterns: opening on black, a logo sting, an\nempty stage, or a cross-fade in progress - all read as \"nothing here\" and get\nscrolled. If the natural intro is slow, prepend a 1-2s hook in remotion-compose.\n\n**Loop.** A feed replays a clip the instant it ends, so a deliberate loop buys\nfree extra watch time. Seamless: make the last frame identical to the first\n(position, scale, color) so the replay is invisible - ideal for short brand or\nambient loops. Hook-back: end on a line or visual that motivates a rewatch (a\nquestion, a \"watch again for the detail you missed\"). Hard stop: a clear CTA end\ncard, correct when the piece tells a complete story and a loop would feel like a\nglitch. Pick on purpose; for a seamless loop, tell remotion-compose exactly which\nelements frame 0 and the final frame must share.\n",{"name":5,"metadata":24,"description":7},{"title":25},"Social Video Formatter","main","97a13607d669157a4a16d5ba79b77f208319f7b9","skills\u002Fsocial-video-formatter",3,"https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills","https:\u002F\u002Fskillme.dev","https:\u002F\u002Fgithub.com\u002FSkillMedev","MCP-native catalog of Claude Agent Skills. Browse, recommend, install, and auto-apply skills in chat. Open source, every skill free and clonable on GitHub.","2026-10-14 03:19:31",{"source":8,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add SkillMedev\u002Fskills --skill social-video-formatter",{"tool":41,"command":42},"bunx","bunx skills add SkillMedev\u002Fskills --skill social-video-formatter",{"tool":44,"command":45},"pnpm","pnpm dlx skills add SkillMedev\u002Fskills --skill social-video-formatter","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fsocial-video-formatter\u002FSKILL.md",true,[],[50,60,67,74,81,88],{"skillNo":51,"name":52,"nameZh":53,"description":54,"descriptionZh":55,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":56,"categories":57,"keywords":58,"publishedAt":59},"01M75271B256DF3FX2VG5VRYEE","zone-2-cardio-plan","有氧运动计划","Use when someone asks to build a steady-state cardio plan, train an aerobic base or Zone 2, structure easy or endurance weekly cardio, train by heart-rate zones, or improve resting heart rate, VO2, or endurance. Builds a heart-rate-zone aerobic training block with session structure, modality choice, and progression. General fitness guidance, not medical advice. Do NOT use to design a strength or lifting program (use Strength Training Plan), high-intensity interval conditioning, HIIT, or circuits (use Conditioning & HIIT Program), or a mobility\u002Fflexibility routine (use Mobility Routine).","当有人要求制定稳态有氧训练计划、进行有氧基础训练或达到第二区间、安排轻松或耐力型的每周有氧训练、按心率区间训练，或提高静息心率、最大摄氧量或耐力时，可以使用此方案。该方案构建了一个包含训练计划结构、训练方式选择和进度安排的心率区间有氧训练模块。本方案仅提供一般健身指导，不构成医疗建议。请勿用于设计力量或举重训练计划（请使用力量训练计划）、高强度间歇训练 (HIIT) 或循环训练（请使用体能训练和 HIIT 计划），或灵活性\u002F柔韧性训练（请使用灵活性训练计划）。","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzone-2-cardio-plan\u002FSKILL.md",[],[],"2026-11-11 18:27:18",{"skillNo":61,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":64,"categories":65,"keywords":66,"publishedAt":59},"01M7526VP1QBBKYBE17S1WR86Y","youtube-script-writer","Writes retention-engineered long-form YouTube scripts on a hook\u002Fbody\u002Fpayoff architecture - a first-30-seconds hook that survives the retention cliff, a beat-sheet body with mini-hooks and bridges, timed pattern interrupts, and a payoff that over-delivers - with B-roll and editing cues marked inline. Use when someone says \"script my next video\", \"my retention graph dies at the start\", \"tighten this draft\", or \"outline a video on X\". Do NOT use for the 3-second opener of TikTok, Reels, or Shorts - use video-hook-writer instead; do NOT use for spoken voiceover synced to on-screen tutorial actions - use narration-script instead; do NOT use for a sales demo built on a buyer's discovery notes - use demo-script instead; do NOT use to design the thumbnail and title - use thumbnail-concept instead.","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-writer\u002FSKILL.md",[],[],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":59},"01M7526P2T0WKMHDXS4Q58237T","win-back-campaign","Designs segmented win-back email sequences for dormant users - dormancy tiers, a three-beat sequence with a single proportional incentive, and a suppression rule - and measures success by re-activation, not opens. Use when someone says \"our users went quiet\", \"design a win-back campaign\", \"how do I re-engage lapsed customers\", \"should we email people who haven't logged in for months\", or lifecycle messaging has stopped landing with a lapsed segment. Do NOT use for recovering an unfinished checkout - use abandoned-cart-sequence instead. Do NOT use for diagnosing and fixing why active customers cancel - use churn-reduction instead. Do NOT use for building always-on onboarding or nurture flows - use email-drip-builder instead.","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fwin-back-campaign\u002FSKILL.md",[],[],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":59},"01M7526HF2RCDJ50P93WRZRHVV","wikipedia-style","Writes neutral, verifiable, encyclopedic prose following Wikipedia's core content policies and manual of style - NPOV, inline citations, notability-backed claims, and a strict ban on promotional language. Use when someone asks \"write this like a Wikipedia article\", \"draft a Wikipedia page for this company or person\", \"make this neutral and encyclopedic\", or \"why does my article draft keep getting rejected\". Do NOT use for persuasive or opinion writing - use op-ed-writer instead; for thesis-driven academic papers, use academic-essay; for verifying claims in existing text, use fact-checker.","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fwikipedia-style\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":59},"01M7526D43CTGRKGKNQ2GB0KVX","whitepapers","Structures and writes authoritative B2B whitepapers - a standalone executive summary, a data-sized problem statement, methodology, evidence-driven findings, recommendations, and a soft call to action - flagging every claim that needs a real citation. Use when a marketer asks \"write a whitepaper on this topic\", \"turn our research into a lead-gen asset\", \"make this credible enough for executives\", or a draft reads like a product pitch instead of analysis. Do NOT use for customer-story-driven proof - use case-study-builder instead; for policy audiences, use policy-brief.","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fwhitepapers\u002FSKILL.md",[],[],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":59},"01M75268423Y3K50SY5WC2NX2G","white-space-analysis","Finds unmet market gaps by ranking jobs-to-be-done on importance versus satisfaction, overlaying them against current solutions and workarounds, and validating that each gap is real, winnable, and worth winning. Use when someone asks \"where are the gaps in this market\", \"what's underserved here\", \"where should we play next\", or is hunting for product, feature, or market-entry opportunities. Do NOT use for profiling competitors and building battle cards - use competitive-intelligence instead; for putting a dollar figure on an identified opportunity - use market-sizing instead; for extracting jobs-to-be-done from raw customer interviews - use jtbd-extractor instead.","https:\u002F\u002Fgithub.com\u002FSkillMedev\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fwhite-space-analysis\u002FSKILL.md",[],[]]