mastering-animate-presence

Audit React AnimatePresence and motion code for best-practice violations.

869|42|Updated Sep 24, 2025
One-click install
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mastering-animate-presence
Source: https://github.com/raphaelsalaja/userinterface-wiki/tree/main/skills/mastering-animate-presence
Command: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and enforce AnimatePresence best practices in Motion/Framer Motion code, focusing on exit animations and presence state to prevent subtle UI bugs.

Core Features & Use Cases

  • Detect missing exit props, improper wrapping with AnimatePresence, and misconfigured keys in lists.
  • Validate mode selection, nested exit coordination, and presence hook usage across React components.
  • Use cases include reviewing modals, tooltips, and dynamic lists to ensure smooth, predictable animations.

Quick Start

Run the audit against your codebase to surface file:line findings for AnimatePresence issues.

Frequently Asked Questions about mastering-animate-presence

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

FAQPage Schema
How do I audit React components for AnimatePresence best practice violations?

Run an audit against your codebase to surface file:line findings for AnimatePresence issues. The audit scopes React components using motion and presence hooks, returning precise, line-level results that guide targeted fixes.

What AnimatePresence issues can I detect in my Motion code?

You can detect missing exit props, improper wrapping with AnimatePresence, and misconfigured keys in lists. The audit also validates mode selection, nested exit coordination, and presence hook usage across React components.

Why are my Framer Motion exit animations causing subtle UI bugs?

Subtle UI bugs often stem from violating AnimatePresence best practices, such as missing exit props or improper wrapping. Auditing your motion code for these exact violations prevents unpredictable animation behavior.

Can I use a static analysis approach to review modals and dynamic lists using AnimatePresence?

Yes, the audit satisfies static-analysis expectations by scoping React components using AnimatePresence and motion. It produces precise, line-level findings to ensure smooth, predictable animations in modals, tooltips, and dynamic lists.

How do I validate mode selection and nested exit coordination in AnimatePresence?

Run the audit to validate mode selection and nested exit coordination. It scopes your React components using AnimatePresence and related hooks, returning file:line findings for each misconfigured presence state issue.