Component Extractor

Make a faithful replica of a component whose look is an EMERGENT COMPOSITE of CSS layers — stacked gradients, mix-blend-mode, masks, opacity, pseudo-element overlays — possibly sitting over a <canvas> or <svg>, by extracting the COMPUTED runtime styles and the full layer/stacking/blend graph, not the authored stylesheet. Use when the look comes from several coupled CSS layers blending together (the appearance is more than any single layer), when blend modes / pseudo-element overlays / masks are involved, or when a canvas/SVG looks wrong even though its own source matches. Do NOT use for a single declarative element with no blending (just copy its computed style) — this skill is for the coupling.

Make a pixel-perfect, dependency-free replica of an inline-SVG component whose geometry is regenerated by JavaScript (cursor-, scroll-, or time-driven) by reading its actual generator source from the page bundle, instead of inferring a parametric model from measured curves. Use when the thing you need to clone, extract, or replicate is an inline <svg> with real <path>/shape children whose motion is driven by JS (no <canvas>, no <animate>/SMIL). Do NOT use for <canvas> (WebGL/canvas2d), declarative CSS/SMIL keyframes, Lottie/Rive, or <img>/<video> — those are sibling extraction skills with a completely different strategy.

Verify a replicated/extracted web component against its live original with quantitative oracles instead of the lossy human eye — the SHARED verify loop for every extraction modality (webgl, css-composite, svg-js-generator, canvas2d). Decides whether a mismatch is a real defect or just animation phase, proves which layer is at fault, and turns "looks a bit off" into a measured signal. Use after you have a replica and a live original to compare, ESPECIALLY when the component animates, when single-frame screenshots disagree but you can't say why, or when a user says "the colors/brightness are a little off."

Make a faithful, deployable replica of a WebGL/WebGL2 canvas component — particle fields, point-cloud globes, shader backgrounds, GPU-driven animations — by reading its real shaders + setup source, instrumenting its live GL context to capture exact uniforms/camera/scene-graph, and reusing its downloadable assets, instead of eyeballing pixels. Use when the thing you need to clone, extract, or replicate is a <canvas> rendered with WebGL (Three.js or raw WebGL2). Do NOT use for inline SVG, declarative CSS/SMIL, Lottie/Rive, or video — those are sibling extraction skills with a completely different strategy.