mastering-animate-presence_skill

Overview

This skill audits TypeScript Motion/Framer Motion code for AnimatePresence best practices, focusing on exit animations, presence hooks, mode selection, and nested exits. It reports concrete findings in file:line format and produces a summary of rule counts and severities. Use it to catch runtime animation bugs and accessibility/interactivity regressions before release.

How this skill works

It scans the specified files or file patterns and checks each motion component against a defined rule set for exit props, keys, presence hooks, mode usage, and nested-propagation. For each violation it emits a file:line entry with a rule id and short description. After collecting findings it outputs a compact summary table with counts and severity guidance.

When to use it

• Review exit animations for components and modal dialogs.
• Audit lists and reordering animations before shipping UI changes.
• Validate usePresence / useIsPresent usage in child components.
• Check AnimatePresence mode and timing for perceived performance.
• Confirm nested AnimatePresence propagate and timing coordination.

Best practices

• Always wrap conditionally rendered motion elements in AnimatePresence and give them explicit exit props.
• Give dynamic children unique stable keys (avoid array index) to preserve predictable exits.
• Use useIsPresent/usePresence inside the child component and call safeToRemove after async cleanup.
• Adjust durations when mode="wait" because it effectively doubles perceived time; reduce per-element duration.
• Use propagate on nested AnimatePresence and coordinate parent/child exit durations to avoid premature child removal.

Example use cases

• CI pre-merge check to find missing exit props and unwrapped motion elements.
• Code review helper for modal implementations ensuring interactions are disabled during exit.
• List-reordering audit to recommend mode="popLayout" and avoid layout conflicts.
• Refactor validation to ensure usePresence callers call safeToRemove after async work.