メニュー
Automated video production using Remotion, combining Antigravity aesthetics with official Remotion best practices.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Orchestrates a professional reporting workflow by combining design system intelligence with high-fidelity PDF generation.
Use this skill when visual quality and design identity matter for a PDF. CREATE (generate from scratch): "make a PDF", "generate a report", "write a proposal", "create a resume", "beautiful PDF", "professional document", "cover page", "polished PDF", "client-ready document". FILL (complete form fields): "fill in the form", "fill out this PDF", "complete the form fields", "write values into PDF", "what fields does this PDF have". REFORMAT (apply design to an existing doc): "reformat this document", "apply our style", "convert this Markdown/text to PDF", "make this doc look good", "re-style this PDF". This skill uses a token-based design system: color, typography, and spacing are derived from the document type and flow through every page. The output is print-ready. Prefer this skill when appearance matters, not just when any PDF output is needed.
Specialized in creating high-converting instructional videos and software tutorials using structured scripts and automated production.
Design intelligence for marketing UI/UX with custom design system generation.
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Marketing analytics, attribution models, KPI tracking, dashboards, and data-driven decision making.
| name | video-automation |
| description | Automated video production using Remotion, combining Antigravity aesthetics with official Remotion best practices. |
| allowed-tools | Read, RunCommand, Write |
This skill combines the remotion-best-practices skill with the Antigravity design system, enabling production-grade video ads.
For detailed technical implementation, refer to the remotion-best-practices skill which contains 16 comprehensive rule files:
| Core Rules | Description |
|---|---|
animations.md | Frame-based animations with useCurrentFrame() |
timing.md | Springs, easing, interpolation curves |
sequencing.md | <Sequence> and <Series> patterns |
transitions.md | Scene transitions with @remotion/transitions |
audio.md | Audio import, trimming, volume control |
videos.md | Video embedding, looping, speed control |
display-captions.md | TikTok-style captions with word highlighting |
charts.md | Animated bar/pie charts |
3d.md | Three.js integration with @remotion/three |
fonts.md | Google Fonts & Vietnamese font support |
Apply these design tokens to all Remotion components:
const ANTIGRAVITY_TOKENS = {
background: '#0a0a0c',
primary: '#00f2ff', // Neon Cyan
secondary: '#ff00e5', // Neon Pink
glass: 'rgba(255, 255, 255, 0.05)',
fonts: ['Inter', 'Be Vietnam Pro'],
};
Key styling patterns:
backdropFilter: 'blur(20px)' with neon bordersi * 10)Math.sin(frame/10) for pulsing effectsbrowser_subagent to extract brand colors, images, headlinesinterpolate, spring, Sequence to animate sections// Refer to display-captions.md in remotion-best-practices
import { createTikTokStyleCaptions } from '@remotion/captions';
For non-tech users, just 3 commands:
| Command | Purpose |
|---|---|
npx remotion preview | Preview in browser |
npx remotion render <id> out.mp4 | Export final video |
--port=300x | Run multiple previews |
brew install ffmpeg
npx remotion render <id> --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"