← ClaudeAtlas

hyperframes-keyframeslisted

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.
jpratt9/dotfiles · ★ 1 · Code & Development · score 64
Install: claude install-skill jpratt9/dotfiles
# 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 lint, validate, `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. ## Runtime Rules GS