Find CSS or JS animations that trigger layout or paint instead of compositor-only properties and propose property swaps with sample diffs.
Scans a codebase for CSS and JS-driven animations that animate layout or paint properties (e.g., width, top, box-shadow) and proposes equivalent compositor-only animations using transform or opacity.
repo_dir: project root.glob: defaults to src/**/*.{css,scss,jsx,tsx,js,ts}.framework: framer-motion, gsap, react-spring, none.rg -nN 'animation\s*:|@keyframes' <repo_dir> --glob '*.{css,scss}'. Parse each @keyframes block.rg -nN 'transition\s*:' <repo_dir> --glob '*.{css,scss}'. Extract the comma-separated property list.top, left, right, bottom, width, height, margin, padding, font-size, box-shadow, filter (filter is paint-only) signals layout or paint reflow.framework:
framer-motion: rg -nN '<motion\.\w+\s+(animate|whileHover)' --glob '*.{jsx,tsx}'. Inspect the animated keys.gsap: rg -nN 'gsap\.(to|from|fromTo)\(' --glob '*.{js,ts,jsx,tsx}'.react-spring: rg -nN 'useSpring\b' --glob '*.{jsx,tsx}'.top: 0 -> top: 100px -> animate transform: translateY(0) -> translateY(100px). Animate width: 0 -> width: 100% -> animate transform: scaleX(0) -> scaleX(1) plus a transform-origin: left.compositor-only-possible or requires-refactor based on whether a 1:1 swap is straightforward.file:line and the offending property.animation-audit.md with: summary counts (CSS animations, CSS transitions, JS animations), table of findings with file:line and suggested fix, and one "before/after" code block per top-impact finding.
For each suggested swap, render the component in a Chromium browser with the Performance panel recording, and confirm the modified animation does not appear in the "Layout" or "Paint" lanes (it should sit in "Compositor"). Visually compare original vs. modified animation under reduced-motion preferences. If a finding cannot be expressed as a transform (e.g., animating border-radius from 0 to 50%), keep it but mark requires-refactor.
prefers-reduced-motion: still audit but lower the priority.filter: drop-shadow only if the visual diff is acceptable; ship a "before/after" screenshot suggestion.Other publishers' experience with this skill. Self-rating is blocked.
Sign in and publish to the registry to leave a rating.
No ratings yet. Be the first.
Same domains or capabilities as amitte/animation-performance-auditor.
Write five Google Ads responsive search ad copy variants from a product description and audience — each fits headline length and includes a distinct CTA.
Read a Lighthouse or CrUX report and narrate LCP, CLS, and INP scores into a prioritized fix plan with concrete code suggestions.
Tighten a Content-Security-Policy by stripping wildcards and verifying the result against actual page resource loads observed in browser logs.
Identify unused CSS classes via PurgeCSS and propose a configuration that's safe in the presence of dynamically constructed class names.
Audit a Tailwind config for color contrast in dark mode and flag every text-on-background pair below WCAG AA thresholds.
Walk a React component tree and identify subtrees not covered by an Error Boundary, suggesting placement points for new boundaries.