hyperframes-core

An agent skill by heygen-com, from heygen-com/hyperframes. Tags: automation, design, developer-tools, documents.

What it does

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add heygen-com/hyperframes --skill hyperframes-core

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/heygen-com/hyperframes
cp -r hyperframes/skills/hyperframes-core ~/.claude/skills/hyperframes-core

Safety box score

Grade B, low risk: 19 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill is a documentation-only authoring contract for HyperFrames compositions: it mostly tells an agent how to structure HTML, timing attributes, and validation/render commands. The main risks are that it invokes `npx hyperframes` tooling and that some example compositions depend on remote CDN assets, so installing it can still lead to executable/tooling and network exposure.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It explicitly directs the agent to run tooling via `npx hyperframes` (for `timeline`, `check`, `snapshot`, `preview`, and `render`), which executes package code as part of the workflow.
Network access	1 (low)	The examples include remote asset loading such as `https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js`, and `npx hyperframes` may also contact the npm registry if the package is not already installed.
Filesystem reach	1 (low)	The skill is designed to create and edit project HTML files (`index.html`, `compositions/*.html`) and related assets inside the working tree, but it does not instruct writes outside the project.
Secrets & credentials	0 (none)	It does not ask for API keys, tokens, passwords, browser sessions, or `.env` contents.
Privilege & persistence	0 (none)	There is no sudo, service registration, shell startup modification, or other privilege-escalating step in the skill.
Instruction hijack surface	1 (low)	The docs contain hidden HTML comments and embedded implementation notes (for example `<!-- Shared background — NOT a clip. Always visible. Driven by the timeline. -->`), which are invisible in rendered output even though they are not malicious instructions.
Irreversible actions	0 (none)	It does not push, deploy, publish, send messages, book anything, or otherwise act autonomously beyond local validation/rendering.
Transparency	0 (none)	All shipped files are readable markdown; there are no binaries, decoded blobs, or unreviewable installers in the skill bundle.

Before installing

Check whether you are comfortable with `npx hyperframes` running project tooling and possibly resolving from npm.
Open `references/minimal-composition.md` and decide if the CDN-loaded GSAP example is acceptable for your environment.
If you need offline or locked-down renders, confirm you will replace remote scripts with local/pinned assets before using the skill.

Rated 2026-10-19 by an automated review of 11 files from the skill's repository.

Source

Repository: heygen-com/hyperframes (all skills from this repository)
Path: skills/hyperframes-core/SKILL.md
Branch: main
Updated: 2026-09-19

stitch::extract-static-html — Extract self-contained static HTML from a built web application or React components by inlining CSS and images.
stitch::manage-design-system — Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
changelog-video — Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations.
seam-craft — Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
book-to-skill — Converts books and documents (PDF, EPUB, DOCX, HTML, Markdown, plain text, RTF, MOBI/AZW with Calibre) into structured agent skills, extracting frameworks.