Transition Reverse Engineering

Precise extraction and replication of animations, transitions, and visual effects from live sites. Works independently or as a sub-skill called by ui-reverse-engineering.

Session rule: always pass --session <project-name> — default session is shared globally. agent-browser is a system CLI. Execute all commands via the Bash tool.

Core principles

1. Extract real values. Never guess timing, easing, positions, counts.
2. Capture reference frames ONCE. Save to tmp/ref/<effect-name>/frames/ref/. Never re-visit.
3. All agent-browser eval must be IIFE: (() => { ... })(). No top-level return.
4. Extraction ≠ completion. Done requires a passing verification cycle (impl frames vs ref frames).
5. Diagnose before fixing. Name the root cause in one sentence. If you can't, add eval instrumentation.
6. Measure ALL animated properties at MULTIPLE progress points in one pass. See measurement.md. Skipping → broken animation timing.
7. Never assume linearity. Real animations use multi-phase timing. The 11-point measurement catches this.
8. getComputedStyle() alone is NOT enough for JS-driven animations. It shows the current frame only — not from/to ranges, interpolation breakpoints, or scroll-offset mappings. For scroll-driven effects, download the JS bundle.
9. Raw CSS stylesheets beat computed values for layout. Raw CSS reveals responsive expressions (calc(), cqw, %, custom properties). Computed values are viewport-specific pixels.