2.2K skills · sorted by relevance
Launch the Remotion documentation site locally and open it in the Codex in-app browser. The workflow installs dependencies, builds the project, starts Docusaurus, and reports the actual preview URL and server status.
Create video scenes in Remotion using React, with guidance on frame-based animation, media placement, and timing. It also points to references for effects, transitions, fonts, and other features, plus ways to preview the results in Studio.
Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.
Build Remotion videos using the toolkit’s shared backgrounds, comparison layouts, presenter overlays, and custom scene transitions. Apply its 30fps timing conventions and rendering practices to assemble scenes and coordinate them with voiceover.
Prepare Remotion Studio and Canvas Capture for a product demo recorded by the user. Import the original capture into packages/brand as an editable composition, preserve cursor metadata, and upload the verified recording to remotion.media.
Update the published Remotion plugin for Codex and ChatGPT to a released version. Prepare and validate an upload ZIP, preserve existing listing details, and follow the dashboard workflow through review and publication verification.
Update Remotion’s FFmpeg dependency to a published rust-ffmpeg commit, refresh the dependency lockfile, and rebuild compositor binaries for all supported platforms. Validate the changes and open a draft pull request with source revisions and build results.
Upload preview images and videos for a Remotion Element to remotion.media, then update the corresponding URLs. The skill also handles local asset cleanup according to whether previews come from fresh renders or committed submissions.
Review a Remotion pull request’s title against its code changes and suggest clearer wording for developers. The skill selects the appropriate package or category prefix and highlights the main observable change or public API.
Structure Remotion code so elements remain editable in Studio. Follow markup patterns that support selection, dragging, resizing, rotation, style changes, and animation keyframes, including editable SVG shapes and their transitions.
Build an app that generates or edits videos with Remotion. The guidance covers choosing a template or framework, embedding a video preview in React, and selecting where video rendering—the process of producing the output—takes place.
Launch the @remotion/player example app locally and open it in the Codex in-app browser. The workflow prepares dependencies, builds the project, starts the development server, and reports its URL and whether it was newly started or already running.
Build videos in React with Remotion using task-specific rules and code examples. The skill covers animation timing, captions, audio, scene transitions, and media assets, helping guide implementation across common video creation tasks.
Motion (旧 Framer Motion) アニメーションライブラリ リファレンス。motion/react, vanilla JS, Vue 版 motion-v (v-motion ディレクティブ)。 AnimatePresence, AnimateView, LayoutGroup, LazyMotion, MotionConfig, Reorder, useAnimate, useScroll, useSpring, useTransform, useMotionValue, useInView, motionValue。 animate, animateView, scroll, inView, hover, press, stagger, spring, timeline, transitions, styleEffect, threeEffect。Motion+ Carousel, Cursor, Ticker, Typewriter, AnimateNumber。 layout, drag, gestures, SVG, Tailwind, Lenis 連携。accessibility, performance, bundle 最適化, troubleshooting。
The English summary is being prepared. Showing the original description.
Animate characters built from SVG parts using GSAP and CSS transforms. Coordinate gestures and facial expressions, keep joints connected, and control playback by frame in Remotion or validate browser previews with HyperFrames.
Plan HyperFrames videos so motion flows continuously between scenes. Match movement direction and speed across cuts, connect actions through visible causes, and verify scene boundaries while keeping each scene active through meaningful reveals or interactions.
Add a person to the Remotion experts page by placing their portrait, entering their profile and contact links, and generating an expert card image. The instructions specify file locations, profile fields, and how to verify card generation.
Add interactive animation demos to Remotion documentation pages. This skill covers creating React components, registering playback settings, embedding demos in MDX, and adding controls such as sliders, checkboxes, dropdowns, and text inputs.
Create and edit Remotion GitHub issues, add comments, and attach images or videos. It keeps titles aligned with the user’s intent and checks saved issue text to ensure Markdown formatting and line breaks are preserved.
Add a reported Remotion bug to the bugs API with its affected versions, a short title, and upgrade guidance. Follow the existing entry format and place the new record first so recent bugs appear at the top.
Build videos in React with Remotion using topic-specific guidance and code examples. Covers animation, captions, audio, scene transitions, asset handling, timing, and text layout, with additional references for charts, maps, and 3D content.
Turn JSON timelines into Remotion video compositions with titles, images, text overlays, and animated statistics. The skill covers playback setup, reusable video components, transitions, effects, and adding custom clips to a video catalog.
Create walkthrough videos from Stitch app screens using Remotion. Arrange screenshots in sequence, add fades, slides, zoom effects, and explanatory text, then preview the timing and render a video such as an MP4.
Use when the user asks about Vibe Motion, motion graphics, kinetic typography, animated text, brand animations, logo animations, infographic animation, presentation animation, data-driven video, or prompt-to-motion-graphic workflows. Vibe Motion is fundamentally different from video generation — it creates deterministic code-based motion graphics, not AI-predicted pixel sequences. Use this when the text/logo must stay perfectly crisp and editable (code). For a cinematic/kinetic AI-generated video ad built from a storyboard (pixel render, native audio), use higgsfield-motion-design instead.
The English summary is being prepared. Showing the original description.