alexwelcing/skills/remotion-layout
skills/remotion-layout/SKILL.md
# Skill: Remotion Layout Design # Category: Video # Version: 1.0.0 Design visual layouts and component structures for Remotion videos. ## Overview Focus on "Video as Code." Layouts must be responsive to different aspect ratios (9:16, 16:9, 1:1) and dynamic content lengths. ## Frameworks ### 1. Atomic Video Components - **The Wrapper**: Global sequence and transition logic. - **The Core**: The main visual element (chart, text, image). - **The Overlay**: Dynamic badges, progress bars, and wate
development
Updated Apr 3, 2026
$ install --global
skillsauthnpx skillsauth add alexwelcing/copy skills/remotion-layoutInstall 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 3, 2026, 3:56 PM13.8s1 file scanned
SKILL.md
Skill: Remotion Layout Design
Category: Video
Version: 1.0.0
Design visual layouts and component structures for Remotion videos.
Overview
Focus on "Video as Code." Layouts must be responsive to different aspect ratios (9:16, 16:9, 1:1) and dynamic content lengths.
Frameworks
1. Atomic Video Components
- The Wrapper: Global sequence and transition logic.
- The Core: The main visual element (chart, text, image).
- The Overlay: Dynamic badges, progress bars, and watermarks.
2. The Visual Hierarchy of Motion
- Primary: The moving dynamic variable (the hook).
- Secondary: Supporting background animations.
- Tertiary: Subtle ambient motion (noise, glow).
3. Responsive Framing
- Use
useVideoConfig()for dynamic spacing. - Implement flexbox/grid systems within the
<AbsoluteFill>. - account for "Safe Zones" on social platforms (TikTok/Reels UI).
Checklist
- [ ] Are all fonts specified with fallback weights?
- [ ] Is the color palette dynamic (primary/secondary/accent props)?
- [ ] Are easing functions specified (e.g.,
bezier(0.33, 1, 0.68, 1))? - [ ] Is there a clear entrance and exit animation for every component?
Output Structure
- Component Architecture: Description of the component tree.
- Animation Specs: Timings, easings, and spring configurations.
- React/Remotion Code Snippets: Essential code for implementation.
Related Skills
alexwelcing/social-content
testing
VerifiedTrustedCommunity
Create engaging social media content strategies and posts
SKILL.mdUpdated Apr 3, 2026
alexwelcing/signup-flow-cro
tools
VerifiedTrustedCommunity
Optimize signup and registration flows for higher conversion
SKILL.mdUpdated Apr 3, 2026
alexwelcing/seo-audit
testing
VerifiedTrustedCommunity
Conduct comprehensive SEO audits and provide actionable recommendations
SKILL.mdUpdated Apr 3, 2026
alexwelcing/schema-markup
data-ai
VerifiedTrustedCommunity
Implement structured data for enhanced search visibility
SKILL.mdUpdated Apr 3, 2026