frontend-rendering-dom

What problem does it solve?

Web UIs can suffer from slow animations, excessive layout and paint work, hydration mismatches, and redundant event listeners that degrade perceived performance and responsiveness. This Skill consolidates practical patterns to reduce rendering cost, avoid hydration flashes, and keep interactive experiences smooth across React and browser-rendered components.

Core Features & Use Cases

• SVG and animation optimization: Animate wrappers instead of SVG elements and reduce SVG precision to decrease paint cost and file size.
• Render deferral and hoisting: Use content-visibility for long lists and hoist static JSX to module scope to prevent unnecessary re-renders.
• Hydration and event management: Inject synchronous hydration-safe scripts to prevent flicker, use suppressHydrationWarning judiciously, adopt useTransition for loading states, deduplicate global listeners at module scope, and mark scroll/touch listeners as passive when appropriate.
• Use Case: Audit a React codebase to eliminate hydration flashes, speed up SVG-based animations, and reduce jank by consolidating listeners and deferring off-screen rendering.

Quick Start

Analyze my React components and recommend concrete fixes to improve SVG animations, hydration handling, conditional rendering, and event listener performance.