The Complete Production SOP: How to Deploy and Run AutoAnimate Zero-Config List Transitions in Autonomous AI Agents

---
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
Apply @formkit/auto-animate exclusively to dynamic parent elements without writing manual CSS keyframes.

import React, { useState } from 'react';
import { useAutoAnimate } from '@formkit/auto-animate/react';

interface Task {
  id: string;
  title: string;
}

export const TaskList: React.FC<{ initialTasks: Task[] }> = ({ initialTasks }) => {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [parent] = useAutoAnimate<HTMLUListElement>({ duration: 250, easing: 'ease-in-out' });

  const removeTask = (id: string) => {
    setTasks((prev) => prev.filter((task) => task.id !== id));
  };

  return (
    <ul ref={parent} className="divide-y divide-gray-200">
      {tasks.map((task) => (
        <li key={task.id} className="py-2 flex justify-between items-center">
          <span>{task.title}</span>
          <button onClick={() => removeTask(task.id)} className="text-red-500 hover:text-red-700">
            Remove
          </button>
        </li>
      ))}
    </ul>
  );
};