This skill takes an animation or interaction apart. It names every state and event, splits each transition into one track per property and puts both on a page the user can scrub and edit.

Nothing is described by feel. Every state has a name, every transition has an event and every animated property has its from, to, delay, duration and easing. A value that could not be read is marked , never estimated.

Reading computed values and the side-by-side proof belong to . Forcing component states open belongs to . Opening the result runs in . Whether the motion's values are right belongs to .

Open the source: the code, the live page or a recording. Read keyframes, transitions and spring configs, or step through frames at reduced playback speed. A breakdown from one viewing is .

List the states the element can rest in and the events that move it between them, such as press, release, resolve and timeout. Write them as a table of state, entered on and left on. A sentence like "it shrinks, then spins" is .

Give every animated property its own track: scale, opacity, blur, width, colour, icon and label. Each track lists from, to, delay, duration and easing. "About 300ms" is .

Keep the curve as written. A spring stays a spring with its stiffness, damping and mass, or its bounce and duration. A spring flattened into a guessed bezier is .

Render the element as a pure function of one time value. Scrubbing, pausing and looping then show the same frame for the same time. A viewer that replays CSS and cannot stop mid-transition is .

Copy viewer.html beside the rebuild as a development-only page, write next to it in the shape its header comment shows and open it. It shows the element, the state machine and one lane per track with its live value.

The viewer ships with the skill, so write data only. A page with its own markup or styles is . It highlights the active state, and clicking a state seeks to it. Its scrubber, play, pause and 0.25× stay in. A timeline with no scrubber is .

The inspector writes from, to, delay, duration and easing, and the preview follows. Drag a segment to change its delay. Drag its right edge to change its duration. Drag an event mark to move that event on every track. A timing changed in the reply instead of on the segment is .

Pinch or hold Cmd and scroll to zoom the timeline. Scroll sideways to pan, and Fit returns to the full duration. Drag a slider and the preview follows. Drag the bezier handles or pick a keyword from the easing menu.

Segments, layers and events snap to each other and to the playhead. Hold Alt to drag without snapping. Shift-click segments to move them together.

A spring's length follows from its curve. Change stiffness, damping and mass to change it, or drag the edge of a bounce and duration spring.

Opening a track draws its value over time under the lane, so an overshoot shows. Tracks on one element group under its selector, and dragging the group moves them all.

Cmd+Z undoes any edit. An edited field shows a dot and Revert. Original plays the timeline as it was loaded, so the edit is judged against the source.

Play the original and the rebuild side by side at 0.25×. Set to a capture of the original, and the viewer plays it beside the preview on the same clock. Name every frame that drifts. A breakdown checked only at full speed is .

Press I and O to loop one range, such as press to release. Onion Skin ghosts the last frames over the preview. Wipe lays the recording over the preview with a divider. Crop the recording to the preview frame so the two line up.

is the hand-back: the state table and the tracks as one object. The rebuild imports that file rather than a copy, so the viewer and the shipped motion read the same values. A timeline that lives only in the reply is . Copy Timeline writes the open page back into that object. Paste it over . If the clipboard is blocked, the toast says Copy Failed. An edit left only in the open page is . Gate the viewer to development or delete it before release, and keep .

Every check is a pair. The broken line sits beside the line that replaces it.

deconstruct-capture-the-source

deconstruct-name-the-states

deconstruct-every-property

1

0.96

deconstruct-keep-the-curve

ease-out

stiffness: 400, damping: 30

deconstruct-one-clock

t

deconstruct-scrub-the-timeline

deconstruct-shipped-viewer

viewer.html

timeline.js

deconstruct-compare-slowed

deconstruct-timeline-as-data

timeline.js

deconstruct-edit-the-segment

deconstruct-copy-the-timeline

timeline.js

Severity. is a breakdown made without opening the source, or a missing state. is an estimated timing, a flattened curve, a viewer that cannot scrub, a hand-written viewer or an edit left only in the page. is drift found and named at slow speed.

Format. One finding per root cause:

file:line - [rule-id] what is wrong

Then a summary. when any remains, otherwise. Mark every value you could not read from the source as .