pixel-reverse-engineer
Pixel Reverse Engineer
Rebuild a live website section or component in the target project with 1:1 visual and behavioral fidelity. From the owner's supplied pixel-reverse-engineer/SKILL.md. Inspect the actual HTML, CSS, assets, JavaScript, libraries, responsive behavior and animation logic, then adapt the implementation cleanly to the target project's existing stack.
For an explanation-only question, use INSPECTION.md: report the mechanism, evidence tiers and unknowns without implementing a copy. The reconstruction rules and WORKFLOW.md apply when a recreation is requested. [Jakub Krehel, explain-interface]; [pixel-reverse-engineer, SKILL.md]
Apply only the routes and checks for the selected job. Read a linked skill's named file from its installed folder when available, or from the linked source. Report an unavailable required reference instead of inventing it. [skill-authoring, DISTRIBUTION.md#composing-skills]
| The job | Read |
|---|---|
| Set fidelity, evidence and target-project constraints | SKILL.md |
| Inspect, extract, implement and compare the requested live component or animation | WORKFLOW.md |
| Explain how a live page or effect was built without reconstructing it; inspect styles, layers and motion; distinguish measured, derived and inferred evidence | INSPECTION.md |
| Measure recorded illustration motion: full-rate crops, subject edges, poses, proportions, decoded colors and matched-time comparison | REFERENCE-MOTION.md |
| Investigate shipped JS/Electron artifacts or reconcile static and runtime evidence | Reverse engineering |
| Build from Figma or a design image instead of a live implementation | Building from a design file |