Agent skill · software engineering · aiskillstore
hyperframes-keyframes
Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.
Why this skill is useful
Provides specific GSAP timeline patterns and keyframe diagnostics that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
HyperFrames Keyframes Keyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels. Use hyperframes-animation for broad scene recipes. Use hyperframes-cli for full command docs. Use references/keyframe-patterns.md only when choosing implementation mechanisms, not visual style. Procedure 1. Identify the animated subject, visible states, final state, and runtime. 2. Choose the smallest mechanism that proves the prompt. Read references/keyframe-patterns.md only if the mechanism is unclear. 3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance. 4. Verify with hyperframes lint, hyperframes check, hyperframes keyframes, one focused --shot, and snapshots at proof times. 5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering. Contract Name the moving subject. Name the poses needed to prove the intended motion, including the final state. Keyframe visible channels, not hidden helper state. Preserve object identity when continuity matters. Crossfade only when the intended motion is replacement or dissolve. Hold readable or semantic states long enough to see. Final frame is part of the animation, not cleanup. Do not reset to rest unless requested. Do not end on black unless requested. If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/hyperframes-keyframes