Vertical video design
Official skills repository for Portel Photon
npx -y skills add portel-dev/skills --skill vertical-video-designAssembled 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:
- Safe zone respected - no critical content in top 12% or bottom 20% of the frame
- Captions burn-in - text is large enough to read at phone size, placed in the safe middle
- Opens with motion - first frame is not a static title card (muted autoplay will skip it)
- Subject centered or 2/3 rule - not cropped off by a different-aspect platform resize
- Aspect locked - exporting 9:16 (1080x1920) for TikTok/Reels/Shorts, or 4:5 (1080x1350) for LinkedIn feed video
- Audio normalized - watching muted is default, but audio matters when it plays; use
dynaudnormto even out levels - Thumbnail-safe first frame - many platforms use frame 0 as the thumbnail; make it compelling
Common mistakes
| Mistake | Why it's bad | Fix |
|---|---|---|
| Captions at very bottom | Platform progress bar covers them | Move captions to bottom third, not last 10% |
| Logo/branding at top-left | Platform handle + description overlays this area | Use top 0-5% only for subtle branding, or center-top |
| Small 24px text | Unreadable on phone screens | Minimum 36px for captions, 48+ preferred |
| Static opening | Muted autoplay doesn't catch attention | Start with motion: cursor, zoom, object moving |
| Single wide text line | Overflows safe zone horizontally | Max 30-35 chars per line, wrap to 2-3 lines |
| Exporting at 720p | Platforms re-encode; start sharp | Export 1080p+ always; platforms downscale better than upscale |