Skills
.Work. You
Rest

mastering-animate-presence

Community

Audit Motion/Framer Motion for AnimatePresence.

Software Engineering#code review#react#animation#ui development#animatepresence#framer motion
AuthorJuanJoseGonGi
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers ensure their use of Framer Motion's AnimatePresence component follows best practices, preventing common issues with exit animations, presence hooks, and mode selection.

Core Features & Use Cases

  • Exit Animation Auditing: Checks for missing exit props, incorrect key usage, and mismatched animations.
  • Presence Hook Validation: Ensures useIsPresent and usePresence are used correctly within the component tree and with safeToRemove.
  • Mode Configuration Review: Identifies potential conflicts or suboptimal usage of AnimatePresence modes like wait, sync, and popLayout.
  • Use Case: When reviewing a complex UI component that uses animations for modals or list items, this Skill can quickly flag any AnimatePresence configurations that might lead to janky animations or unexpected behavior.

Quick Start

Run the mastering-animate-presence skill to audit the file './src/components/AnimatedList.tsx' for AnimatePresence best practices.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mastering-animate-presence
Download link: https://github.com/JuanJoseGonGi/skills/archive/main.zip#mastering-animate-presence

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.