Skip to content

docs: add runtime adapter skills#572

Open
miguel-heygen wants to merge 2 commits intomainfrom
docs/runtime-adapter-skills
Open

docs: add runtime adapter skills#572
miguel-heygen wants to merge 2 commits intomainfrom
docs/runtime-adapter-skills

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

@miguel-heygen miguel-heygen commented Apr 29, 2026

Problem

HyperFrames now ships first-party runtime adapters beyond GSAP, but the installed skill set still only taught the general composition workflow plus GSAP. Agents using Anime.js, CSS keyframes, Lottie, Three.js, or WAAPI had to infer the HyperFrames-specific seek/registration contract from code or generic upstream docs.

What this fixes

  • Adds adapter-specific skills for:
    • animejs
    • css-animations
    • lottie
    • three
    • waapi
  • Updates the existing gsap skill with the HyperFrames paused timeline registration contract and finite-loop guidance.
  • Adds credits and source links inside the skills for the relevant adapter source files, official upstream docs, and surveyed public skills where applicable.
  • Updates README, quickstart, CLI docs, plugin metadata, and generated project Claude guidance so agents can discover the new slash commands.
  • Updates the frame-adapters docs table so the first-party runtime list matches the actual adapter set in packages/core/src/runtime/adapters.

Root cause

The runtime had grown to support animejs, css, gsap, lottie, three, and waapi, but the skill packaging and public docs still described a mostly GSAP-centered authoring model. That left agents without the HyperFrames-specific details that matter for deterministic rendering: paused playback, exact registration globals, seek units, local assets, and avoiding wall-clock loops.

@mintlify
Copy link
Copy Markdown

mintlify Bot commented Apr 29, 2026

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
hyperframes 🟢 Ready View Preview Apr 29, 2026, 11:44 PM

💡 Tip: Enable Workflows to automatically generate PRs for you.

Copy link
Copy Markdown
Collaborator

@jrusso1020 jrusso1020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed as a staff engineer through the lens of the skill-creator best practices, and cross-checked each skill claim against the actual adapter source on this branch.

Overall: ship-with-nits.

The skills are factually accurate, triggers are well-tuned, sizes are well under the 500-line skill-creator guideline, and the docs alignment fixes a real footgun (the old frame-adapters.mdx listed timeline.seek(frame / fps); the adapter actually calls timeline.totalTime(timeSeconds) per packages/core/src/runtime/adapters/gsap.ts:17). Zero runtime code touched, low blast radius.

Correctness check (skill claim → code)

Claim Source Verdict
anime.js: seek(timeMs), register on window.__hfAnime animejs.ts:70-83
css: discovers via computed animation-name; falls back to negative animation-delay when WAAPI handles missing css.ts:76-101
lottie: goToAndStop(timeMs, false) for lottie-web; raw-frame or % for dotLottie lottie.ts:89-107
three: dispatches hf-seek, sets window.__hfThreeTime three.ts:13-15
waapi: document.getAnimations(), sets currentTime, then pauses waapi.ts:8-21
gsap: registry key must equal composition root's data-composition-id timeline.ts:410-413

No factual bugs.

Nits (inline comments above)

Pre-merge (2-line fixes):

  1. Drop the "Public skill survey" footers in animejs and threeskill-creator says SKILL.md shouldn't carry process/provenance commentary.
  2. Rewrite gsap repeat note — "number only in HyperFrames" parses as a type. Suggest "finite number; never -1."

Follow-up:
3. Tighten three "use local assets only" — example loads three from CDN, contradicting the contract bullet. Real rule is "no remote fetches at seek time."
4. Show the registry-key ↔ data-composition-id link in the gsap example.
5. three example hard-codes 1920×1080. Note "match composition frame size" or parameterize.
6. WAAPI example uses data-start="0", hiding the document-level-time gotcha the skill warns about. Bump to data-start="2".
7. CSS "infinite iteration count" rule is stricter than the implementation requires — Animation.currentTime handles unbounded duration; only the fallback path is constrained.
8. Plugin keyword is threejs but the skill name and slash command are three. Pick one.

What's working well (worth keeping)

  • The WAAPI "clip-local start time is not automatic" warning is the single most non-obvious gotcha in this set, and it's stated clearly.
  • Frontmatter description triggers cover frameworks, APIs, registry globals, and file types — good discovery surface.
  • Adapter source paths in Credits make claims verifiable.
  • All five skills consistently encode the three invariants the adapters actually require: synchronous init, autoplay: false, finite loops.

None of the nits are blocking — happy to see this land after #1 and #2.

Comment thread skills/animejs/SKILL.md Outdated
Comment thread skills/three/SKILL.md Outdated
Comment thread skills/gsap/SKILL.md Outdated
Comment thread skills/gsap/SKILL.md Outdated
Comment thread skills/three/SKILL.md
Comment thread skills/three/SKILL.md
Comment thread skills/waapi/SKILL.md
Comment thread skills/css-animations/SKILL.md
Comment thread .codex-plugin/plugin.json
Copy link
Copy Markdown
Collaborator

@jrusso1020 jrusso1020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All 8 nits from the prior review are addressed in 7799b3a. Skills remain factually correct against the adapter source. Approving — nice turnaround.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants