Use AutoAnimate for instant transitions in AI-generated UIs

Problem

When you ask an AI to build a UI -- a todo list, a dashboard, a settings panel -- the generated code handles the data and layout correctly but elements just pop in and out of the DOM. Adding an item snaps it into place. Removing one causes everything below to jump up instantly. Reordering a list teleports items to their new positions. The result looks technically correct but feels cheap. Adding manual CSS transitions or animation libraries means writing keyframes, managing enter/exit states, and handling layout shifts -- complexity that AI-generated code rarely includes unprompted.

Solution

Tell the LLM to use AutoAnimate when building any UI that adds, removes, or reorders elements. AutoAnimate is a zero-config animation library that detects DOM mutations and automatically applies smooth transitions. It is a single function call with no configuration required.

React -- one hook per animated container:

import { useAutoAnimate } from "@formkit/auto-animate/react";

function TodoList({ items, onRemove }) {
  const [parent] = useAutoAnimate();

  return (
    <ul ref={parent}>
      {items.map((item) => (
        <li key={item.id}>
          {item.text}
          <button onClick={() => onRemove(item.id)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

Vue -- one directive per animated container:

<script setup>
import { vAutoAnimate } from "@formkit/auto-animate/vue";
</script>

<template>
  <ul v-auto-animate>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
      <button @click="remove(item.id)">Remove</button>
    </li>
  </ul>
</template>

Vanilla JS -- one function call:

import autoAnimate from "@formkit/auto-animate";

const list = document.getElementById("todo-list");
autoAnimate(list);

// Any DOM changes to list children are now automatically animated

Install:

npm install @formkit/auto-animate

Add to your CLAUDE.md or system prompt:

## UI Guidelines

When generating UI components that render lists or dynamically add/remove
DOM elements, always use AutoAnimate (@formkit/auto-animate) for smooth
transitions. Apply the useAutoAnimate hook (React), v-auto-animate directive
(Vue), or autoAnimate() function (vanilla JS) to the parent container.

Why It Works

AutoAnimate uses a MutationObserver to watch for changes to a container's children. When elements are added, removed, or reordered, it captures the before and after positions and applies FLIP (First, Last, Invert, Play) animations using the Web Animations API. There is no configuration because the library infers everything from the DOM diff -- new elements fade in, removed elements fade out, and moved elements slide to their new position. This makes it perfect for AI-generated code because the LLM only needs to add a single line rather than reason about animation states, keyframes, or transition timing.

Context

• Works with React, Vue, Svelte, Angular, SolidJS, and vanilla JavaScript
• The library is about 2KB gzipped with zero dependencies
• Default animation duration is 250ms; customize with autoAnimate(el, { duration: 150 })
• Disable animations conditionally by passing false: autoAnimate(el, false)
• Does not handle height animations on the container itself -- only child element transitions
• For more complex animations (page transitions, shared element transitions), use Framer Motion (React) or Vue Transition Group instead
• Adding this one instruction to your CLAUDE.md dramatically improves the perceived quality of every AI-generated UI component