Loading...
Loading...
Found 115 Skills
Best practices for Remotion - Video creation in React
Translate a Remotion (React-based) video composition into a HyperFrames HTML composition. Use when (1) the user provides Remotion source (`.tsx` files using `useCurrentFrame`, `Sequence`, `AbsoluteFill`, `interpolate`, `spring`, `staticFile`, etc.) and asks to port, convert, or migrate it to HyperFrames; (2) the user pastes a Remotion entry point (`Root.tsx`, `Composition`) and wants HTML; (3) the user links a Remotion repo and asks for the HyperFrames equivalent; (4) the user says "port my Remotion project", "translate this Remotion code", "rewrite as HTML", or "I have a Remotion comp, make it HyperFrames". Skill detects unsupported patterns (useState, useEffect with side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda` features) and recommends the runtime interop escape hatch instead of attempting a lossy translation.
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video
Produce programmable videos with Remotion using scene planning, asset orchestration, and validation gates for automated, brand-consistent video content.
Structured review process for Remotion video implementations. Analyzes spec compliance, detects common timing/easing issues, validates asset quality, and provides prioritized revision lists. Use when reviewing Remotion code against design specs or performing quality assurance on video compositions. Trigger phrases "review video code", "check spec compliance", "audit Remotion implementation".
Create professional AI-narrated videos with Remotion and Resemble.ai - from educational tutorials to product launches
Writes detailed video scripts for Remotion based on input requirements and codebase analysis
Animation components and utilities for Remotion video projects. Use when building Remotion compositions with text animations, gradient transitions, particle effects, 3D scenes, or staggered motion effects. Provides example bits (complete compositions) and reusable components that can be installed via jsrepo.
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
Create production-grade motion graphics and videos using Remotion (React). Use whenever the user wants branded video content, product demos, data-driven video generation, or motion graphics with audio sync, web fonts, TailwindCSS styling, or media embedding. Covers: marketing videos, product launches, data visualizations, social media content, personalized video at scale, explainer videos with voiceover, animated charts, 3D scenes via Three.js. Requires Node.js and Claude Code environment. Trigger on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "remotion", "video with audio", "TailwindCSS video", "data-driven video generation", "personalized video at scale", "video with voiceover". For mathematical animations, algorithm visualizations, or headless container rendering, use concept-to-video (Manim) instead.
Full video production workflow for Remotion projects. Teaches how to orchestrate MCP tools (TTS, music, SFX, stock footage, video analysis) into complete Remotion compositions. Use this skill whenever producing a video that needs audio, voiceovers, music, stock footage, or analyzing existing video files.