motion-dev-expert

Creates AR/VR prototypes and demos with interactive 3D graphics.

1|Updated Feb 2, 2026
One-click install
npx skills add https://github.com/Aurora-AI/Certum- --skill motion-dev-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-dev-expert
Source: https://github.com/Aurora-AI/Certum-/tree/main/.agent/skills/motion-dev-expert
Command: npx skills add https://github.com/Aurora-AI/Certum- --skill motion-dev-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? This skill enables building rich, declarative animations and gesture-driven UI in React, bridging design and implementation so interactions feel intentional and polished.

## Core Features & Use Cases

  • Declarative Animations: animate prop, variants, transitions
  • Gestures & Interaction: whileHover, whileTap, whileDrag, drag, dragConstraints, pan
  • Layout Animations: layout, layoutId
  • Scroll Animations: useScroll, useTransform Use cases include micro-interactions, animated carousels, parallax effects, and shared element transitions.

### Quick Start Install the motion library in your project. Replace HTML tags with motion.* components, define simple variants, and apply initial and animate. Add basic gestures like whileHover and whileDrag to enable interactions. Ensure accessibility considerations (prefers-reduced-motion) and monitor performance for large trees.

Frequently Asked Questions about motion-dev-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create React animations for gesture-driven UI interactions?▼

Create React animations by replacing HTML tags with motion components, defining variants, and applying gesture handlers like whileHover, whileDrag, and whileTap for interactive UI.

Can I build shared element transitions and layout animations in React?▼

Yes, shared element transitions and layout animations are built using the layout and layoutId props on motion components to automatically animate element position changes.

What's the best way to implement scroll-based parallax effects in React?▼

Implement scroll-based parallax effects using the useScroll and useTransform utilities to map scroll progress to declarative animation values for your components.

How to use React variants for declarative micro-interactions?▼

Define declarative micro-interactions by creating variants objects that specify animation states, then passing them to the animate prop on your motion components for orchestrated transitions.

Does React animation support accessibility and prefers-reduced-motion?▼

Yes, accessibility is supported by respecting prefers-reduced-motion settings and monitoring performance to ensure animations do not negatively impact large component trees.

Why use declarative animations instead of manual React UI animations?▼

Declarative animations bridge design and implementation by using the animate prop and variants, making interactions feel intentional and polished without manual timeline management.