Frames

This skill measures whether an interaction stays smooth. It records the interaction on a throttled CPU, traces each slow frame to its cause and proves the fix with a second recording.

A trace, never a feeling

The budgets are exact. Every frame lands within one refresh interval, 16.7ms at 60Hz, and no animation frame runs past 50ms while something moves. Every interaction paints its response within 200ms. "Feels smooth" with no numbers is a finding.

What a motion's values should be belongs to motion. Taking a motion apart frame by frame belongs to deconstruct. Opening the running result belongs to verify.

1. Name the interaction

Write the route, the steps and the moment that matters, such as "open the command palette and type three letters". Throttle the CPU 4× through the browser's emulation call, which stands in for a mid-range phone. A trace on an unthrottled laptop is frames-throttle-the-cpu.

2. Record it

Run observe.js through the browser's evaluate call. Call window.__frames.start(), perform the interaction three times, then call window.__frames.stop(). When a long frame has no named script, record a full performance profile too. Reporting smoothness without a recording is frames-trace-not-feel.

3. Read the budget