interactive-component-integration

The hardest failure when integrating a third-party interactive component is rarely that the page breaks. It is silent rendering-pipeline drift: default parameters are off by one, the DPR strategy has changed, a post-processing pass is missing, an animation loop is never cleaned up. The page looks close enough, yet it is no longer doing what the authoritative implementation does.

interactive-component-integration is an agent skill that enforces five non-negotiable principles: replicate the authoritative rendering pipeline before touching any visual parameter; document every intentional deviation with its reason, visible impact, and verification method; contain component code, assets, selectors, and cache behavior within the owning boundary; explicitly handle DPR caps, animation loops, resize, reduced motion, and API-failure fallbacks; and complete QA against normalized viewport states, marking any unexecuted check as not tested or blocked rather than passing by assumption.

If your work involves moving creative-coding demos, WebGL shaders, scroll-driven effects, sensor-reactive components, or third-party animation libraries from a playground into a production page, and you want the agent to align the rendering contract before writing code and deliver a credible QA report before calling it done, this skill is built for that workflow.