Motion agent skills for Claude Code, Codex and other agents.

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.

microsoft/skills

A skill your agent uses whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion…

github/awesome-copilot

Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

ibelick/ui-skills

Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code.

chakra-ui/chakra-ui

Applies motion design principles to create emotionally-driven, technically sound animations and transitions.

LottieFiles/motion-design-skill

Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

feitangyuan/motion-web

Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

Hainrixz/editor-pro-max

Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.

pixel-point/animate-text

Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

199-biotechnologies/motion-dev-animations-skill

Port an existing Remotion (React) composition to HyperFrames HTML.

chmonitor/chmonitor

Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.

bendrape1-byte/silk-design

Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.

anl331/goey-toast

Animation patterns and best practices for Next.js/React applications.

delphi-ai/animate-skill

Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

Hainrixz/editor-pro-max

Create Framer Code Components and Code Overrides. An agent skill from fredm00n/framerlabs.

fredm00n/framerlabs

A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.

AnastasiyaW/codex-claude-code-config

Animation skill for Motion (prev Framer Motion) and CSS animation.

softmaple/softmaple

A skill your agent uses when implementing Disney's 12 animation principles with Framer Motion in React applications

calesthio/OpenMontage

Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.

freshtechbro/claudedesignskills

Framer Motion (Motion) patterns for React: spring presets, staggers, layout animations, micro-interactions, scroll effects and page transitions, with performance rules.

dylanfeltus/skills

Adds Remotion-style video transitions and Framer Motion page animations to PPT-based videos and HTML slide viewers, planning the animation sequence first.

anbeime/skill

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.

Dinil-Thilakarathne/sona-ui

Production-ready UI motion system for React/Next.js. An agent skill from templetongroup/radiant.

templetongroup/radiant

Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

KumarSashank/motiscope

Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.

AThevon/genjutsu

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG.

theexperiencecompany/gaia

Simple scroll-triggered reveal animations using AOS (Animate On Scroll).

freshtechbro/claudedesignskills

Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

KumarSashank/motiscope

Clone any website's landing page with pixel-perfect fidelity.

SylphAI-Inc/skills

Modern web design trends, principles, and implementation patterns for 2024-2025.

freshtechbro/claudedesignskills

End-to-end guided workflow for creating an explainer or walkthrough video.

BintzGavin/helios

End-to-end guided workflow for creating a product launch or release announcement video.

BintzGavin/helios

Motion design system for Mobazha including animation principles, duration standards, easing functions, prefers-reduced-motion support, and scene-specific animation patterns.

mobazha/mobazha-unified

Emil Kowalski's animation best practices for web interfaces.

theexperiencecompany/gaia

ALWAYS load when writing or debugging code that imports "motion-v" (Motion for Vue, motion-vue).

skilld-dev/vue-ecosystem-skills

End-to-end guided workflow for creating a product demo or showcase video.

BintzGavin/helios

End-to-end guided workflow for creating a promotional hype video.

BintzGavin/helios

End-to-end guided workflow for creating a short-form social media clip (Reels, TikTok, Shorts).

BintzGavin/helios

End-to-end guided workflow for creating a social proof or testimonial video.

BintzGavin/helios

Motion (Framer Motion) React animation library. An agent skill from secondsky/claude-skills.

secondsky/claude-skills

Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API.

yonatangross/orchestkit

Implement smooth, accessible animations with motion/react (Framer Motion) in React.

Asymmetric-al/core

Generate CSS and Framer Motion animations from plain English.

sundial-org/awesome-openclaw-skills

Generate animated videos and motion graphics from natural language descriptions.

OneWave-AI/claude-skills

Framer Motion performance optimization guidelines. An agent skill from pproenca/dot-skills.

pproenca/dot-skills

Create professional CSS animations, transitions, micro-interactions, and complex motion design.

OneWave-AI/claude-skills

Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

vibeeval/vibecosystem

Web animation expertise covering CSS animations and transitions, Web Animations API, Framer Motion, GSAP, scroll-driven animations, layout animations, spring physics, reduce-motion preferences, and…

FerroxLabs/wayland