hyperframe-pro-beats
Installation
SKILL.md
Beats: decide before you code
The step that separates an edited video from decorated text. Fill the table first. A model that designs while coding produces one layout reused for every beat, which is exactly what "it looks like slides" means.
1. The beat's JOB decides its HERO — never the other way round
| The narration in this window is… | job | hero |
|---|---|---|
| an event happening to the viewer (stolen, lost, hacked, a bill arriving) | the event | a photoreal plate — see hyperframe-pro-footage. Trim so the action lands ON its cue word |
| the viewer's situation ("your storage is full") | recognition | a real screenshot, in this priority: (1) the screen the OS shows them unprompted — an alert, a banner; (2) the status screen they open to check; (3) the settings page they must navigate to |
| a sensation, not a screen (hot, slow, laggy, battery drain) | recognition | drawn/vector object + a counter or slam. Do NOT hunt for a warning dialog that "might exist" |
| things they're told not to buy | cancelled purchase | sibling chips with the label and — only if the narration says a price — the price, struck through together on the dismissal word. One gesture, not two |
| "N steps / N ways" | contract | the giant N. Sets the length before step one so nobody wonders how long this is |
| "but actually… / padahal…" | reversal | a two-word slam, hero colour on the second word |
| a result number | reveal | a counter that counts, in its own column |
| a tip that names a screen | tip · recognition | a real screenshot, cropped to the rows the beat is about |
| the total | sum | a recap of the minis you actually showed. If the parts don't add up, don't show a total |
| the closing line | close | the line plus one object that IS the thing mentioned |