StealIt

39 skills · 13 publishers

Claude skills for animation

Motion design, animated components and programmatic video. Skills for making interfaces and videos move with intent.

The best Claude skills for animation

  1. 1

    Animate

    Emil Kowalski 54k

    Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and…

    npx skills add emilkowalski/skills --skill animate
  2. 2

    Animate Expo

    Emil Kowalski 54k

    Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing…

    npx skills add emilkowalski/skills --skill animate-expo
  3. 3

    Animation Performance

    Emil Kowalski 54k

    Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the…

    npx skills add emilkowalski/skills --skill animation-performance

All 39 animation skills

39 skills

Animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties…

Design & UIEmil Kowalski54k

Animate Expo

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which…

MobileEmil Kowalski54k

Animation Performance

Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops…

Design & UIEmil Kowalski54k

Animation Vocabulary

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS…

Design & UIEmil Kowalski54k

Find Animation Opportunities

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it…

Design & UIEmil Kowalski54k

Improve Animations

Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper…

Design & UIEmil Kowalski54k

Remove Animations

Find the animations an interface doesn't need and remove them — motion on keyboard actions, high-frequency surfaces, functional data, and decoration with no purpose — then clean…

Design & UIEmil Kowalski54k

Review Animations

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

Design & UIEmil Kowalski54k

Expo Animation

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which…

MobileExpo4k

HyperframesTop pick

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips…

Video & MotionHeyGen79k

Impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…

Design & UIPaul Bakaus103k

Slack GIF Creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for…

Video & MotionAnthropic187k

Remotion To Hyperframes

Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or…

Video & MotionHeyGen79k

Reverse Any Video

Rebuild any video file as an editable HyperFrames project - motion graphics, talking heads, live action or AI-generated footage. Measure and watch it, rebuild every layer, then…

Video & MotionHeyGen79k

Style Sampling

Make a new episode in a proven video style - Collage Explainer, Finance Explainer, Animated Science Explainer, 3D Brand Explainer, 3D True Crime - on the person's topic. Use for…

Video & MotionHeyGen79k

Apple Design

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet…

Design & UIEmil Kowalski54k

Break UI

Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text…

Design & UIEmil Kowalski54k

Choreograph

Coordinate several elements that animate together — decide what moves, in what order, how much they overlap, and what stays still — so a group reads as one intentional motion…

Design & UIEmil Kowalski54k

Emil Design Eng

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Design & UIEmil Kowalski54k

Mobile Native

Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states…

MobileEmil Kowalski54k

Vercel React Native Skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or…

MobileVercel34k

Vercel React View Transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…

FrontendVercel34k

React Native Design

Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or…

MobileSeth Hobson42k

Remotion Captions

Transcribing, displaying and animating captions

Video & MotionRemotion6.3k

Remotion Maps

Remotion Map animation knowledge

Video & MotionRemotion6.3k

Remotion Markup

Content, animation and effects best practices

Video & MotionRemotion6.3k

EAS Observe

Use for anything related to EAS Observe - adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive and ObserveInteractiveMarker, the useObserve…

MobileExpo4k

Expo Examples

Expo's official example projects - the expo/examples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use…

MobileExpo4k

Expo Native UI

Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive…

MobileExpo4k

Expo UI

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and…

MobileExpo4k

Edit Video

Edit a raw talking-head video through transcription, silence trimming, mistake review, visual storytelling, motion graphics, and verified HyperFrames rendering. Use for a complete…

Video & MotionNate Herk2.6k

Short Form Edit

Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion…

Video & MotionNate Herk2.6k

Video Storytelling

Design and build the visual layer of a long-form talking-head video as one persistent world the camera moves through, instead of a sequence of separate graphics. Use when asked to…

Video & MotionNate Herk2.6k

Claude Motion Design

Code-only motion design pipeline (no After Effects) for Raphaël / Howseen: launch films, showreels, product promos, LinkedIn/X videos, meme clips. Use when asked to make a motion…

Video & MotionHowseen AI766

Manim Skill

Create mathematical animations with Manim Community Edition(manimce), with optional TTS voiceover and synced subtitles. Generates distinctive, production-grade animations that…

Video & MotionYusuke710193

Fake Screencast

Turn static SCREENSHOTS into a simulated screen recording (TSX) — a fake screencast with an animated cursor that eases to targets and clicks, a browser URL bar that updates per…

Video & MotionLearnWithHasan364

Make Tsx

Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview. Use when the user wants to add/edit…

Video & MotionLearnWithHasan364

Vidtsx 2d Generator

Generate production-ready 2D TSX video files for VidTSX (Remotion-based) from a shot, scene, or video description. Use whenever the user wants to create or generate a VidTSX…

Video & MotionLearnWithHasan364

Motion Overlays

Brand motion graphics for creator videos - a Remotion component kit (key phrases, lists, lower thirds, journeys, big words…) timed to the creator's words from a beats sheet…

Video & Motionappariciojunior408

About these animation skills

This page collects every skill in the directory that covers animation: 39 from 13 publishers, including official skills from Expo, HeyGen, Remotion and Vercel. Each one links back to its original GitHub repository, so you always get the author's latest version. They span Design & UI, Frontend, Mobile and Video & Motion.

Publishers on this page

Questions about Claude skills for animation

What is the best Claude skill for animation?

Our top pick is Animate by Emil Kowalski, from a repository with 54k GitHub stars. Animate Expo and Animation Performance round out the top three. Skills are ranked by the popularity of their source repository, with hand-picked favorites first, and official skills from Expo, HeyGen, Remotion and Vercel carry a badge.

How do I install a Claude skill for animation?

Open a skill's page and run its install command in your project folder, for example npx skills add emilkowalski/skills --skill animate. You can also download any skill as a ZIP and add it to Claude Code or upload it to the Claude app.

The install guide walks through every method.

Are Claude skills for animation free?

Yes. All 39 skills on this page are open source and free to use, and most are MIT licensed. You need a Claude plan that supports skills, or a coding agent that reads SKILL.md files.

Do these skills work in Claude Code and the Claude app?

Yes. A skill is a folder with a SKILL.md file, and the same folder works in Claude Code, the Claude desktop and web apps (on paid plans with code execution turned on) and the Claude API. Many also work in other agents that support the Agent Skills format, such as Cursor and OpenAI Codex. Skills that ship scripts need somewhere Claude can run code.

How many Claude skills for animation are there?

We list 39 from 13 publishers, last updated November 4, 2026. The list refreshes from GitHub as publishers release new skills.

Related use cases

All use cases →