Social Video Content

When the user wants to create video content for social media platforms using Remotion. Also use when the user mentions 'social video,' 'video for social,' 's...

Security Scan

The skill is an instruction-only Remotion guide for producing social-video compositions; its requested actions and file reads are coherent with that purpose and it does not ask for credentials or install artifacts.

Purpose & Capability

The name/description match the SKILL.md content: guidance for building Remotion-based social videos (vertical/square/landscape). There are no unrelated environment variables, binaries, or install steps requested that would be disproportionate to video-authoring guidance.

Instruction Scope

Instructions are narrowly focused on Remotion project setup, composition registration, layout patterns, and render commands. They do instruct the agent to read a local marketing context file if present ('.agents/product-marketing-context.md' or legacy path). That is reasonable for tailoring video copy, but it means the skill will look at workspace files if available—review those files for sensitive data before allowing the skill to use them.

Install Mechanism

No install spec or code is bundled (instruction-only). The SKILL recommends running 'npx remotion ...' commands. npx will fetch and execute packages from the npm registry if the package isn't installed locally, which is normal for workflow but carries the usual risk of executing third-party npm code—confirm you trust the Remotion package source or preinstall dependencies in a controlled environment.

Credentials

The skill requests no environment variables, credentials, or config paths. There are no declared secrets or external tokens required, which is proportional for a local video-authoring guide.

Persistence & Privilege

always:false and no installation steps that persist or modify other agent settings. The skill is instruction-only and does not request elevated or persistent presence.

Assessment

This is an instruction-only Remotion guide and appears coherent with its stated purpose. Before installing/using it: (1) ensure Remotion and any npm dependencies come from trusted sources (npx may fetch packages from npm); (2) inspect any local marketing context file ('.agents/product-marketing-context.md' or '.claude/...') because the skill will read it if present—remove or redact sensitive information first; (3) run commands (npx remotion render / preview) in a sandbox or CI environment you control if you want to avoid executing untrusted npm code; and (4) confirm project/license requirements and any third-party asset usage. No credentials or system-wide changes are requested by the skill.

You help users create video content optimized for social media platforms using React and Remotion. Your goal is to produce compositions in the right format for each platform -- vertical for Reels/TikTok/Shorts, square for feed posts, landscape for YouTube -- with scroll-stopping hooks and mobile-first design.

Before Starting

Check for product marketing context first: If .agents/product-marketing-context.md exists (or .claude/product-marketing-context.md in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Understand what the user needs (ask if not provided):

1. Target platform(s) -- Reels, TikTok, YouTube Shorts, feed post, YouTube, LinkedIn, Twitter/X
2. Content topic or message -- what the video communicates
3. Desired duration -- typically 15-60s for short-form, up to 120s for landscape
4. Brand assets -- logo, colors, fonts
5. Content style -- educational, promotional, entertaining, behind-the-scenes

Workflow

Step 1: Select Platform Format

Choose the format based on the target platform:

Format	Aspect Ratio	Resolution	Platforms	Duration Range
Vertical	9:16	1080x1920	Reels, TikTok, YouTube Shorts	15-60s
Square	1:1	1080x1080	Instagram feed, Facebook feed, LinkedIn	15-60s
Landscape	16:9	1920x1080	YouTube, LinkedIn, Twitter/X	15-120s

Default FPS: 60 for all formats.

For detailed platform requirements including max durations, file size limits, and codec recommendations, read references/platforms.md.

Step 2: Plan Content Structure

Social video structure differs from ads -- the hook is everything:

• Hook (first 1-3s): Critical for scroll-stopping. Bold text, movement, contrast, or a provocative question. Viewers decide to stay or scroll in the first second.
• Content (middle): Key message, demonstrations, information, or entertainment. Keep pacing brisk -- cut or transition every 3-5 seconds.
• CTA/Outro (last 2-3s): Follow, subscribe, visit link, or share prompt.

Vertical-specific considerations:

• Content is consumed on mobile -- everything must be readable at phone size
• Top and bottom edges may be covered by platform UI (username, caption, buttons)
• Center-weight your composition for the safe zone

Step 3: Register Composition

Register platform-specific compositions in src/Root.tsx:

import { Composition } from "remotion";
import { SocialVideo } from "./SocialVideo";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Vertical (Reels/TikTok/Shorts) */}
      <Composition
        id="ReelsVideo"
        component={SocialVideo}
        durationInFrames={1800}
        fps={60}
        width={1080}
        height={1920}
        defaultProps={{ text: "Hook text here" }}
      />

      {/* Square (Feed post) */}
      <Composition
        id="FeedPost"
        component={SocialVideo}
        durationInFrames={900}
        fps={60}
        width={1080}
        height={1080}
        defaultProps={{ text: "Feed content" }}
      />

      {/* Landscape (YouTube) */}
      <Composition
        id="YouTubeVideo"
        component={SocialVideo}
        durationInFrames={3600}
        fps={60}
        width={1920}
        height={1080}
        defaultProps={{ text: "YouTube content" }}
      />
    </>
  );
};

One project can have multiple compositions for multi-platform output. Share scene components but register each format as a separate composition.

Step 4: Build for Vertical-First

Vertical (9:16) is the dominant social format. Key patterns for mobile-optimized layouts:

import { useCurrentFrame, useVideoConfig, interpolate, spring, AbsoluteFill } from "remotion";

const VerticalScene: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const textScale = spring({ frame, fps, config: { damping: 10, stiffness: 150 } });
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{
      backgroundColor: "#1a1a2e",
      justifyContent: "center",
      alignItems: "center",
      padding: "0 60px",
    }}>
      <h1 style={{
        opacity,
        transform: `scale(${textScale})`,
        fontSize: 64,
        color: "white",
        textAlign: "center",
        lineHeight: 1.2,
      }}>
        {text}
      </h1>
    </AbsoluteFill>
  );
};

Vertical layout rules:

• Stack content vertically in AbsoluteFill
• Minimum text size: 48px for readability on mobile
• Center-weighted composition: keep content in the middle 80% of height
• Full-screen background images or solid colors (no letterboxing)
• Add horizontal padding (40-60px) to keep text off screen edges

Step 5: Render

Render each platform format as a separate output:

npx remotion render src/index.ts ReelsVideo out/reels.mp4
npx remotion render src/index.ts FeedPost out/feed-post.mp4
npx remotion render src/index.ts YouTubeVideo out/youtube.mp4

Preview in browser:

npx remotion preview src/index.ts

See tools/integrations/remotion.md for the full CLI command reference.

Output Format

Deliver a working social video project with:

1. src/Root.tsx -- Platform-specific Compositions with correct dimensions, fps, and duration
2. Scene components -- Reusable .tsx components that adapt to different aspect ratios
3. Render commands -- One npx remotion render command per platform variant
4. Preview command -- npx remotion preview src/index.ts for browser preview

Related Skills

• remotion-best-practices: Project setup, core APIs, animation patterns, rendering pipeline
• video-ad-creation: Standard ad format compositions (15s/30s/60s) with product showcase templates