Skills Guide

Fixed Video Format (9:16)

VerifiedSafe

Provides a fixed 1080x1920 pixel video format (9:16) with percentage-based positioning. Use this when laying out vertical video compositions for TikTok/Instagram Reels, leveraging VIDEO_CONFIG constants and safe zones for UI overlays.

Download and use
Sby Skills Guide Bot
ContentBeginner
3/1/2026
Claude Code
#video#layout#remotion#vertical-video#aspect-ratio

Recommended for

Claude CodeUI/UX designerSEO & contentProduct managerWriter / marketerSolo / indie hacker

Automated summary

This skill enforces a fixed 1080x1920 vertical video format and percentage-based positioning rules for Remotion compositions targeting TikTok and Instagram Reels.

Strengths

  • Pins explicit dimensions (1080x1920) and mandates VIDEO_CONFIG as the single source of truth
  • Recommends positioning elements as percentages of the canvas, making layouts easier to maintain
  • Defines a central 90% safe zone so important content is not hidden by platform UI overlays
  • Ships a side-by-side code example contrasting the correct pattern with hardcoded pixels

Limitations

  • Assumes the project uses Remotion and already exports VIDEO_CONFIG from src/lib/theme.ts
  • Does not address other aspect ratios or adaptation beyond TikTok/Reels
  • Covers only layout, not animation, timing, or rendering constraints
When to use it

Use it whenever you position elements or compute dimensions inside a vertical video composition.

When not to use it

Avoid it for horizontal or square videos, or for projects that do not rely on Remotion and VIDEO_CONFIG.

Security analysis

Safe
Quality score88/100

This skill only provides layout guidance for fixed 9:16 video compositions and contains no executable commands, network access, secret handling, or destructive operations. It merely references local constants and positioning best practices, so listing it presents no meaningful execution risk.

No concerns found

How this analysis is made

Examples

Position a book cover
Lay out the book cover image in our Remotion composition using VIDEO_CONFIG: place it 15% from the top, 10% from the left, and size it to 80% of the video width while keeping the book's aspect ratio.
Add safe-zone-aware captions
Add a subtitle block to the 9:16 video composition and keep it inside the central 90% safe zone so TikTok UI overlays don't cover it.
Replace hardcoded pixels
Refactor this component's hardcoded top/left/width pixel values into percentage-based positions that reference VIDEO_CONFIG from src/lib/theme.ts.

name: Fixed Video Format (9:16) description: Fixed 1080x1920 pixel video format with percentage-based positioning. Use this when laying out video compositions, positioning elements on the canvas, or calculating dimensions. All videos render at exactly 9:16 aspect ratio for TikTok/Instagram Reels.

Fixed Video Format (9:16)

This Skill provides Claude Code with specific guidance on how it should handle the fixed 9:16 video format.

When to use this skill:

  • Positioning elements in any video composition
  • Calculating element dimensions and coordinates
  • Using VIDEO_CONFIG.width and VIDEO_CONFIG.height
  • Defining safe zones for platform UI overlays
  • Creating layouts optimized for vertical viewing
  • Testing compositions in Remotion Studio preview

Instructions

  • Fixed Dimensions: All videos render at exactly 1080x1920 pixels (9:16 portrait); no responsive design needed
  • VIDEO_CONFIG Constants: Use VIDEO_CONFIG from src/lib/theme.ts for width/height values
  • Percentage-Based Layout: Position elements using percentages of VIDEO_CONFIG dimensions for maintainability
  • TikTok Optimization: Format optimized for TikTok/Instagram Reels vertical viewing
  • Safe Zones: Keep important content within central 90% to account for platform UI overlays
  • Consistent Aspect Ratio: All compositions must maintain 9:16 aspect ratio; test in Remotion Studio preview

Examples:

// Good: Use VIDEO_CONFIG, percentage-based positioning
import { VIDEO_CONFIG } from '@/lib/theme';

export const BookCover: React.FC = () => (
  <img
    src={coverUrl}
    style={{
      position: 'absolute',
      top: VIDEO_CONFIG.height * 0.15, // 15% from top
      left: VIDEO_CONFIG.width * 0.1,  // 10% from left
      width: VIDEO_CONFIG.width * 0.8,  // 80% width
      height: VIDEO_CONFIG.width * 0.8 * 1.5, // Maintain book aspect ratio
    }}
  />
);

// Bad: Hardcoded pixels, no VIDEO_CONFIG reference
<img
  style={{
    position: 'absolute',
    top: 300,
    left: 100,
    width: 800,
  }}
/>

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/fixed-video-format-9-16-mm78no5o' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/fixed-video-format-9-16-mm78no5o/download' --output '.skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md.part' && mv '.skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md.part' '.skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

This file does not provide a usable name/description header for this native procedure. It remains available to download and inspect; use the manual method below.

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

Writing Fragments

Content

Mine raw writing fragments through a relentless interview, without imposing structure. Capture ideas, quotes, and leading words for later use.

Claude CodebeginnerSafe 240,316
Skills Guide Bot

UI Copywriting & Auditing

Content

Write or audit user-facing UI copy including buttons, errors, empty states, and tooltips across the monorepo, following the design system source of truth.

Claude CodeCursorbeginnerSafe 108,623
Skills Guide Bot

Music MIDI Extraction

Content

Extracts the MIDI or score from an existing music production via the CogMusic MCP tool and confirms availability.

Claude CodebeginnerSafe 69,866
Skills Guide Bot