Tailwindcss-Animate Migration Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Migrate all custom CSS animations to tailwindcss-animate utilities.

Architecture: Replace custom .animate-fade-up CSS keyframes with tailwindcss-animate utility classes (animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300). Replace stagger utility classes with animation-delay-* utilities.

Tech Stack: tailwindcss-animate v1.0.7

Files to Modify

Task 1: Update globals.css — Remove Custom Animation Keyframes

Files:

• Modify: apps/frontend/app/globals.css:773-815

• Step 1: Remove duplicate .animate-fade-up class at line 773

Run: Read lines 770-780 of globals.css Action: Delete:

.animate-fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}

• Step 2: Update main .animate-fade-up class (line 807)

Modify: apps/frontend/app/globals.css:807-810

Run: Read lines 800-815 Action: Replace .animate-fade-up block with tailwindcss-animate utility:

/* Removed custom .animate-fade-up - now uses tailwindcss-animate */

• Step 3: Verify changes

Run: grep -n "animate-fade-up" apps/frontend/app/globals.css Expected: No matches

• Step 4: Commit

git add apps/frontend/app/globals.css
git commit -m "refactor(animation): remove custom animate-fade-up keyframes"

Task 2: Migrate page-header.tsx

Files:

• Modify: apps/frontend/components/admin/page-header.tsx:16

• Step 1: Update className

Modify: apps/frontend/components/admin/page-header.tsx:16

// Before
<div className={cn("animate-fade-up flex items-center justify-between", className)}>
 
// After
<div className={cn("animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 flex items-center justify-between", className)}>

• Step 2: Verify no other animate-fade-up in file

Run: grep -n "animate-fade-up" apps/frontend/components/admin/page-header.tsx Expected: No matches

• Step 3: Commit

git add apps/frontend/components/admin/page-header.tsx
git commit -m "refactor(animation): use tailwindcss-animate in page-header"

Task 3: Migrate french-mentalist-hero.tsx

Files:

• Modify: apps/frontend/components/features/french-mentalist/french-mentalist-hero.tsx

• Step 1: Replace animate-fade-up and stagger classes

Run: Read lines 196, 201, 206, 211, 216, 221, 244

Modify each:

• animate-fade-up stagger-1 → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 animation-delay-100

• animate-fade-up stagger-2 → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 animation-delay-200

• animate-fade-up stagger-3 → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 animation-delay-300

• animate-fade-up stagger-4 → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 animation-delay-400

• animate-fade-up stagger-5 → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 animation-delay-500

• Step 2: Verify no animate-fade-up remains

Run: grep -n "animate-fade-up" apps/frontend/components/features/french-mentalist/french-mentalist-hero.tsx Expected: No matches

• Step 3: Commit

git add apps/frontend/components/features/french-mentalist/french-mentalist-hero.tsx
git commit -m "refactor(animation): use tailwindcss-animate in french-mentalist-hero"

Task 4: Migrate reservation-form.tsx

Files:

• Modify: apps/frontend/components/features/french-mentalist/reservation-form.tsx:75

• Step 1: Replace animate-fade-up

// Before
className = "relative w-full max-w-[520px] animate-fade-up";
 
// After
className =
  "relative w-full max-w-[520px] animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300";

• Step 2: Verify

Run: grep -n "animate-fade-up" apps/frontend/components/features/french-mentalist/reservation-form.tsx Expected: No matches

• Step 3: Commit

git add apps/frontend/components/features/french-mentalist/reservation-form.tsx
git commit -m "refactor(animation): use tailwindcss-animate in reservation-form"

Task 5: Migrate dashboard shows page

Files:

• Modify: apps/frontend/app/[locale]/dashboard/admin/shows/page.tsx

• Step 1: Replace animate-fade-up usages

Lines 69, 81, 93:

• Line 69: animate-fade-up → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300

• Line 81: animate-fade-up → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300

• Line 93: animate-fade-up with delay → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300 animation-delay-75

• Step 2: Verify

Run: grep -n "animate-fade-up" apps/frontend/app/[locale]/dashboard/admin/shows/page.tsx Expected: No matches

• Step 3: Commit

git add "apps/frontend/app/[locale]/dashboard/admin/shows/page.tsx"
git commit -m "refactor(animation): use tailwindcss-animate in shows page"

Task 6: Migrate dashboard reception page

Files:

• Modify: apps/frontend/app/[locale]/dashboard/pos/reception/page.tsx

• Step 1: Replace inline animationDelay with animation-delay utility

Line 82:

// Before
style={{ animationDelay: "120ms" }}
 
// After
className="animation-delay-100"

• Step 2: Verify no inline animationDelay remains

Run: grep -n "animationDelay" apps/frontend/app/[locale]/dashboard/pos/reception/page.tsx Expected: No matches

• Step 3: Commit

git add "apps/frontend/app/[locale]/dashboard/pos/reception/page.tsx"
git commit -m "refactor(animation): use animation-delay utility in reception page"

Task 7: Final Verification

• Step 1: Scan for any remaining animate-fade-up

Run: grep -rn "animate-fade-up" apps/frontend --include="*.tsx" --include="*.css" | grep -v raw/ Expected: No matches

• Step 2: Verify build passes

Run: cd apps/frontend && pnpm run typecheck Expected: No errors

• Step 3: Verify no broken selectors in CSS

Run: grep -n "\.animate-" apps/frontend/app/globals.css Expected: No matches

Summary

Migration reference:

• animate-fade-up → animate-slide-in-from-bottom-4 animate-fade-in animate-duration-300
• stagger-1 → animation-delay-100
• stagger-2 → animation-delay-200
• stagger-3 → animation-delay-300
• stagger-4 → animation-delay-400
• stagger-5 → animation-delay-500
• style={{ animationDelay: "60ms" }} → animation-delay-75
• style={{ animationDelay: "120ms" }} → animation-delay-100