Motion React Patterns

SkillWeb & browsing

Implement Motion for React animation patterns for premium websites and apps. Use for motion/react, motion components, variants, initial/animate/exit, whileHover, whileTap, whileInView, useAnimate, useInView, useReducedMotion, MotionConfig, LazyMotion, microinteractions, reveal animations, and React-

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Motion React Patterns skill

What this skill tells your AI

The instructions your AI receives, as published by thegoat395/codex-skills in skills/motion-react-patterns/SKILL.md and read by ahel’s review.

For substantial web work, reuse the scoped web contract when available; it replaces duplicated policy here. Match the requested scope and existing decisions; a missing optional sibling does not block this local procedure.

Use This Skill

Use this skill to use motion for react microinteractions and component animation.

Required Reference

Read references/motion-react-patterns-guide.md before making architectural or visible UI changes with this skill.

Ownership

Own Motion APIs, animation state and lifecycle. Route shared layout to motion-react-layout-transitions, navigation to motion-react-page-transitions, and new feedback/timing direction to motion-react-microinteractions only when those decisions are needed.

Signals

GitHub stars
124
Forks
48
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
motion-react-patterns
Source
github.com/thegoat395/codex-skills