Awesome-omni-skill Fixed Video Format (9:16)

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.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/fixed-video-format-9-16" ~/.claude/skills/diegosouzapw-awesome-omni-skill-fixed-video-format-9-16 && rm -rf "$T"

manifest: skills/development/fixed-video-format-9-16/SKILL.md

source content

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,
  }}
/>