What problem does it solve? When you see a gradient, animation, or layout on the web and wonder how it was built, there is no easy way to reverse-engineer it. This Skill inspects a live URL or a screenshot and explains the frontend stack, styling system, or the exact layer stack behind a specific visual effect. ## Core Features & Use Cases - Effect Deconstruction: Identifies the full layer stack behind a visual effect in paint order, including pseudo-elements, filters, blend modes, and animation states, using browser evaluation scripts. - Whole-System Reading: Detects the framework, styling approach, component library, design tokens, type scale, spacing rhythm, breakpoints, and fonts of any site. - Screenshot Reconstruction: When only an image is available, extracts exact colors and contrast values while clearly labeling everything else as ratios or inference. - Use Case: Ask how the hero gradient on a marketing site was built, and receive the oversized element, multi-stop gradient, blur filter, and backdrop-filter layers explained in paint order with measured values. ## Quick Start Ask the assistant to explain how the gradient animation on a specific website URL was built.
