video-automation
starsforks
How to install video-automation?
nguyenphp/antigravity-marketing/video-automation
$npx -y skills add nguyenphp/antigravity-marketing --skill video-automationAutomated video production using Remotion, combining Antigravity aesthetics with official Remotion best practices.
SKILL.md
| 1 | # Video Automation - The Full Remotion Suite |
| 2 | |
| 3 | > This skill combines the **[remotion-best-practices](../remotion-best-practices/SKILL.md)** skill with the Antigravity design system, enabling production-grade video ads. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 📚 Required Reading |
| 8 | |
| 9 | For detailed technical implementation, refer to the **`remotion-best-practices`** skill which contains 16 comprehensive rule files: |
| 10 | |
| 11 | | Core Rules | Description | |
| 12 | |------------|-------------| |
| 13 | | `animations.md` | Frame-based animations with `useCurrentFrame()` | |
| 14 | | `timing.md` | Springs, easing, interpolation curves | |
| 15 | | `sequencing.md` | `<Sequence>` and `<Series>` patterns | |
| 16 | | `transitions.md` | Scene transitions with `@remotion/transitions` | |
| 17 | | `audio.md` | Audio import, trimming, volume control | |
| 18 | | `videos.md` | Video embedding, looping, speed control | |
| 19 | | `display-captions.md` | TikTok-style captions with word highlighting | |
| 20 | | `charts.md` | Animated bar/pie charts | |
| 21 | | `3d.md` | Three.js integration with `@remotion/three` | |
| 22 | | `fonts.md` | Google Fonts & Vietnamese font support | |
| 23 | |
| 24 | --- |
| 25 | |
| 26 | ## 1. Antigravity Core Aesthetics (The Look) |
| 27 | |
| 28 | Apply these design tokens to all Remotion components: |
| 29 | |
| 30 | ```tsx |
| 31 | const ANTIGRAVITY_TOKENS = { |
| 32 | background: '#0a0a0c', |
| 33 | primary: '#00f2ff', // Neon Cyan |
| 34 | secondary: '#ff00e5', // Neon Pink |
| 35 | glass: 'rgba(255, 255, 255, 0.05)', |
| 36 | fonts: ['Inter', 'Be Vietnam Pro'], |
| 37 | }; |
| 38 | ``` |
| 39 | |
| 40 | **Key styling patterns:** |
| 41 | - **Glassmorphism**: `backdropFilter: 'blur(20px)'` with neon borders |
| 42 | - **Staggered Motion**: Map array indices to delays (`i * 10`) |
| 43 | - **Micro-animations**: Use `Math.sin(frame/10)` for pulsing effects |
| 44 | |
| 45 | --- |
| 46 | |
| 47 | ## 2. Usage Patterns |
| 48 | |
| 49 | ### High-Fidelity Landing Page Cloning |
| 50 | 1. **Research**: Use `browser_subagent` to extract brand colors, images, headlines |
| 51 | 2. **Implementation**: Use `interpolate`, `spring`, `Sequence` to animate sections |
| 52 | 3. **Aspect Ratios**: Always offer 16:9 (YouTube) and 9:16 (TikTok/Reels) |
| 53 | |
| 54 | ### TikTok-Style Captions |
| 55 | ```tsx |
| 56 | // Refer to display-captions.md in remotion-best-practices |
| 57 | import { createTikTokStyleCaptions } from '@remotion/captions'; |
| 58 | ``` |
| 59 | |
| 60 | --- |
| 61 | |
| 62 | ## 3. Quick Commands |
| 63 | |
| 64 | For non-tech users, just 3 commands: |
| 65 | |
| 66 | | Command | Purpose | |
| 67 | |---------|---------| |
| 68 | | `npx remotion preview` | Preview in browser | |
| 69 | | `npx remotion render <id> out.mp4` | Export final video | |
| 70 | | `--port=300x` | Run multiple previews | |
| 71 | |
| 72 | --- |
| 73 | |
| 74 | ## 4. Troubleshooting |
| 75 | |
| 76 | ### FFmpeg Installation (macOS) |
| 77 | ```bash |
| 78 | brew install ffmpeg |
| 79 | ``` |
| 80 | |
| 81 | ### Headless Chrome Error |
| 82 | ```bash |
| 83 | npx remotion render <id> --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" |
| 84 | ``` |
| 85 | |
| 86 | --- |
| 87 | |
| 88 | ## Credits |
| 89 | |
| 90 | - **Technical Rules**: Based on [remotion-dev/skills](https://github.com/remotion-dev/skills) |
| 91 | - **Design System**: Antigravity Marketing Kit aesthetics |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
