Nicholai/dashore-incubator
1
0
Fork 0
mirror of https://github.com/NicholaiVogel/dashore-incubator.git synced 2026-03-30 22:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
dashore-incubator/.agents/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
Nicholai 827f13a2db feat(skills): add agent skills for claude code 
add web-perf and vercel-react-best-practices skills from skills.sh
to improve ai assistance for this next.js + cloudflare workers project.

- web-perf: core web vitals analysis and performance auditing
- vercel-react-best-practices: react/next.js optimization patterns
- wrangler: cloudflare workers cli guidance (already existed)
2026-01-22 11:40:05 -07:00

1.2 KiB
Raw Blame History

title impact impactDescription tags
Animate SVG Wrapper Instead of SVG Element LOW enables hardware acceleration rendering, svg, css, animation, performance

Animate SVG Wrapper Instead of SVG Element

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper instead.

Incorrect (animating SVG directly - no hardware acceleration):

function LoadingSpinner() {
  return (
    <svg 
      className="animate-spin"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <circle cx="12" cy="12" r="10" stroke="currentColor" />
    </svg>
  )
}

Correct (animating wrapper div - hardware accelerated):

function LoadingSpinner() {
  return (
    <div className="animate-spin">
      <svg 
        width="24" 
        height="24" 
        viewBox="0 0 24 24"
      >
        <circle cx="12" cy="12" r="10" stroke="currentColor" />
      </svg>
    </div>
  )
}

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations.