Skip to content
Get packs

Animation Performance Review

Flags CSS animations that animate layout properties and suggests transform/opacity fixes.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review stylesheets and components for animations that change layout properties like width, height, top, left or margin, which force the browser to recalculate layout on every frame and can make motion stutter. Once installed, the agent flags those animations, proposes switching to transform (translate, scale) and opacity, and explains the browser rendering pipeline behind the advice. It also checks reduced-motion preferences and will-change usage.

Great for

  • Front-end developers who want a second pair of eyes on CSS animation performance
  • Teams reviewing UI code before release
  • Designers or students learning why some animations jank and others run smoothly

Skip it if

  • Projects with no CSS or JavaScript animations, where the skill has nothing to check
  • Complex canvas, WebGL or physics-based animation, which the guidance does not cover, so advice may be incomplete
  • Rewriting animation code without testing, since changes to visual behaviour should be verified in the rendered UI

Try asking

  • “Review my stylesheet for animations that use top, left or width and suggest transform alternatives”
  • “Check my component styles for animation problems across mobile and desktop breakpoints”
  • “Explain why my menu slide-in animation stutters and how to fix it”
  • “Audit my CSS for prefers-reduced-motion support and will-change overuse”
Step-by-step guide: how to use Animation Performance ReviewInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    animation-performance.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip animation-performance.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip animation-performance.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at specific files or components so it can flag exact selectors and declarations.
  • Ask it to check the result at several breakpoints and interaction states, as the skill instructs, rather than only reading the code.
  • Treat suggested fixes as starting points and confirm the visual result in a browser.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.