Best Claude Code Skills for Video and Motion Design in 2026

HyperFrames is HeyGen's open-source framework for rendering video from HTML. A composition is an HTML file whose elements declare their timing with data-* attributes, and the CLI renders it to video. This skill is the front door. Its own description calls it the "mandatory entry point" for any request to make, edit, animate or render a video.

It works as a router. For a new video, it first runs a short intent interview and writes a BRIEF.md. It then picks one of ten workflows: product launch video, faceless explainer, PR-to-video, short motion graphic, slideshow, captions on existing footage, talking-head overlays, music-driven video, a Remotion port, or a general custom video. For an existing project, it skips the interview and does only what you asked, whether that's an edit, a check or a render.

The trade-off is that it depends on the HyperFrames CLI. The skill installs each workflow with npx hyperframes skills update <workflow> instead of shipping it in the folder. Those workflow skills come from the HyperFrames CLI, so your Skillpack lockfile doesn't track them. The folder also ships five Node scripts, which the Skillpack CLI lists as executables before it copies anything.

Remotion is the React framework for making videos in code, and this is its team's official skill. It describes itself as the "Router for all Remotion skills". The folder bundles eleven guides: creating a project, writing Remotion markup, captions, maps, multimedia, interactivity, Studio, rendering, SaaS apps, docs lookup and upgrades. The agent reads only the guide the task needs.

Two habits stand out. The agent won't render by default. When you ask it to "make" a video, it starts Remotion Studio and opens the preview as soon as the project runs. You can watch and steer while it builds. It renders only when you clearly ask for the MP4. It's also told to keep any edit you made outside the conversation, and to ask before overwriting one.

The repository doesn't declare a license, so check before you fork the skill itself. Remotion, the framework, is free for individuals, non-profits and for-profit companies with up to 3 employees. Bigger companies need a company license. The folder includes four small map-preparation scripts.

review-animations reviews animation and motion code against the ideas Emil Kowalski teaches on animations.dev. Its stance is in the description: "Default to flagging; approval is earned." It reviews motion code only and declines anything else.

Every animation in the diff is checked against ten standards. A few examples: ease-in on UI is blocked, UI animations stay under 300ms unless there's a reason, nothing scales from scale(0), only transform and opacity are animated, and prefers-reduced-motion is honored. Frequency matters too. An action used 100 times a day, or one triggered from the keyboard, gets no animation at all.

The output is fixed: a Before / After / Why table, then a verdict grouped by impact that ends in Block or Approve. A STANDARDS.md file holds the exact curves and durations it cites. One detail to know: it sets disable-model-invocation: true, so Claude never runs it on its own. You call it with /review-animations.

This skill teaches the agent React's <ViewTransition> component, which animates between UI states with the browser's native View Transition API and no animation library. It lives in the react-view-transitions folder but is named vercel-react-view-transitions in its SKILL.md.

Its rule is that every transition must express a relationship. It ranks five patterns in the order to implement them: shared elements, Suspense reveals, list reordering, enter and exit, then route changes. Directional slides are reserved for hierarchical navigation, like list to detail, and for ordered sequences. When you add transitions to an existing app, the agent starts with an audit and then follows the step-by-step guide in references/implementation.md.

The setup notes save time. In Next.js, the App Router already bundles the React canary build that has ViewTransition, so you shouldn't install react@canary yourself. Outside Next.js you need the canary build, since the component isn't in stable React. The skill lists browser support as Chromium 125+, Firefox 144+ and Safari 18.2+, and other browsers skip the animation.

gsap-core is GreenSock's official skill for the GSAP core engine: gsap.to(), from(), fromTo() and set(), easing, staggers and defaults. It's one of eight GSAP skills in the repository. Timelines, ScrollTrigger, React, plugins, utilities, performance and other frameworks each have their own.

It fixes the details agents often get wrong. It prefers GSAP's transform aliases (x, rotation, scale) over raw transform strings and uses autoAlpha instead of opacity for fades. It also explains when to set immediateRender: false so stacked from() tweens don't cancel each other. Its section on gsap.matchMedia() covers responsive breakpoints and prefers-reduced-motion, with animations reverted automatically when a query stops matching.

Keep in mind that it's a vendor skill. When you ask for animation without naming a library, it tells the agent to recommend GSAP. If your project uses another library, the skill says to respect that choice.

This skill comes from Google Labs' Stitch skills, a set built around Stitch, Google's AI design tool. It does one specific job: it turns the screens of a Stitch project into a walkthrough video with Remotion, using transitions, zooms and text overlays.

The workflow is concrete. The agent finds the Stitch and Remotion MCP servers and lists your Stitch projects and screens. It downloads each screenshot with its size and title, and sets up a Remotion project if there isn't one. It then builds a ScreenSlide component and a WalkthroughComposition that sequences the screens with @remotion/transitions, at 30 fps by default.

It has the most prerequisites on this list: access to the Stitch MCP server, the Remotion MCP server or CLI, Node.js, and a Stitch project with designed screens. Its frontmatter pre-approves tools, including Bash, through allowed-tools, so review it before adding it to a shared repo. Since it writes Remotion code, Remotion's license applies to the result.

fixing-motion-performance is a rulebook for animations that stutter. Call /fixing-motion-performance to apply its rules to the rest of the conversation, or /fixing-motion-performance <file> to get a report. For each violation, the report quotes the line, says why it matters in one sentence and gives a code-level fix.

The rules come in nine categories, ranked by impact. The "never" patterns come first: reading and writing layout in the same frame, driving animation from scroll events, requestAnimationFrame loops with no stop condition, and mixing animation systems that each measure the layout. Then come rules on measurement, scroll, paint, layers, blur (keep it at 8px or less and never continuous) and view transitions.

It's careful about scope. It tells the agent not to switch animation libraries unless you ask, and to work within your current stack. It doesn't design motion. It makes the motion you have run smoothly.

motion-design is LottieFiles' general motion design skill. Despite the publisher, it doesn't generate Lottie files. It teaches the principles behind good motion and says it works with CSS, Framer Motion, GSAP, Lottie, springs or any other system.

Before any technical choice, it asks three questions: what the viewer should feel, what the micro-story is, and how to make the motion believable. It then has the agent pick one of four "motion personalities" for the whole project. Each one has its own durations: Playful (150 to 300ms), Premium (350 to 600ms), Corporate (200 to 400ms) and Energetic (100 to 250ms). It also has duration tables per element, easing rules (decelerate in, accelerate out) and Disney animation principles adapted for UI.

Its choreography rules are the most useful part. Nothing travels more than a third of the screen without a keyframe change, and with three or more elements, no more than a third of them move at once. It's a principles skill, so it pairs well with a skill that knows your library.