agentsclimarketplace

Vertical video design

Skill portel-dev/skills/skills/vertical-video-design

Official skills repository for Portel Photon

Install
npx -y skills add portel-dev/skills --skill vertical-video-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Platform-aware design rules for vertical video (Reels, Shorts, TikTok, LinkedIn mobile). Covers safe zones, caption sizing/placement, aspect ratios, thumb-stopper hooks, effects that survive mobile compression, and per-platform cheatsheets. Use when building 9:16 / 4:5 / 1:1 video for social media - any time you need to decide where to place text, how big captions should be, what aspect ratio to export, or which effects survive mobile playback.

SKILL.md

3.7 KB, 821 tokens by cl100k_base, as published. Nobody here has run it

Vertical Video Design

Rules for designing vertical video that survives mobile platform chrome, auto-play muted, and small-screen compression.

Core principle

The middle 70% is yours. The outer 30% belongs to the platform. Every vertical platform overlays its own UI on your video - captions, like/share buttons, handle + description, progress bar. If your content lives in that zone, it gets covered.

When to use

Invoke this skill when:

  • Designing any 9:16, 4:5, or 1:1 video for TikTok, Instagram Reels, YouTube Shorts, LinkedIn, Facebook Reels
  • Deciding where to place captions, headers, CTAs, or branding
  • Building Remotion compositions for vertical output
  • Choosing aspect ratio for a new video project
  • Reviewing why a video "looks cut off on mobile" or "the caption covers my face"

Quick reference

For the actual rules, load the relevant file:

  • rules/safe-zones.md - Per-platform exclusion zones. What pixels get covered by the platform's own UI. Start here for every layout.
  • rules/captions.md - Caption sizing, font, placement, timing, max chars per line. How to make burned-in subtitles readable on small screens.
  • rules/hooks.md - First-second rules for muted autoplay. Why text hooks fail and what works instead.
  • rules/effects.md - What survives mobile H.264 compression and what falls apart. Fine details, gradients, motion blur, etc.
  • rules/aspect-ratios.md - When to pick 9:16 vs 4:5 vs 1:1. Cross-posting strategies.
  • rules/platform-cheatsheet.md - One-page table: dimensions, max duration, safe zone px, file size limits per platform.

The 60-second checklist

Before exporting any vertical video, verify:

  1. Safe zone respected - no critical content in top 12% or bottom 20% of the frame
  2. Captions burn-in - text is large enough to read at phone size, placed in the safe middle
  3. Opens with motion - first frame is not a static title card (muted autoplay will skip it)
  4. Subject centered or 2/3 rule - not cropped off by a different-aspect platform resize
  5. Aspect locked - exporting 9:16 (1080x1920) for TikTok/Reels/Shorts, or 4:5 (1080x1350) for LinkedIn feed video
  6. Audio normalized - watching muted is default, but audio matters when it plays; use dynaudnorm to even out levels
  7. Thumbnail-safe first frame - many platforms use frame 0 as the thumbnail; make it compelling

Common mistakes

MistakeWhy it's badFix
Captions at very bottomPlatform progress bar covers themMove captions to bottom third, not last 10%
Logo/branding at top-leftPlatform handle + description overlays this areaUse top 0-5% only for subtle branding, or center-top
Small 24px textUnreadable on phone screensMinimum 36px for captions, 48+ preferred
Static openingMuted autoplay doesn't catch attentionStart with motion: cursor, zoom, object moving
Single wide text lineOverflows safe zone horizontallyMax 30-35 chars per line, wrap to 2-3 lines
Exporting at 720pPlatforms re-encode; start sharpExport 1080p+ always; platforms downscale better than upscale

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.