fix-web-rendering-performancelisted

# Fix Web Rendering Performance Diagnose and reduce expensive layout, paint, raster, and compositing work in web interfaces, including animations and static visual effects repeated across scrolling lists or grids. ## how to use - `/fix-web-rendering-performance` Apply these guidelines to web rendering, visual effects, and animation work in this conversation. - `/fix-web-rendering-performance <file>` Review the file against the relevant guidance below and report: - violations (quote the exact line or snippet) - why it matters (one short sentence) - a concrete fix (code-level suggestion) Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack. Treat rendering guidance as performance heuristics. A CSS property can identify a risk, but a runtime profile is needed to establish a bottleneck and verify an improvement. ## when to apply Reference these guidelines when: - adding or changing UI animations (CSS, WAAPI, Motion, rAF, GSAP) - refactoring janky interactions or transitions - implementing scroll-linked motion or reveal-on-scroll - animating layout, filters, masks, gradients, or CSS variables - reviewing components that use will-change, transforms, or measurement - reviewing scrolling lists or grids with repeated filters, shadows, blur, or backdrop effects, including virtualized lists ## rendering steps glossary - composite candidates: transform and opacity; verify actual layer behavior - paint/raster: changing