portel-dev/vertical-video-design
skills/vertical-video-design/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add portel-dev/skills vertical-video-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 7:51 AM7.3s7 files scanned
SKILL.md
- name:
- vertical-video-design
- description:
- 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.
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 |
Related Skills
portel-dev/visual-qa
development
VerifiedTrustedCommunity
Automated visual UI issue detection from screenshots. Use EVERY TIME you take a screenshot with agent-browser during UI development. Runs local Qwen3-VL model on Apple Silicon — zero API cost. Catches layout bugs, contrast issues, missing content, alignment problems, and accessibility violations that you'd otherwise miss while focused on one specific fix.
1SKILL.mdUpdated Apr 17, 2026
portel-dev/photon
tools
VerifiedTrustedCommunity
Build, test, validate, and improve Photon MCPs — single-file TypeScript MCP servers. Use for creating photons with @format annotations (table, chart:bar, slides), stateful photons using this.memory for persistent storage, photons with @readOnly/@destructive annotations, custom UI using @ui tags/HTML templates, photons wrapping APIs (Stripe, payments), task scheduler photons with cron, user-configurable settings (protected settings), this.render() for live output, photon build for standalone binaries, mermaid diagrams for photon architecture, editing .photon.ts files, @auth for MCP OAuth identity (this.caller), identity-aware locks for multiplayer/turn-based photons, @format slides for Marp-style presentations. Also use for validating photon UIs (promise checking, visual QA, functional testing), improving photon quality via autoloop, and auditing whether a UI consumes all backend methods. DO NOT trigger for general TypeScript or non-photon MCP.
1SKILL.mdUpdated Apr 17, 2026
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026