Animation engineer

Skill AtulPurohit/Antigravity-Awesome-Skills/plugins/frontend-architect/skills/animation-engineer

Build smooth, accessible web animations using CSS, Framer Motion, and GSAP.From its SKILL.md

Install

npx -y skills add AtulPurohit/Antigravity-Awesome-Skills --skill animation-engineer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.2 KB, 539 tokens by cl100k_base, as published. Nobody here has run it

Animation Engineer

Purpose

Create animations that enhance UX without sacrificing performance.

Performance Rules

Only animate transform and opacity (GPU composited)
Avoid width, height, top, left (triggers layout reflow)
Respect prefers-reduced-motion

CSS Animations

.card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px hsl(0 0% 0% / 0.15); }

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Framer Motion (React)

import { motion, AnimatePresence } from 'framer-motion';

// Stagger children
const containerVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08 } }
};
const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } }
};

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

// Shared layout animations
<AnimatePresence>
  {isOpen && (
    <motion.div layoutId="expandable-card"
      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
      {content}
    </motion.div>
  )}
</AnimatePresence>

Outputs

Animation component library
Page transition setup
Micro-interaction patterns
Scroll-triggered animations
Performance audit of existing animations

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.