---
name: "auto-animate-zero-config-lists"
description: "Add automatic, smooth DOM list animations with a single line of JavaScript."
metadata:
  author: "FormKit"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use auto-animate react"
  - "smooth list addition removal"
  - "animate accordion with auto-animate"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# AutoAnimate Zero-Config List Transitions

Integrates @formkit/auto-animate: smooth list item additions, removals, reorders, accordion expansion, and dropdown toggling without writing manual CSS keyframes.

## When to Invoke
Invoke this skill whenever you need to:
- use auto-animate react
- smooth list addition removal
- animate accordion with auto-animate

## Execution SOP & Rules
1. Apply autoAnimate(parentRef.current) to the parent container of dynamic list items.
2. Use the useAutoAnimate() hook in React or v-auto-animate directive in Vue.
3. Ensure every child item has a unique, persistent key attribute in React or Vue.
4. Customize animation timing with autoAnimate(parent, { duration: 250, easing: 'ease-in-out' }).

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.