Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/heygen-com/hyperframes/figmanpx skills add heygen-com/hyperframes --skill figmagit clone --depth 1 https://github.com/heygen-com/hyperframesWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00089 | $0.04069 |
| Opus 5 | $0.00044 | $0.02034 |
| Sonnet 5 | $0.00018 | $0.00814 |
| Haiku 4.5 | $0.00009 | $0.00407 |
Grade A, and why
figma scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 133 lines — stays where its author put it; the contents beside it link to each section on GitHub.
First, keep this skill fresh — confirm with the user before running:
npx hyperframes skills update figma. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
Figma → HyperFrames
Bring the user's Figma work into a composition. Split by capability (design spec §2):
| Phase | What | Transport | Surface |
|---|---|---|---|
| 1 | Static assets | REST | hyperframes figma asset |
| 2 | Brand tokens/styles | REST | hyperframes figma tokens |
| 3 | Components → HTML | REST | hyperframes figma component |
| 4 | Motion → GSAP | connector when available | use its motion context |
| 5 | Shaders | connector / manual export | use it or a native export |
REST is used wherever it can be (usable at volume, headless). A compatible Figma connector is optional for motion and shader data; without one, ask for a native export. Every path freezes assets locally so renders stay deterministic. Storyboard reconstructions compose Phase-1 asset exports (REST) with agent-driven timeline assembly — no connector needed. Existing frozen assets, manifest records, and bindings are unaffected by routing changes — the split only changes which credential the next import uses.
Auth — two credentials, scoped
Preflight — before the first CLI call, check a token exists: shell env ([ -n "$FIGMA_TOKEN" ]) or the project .env (the CLI auto-loads it — a .env entry counts as configured). If neither, do NOT run the command to harvest the error — walk the user through the one-time setup first, then stop and wait:
- figma.com/settings → Security → Personal access tokens → Generate new token.
- Scopes — read-only is all this integration ever needs (it never writes to Figma): File content: Read-only + File metadata: Read-only. Add Library content: Read-only if you'll run
tokenson a non-Enterprise plan — the published-styles fallback hits/v1/files/:key/styles, which 403s without it (a scope the older setup text omitted). Optionally Variables: Read-only for brand variables — Enterprise-only; without ittokensdegrades to published styles automatically (expected, not an error — say so). A 403 now names the exact missing scope; 429s retry automatically (per-minute limit, honorsRetry-After). - Have the user set
FIGMA_TOKENin their shell profile or project.env; never ask them to paste the token into the conversation.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 133 lines · 89 tokens per session scan A dea209625506
figma is a skill published in the GitHub repository heygen-com/hyperframes (43,141 stars, last pushed 2d ago), licensed Apache-2.0. It adds 89 tokens to every session and 4,069 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
rebuild-site
Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it. Use when the user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout, sections, copy, design system, and scroll animations. Orchestrates analyze (measured…
recreate
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG. Use after /motiscope:analyze, or when the user asks to "build/recreate this animation in ". Reads the motiscope animation spec and emits a runnable component.
motiscope-analyze
Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code. Use when the user drops or points at a video of an animation (.mp4/.mov/.webm/.mkv/.m4v/.avi/.gif) and says things like "I want this animation on my site", "recreate…
motiscope-rebuild-site
Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it. Use when the user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout, sections, copy, design system, and scroll animations. Orchestrates analyze (measured…
motiscope-recreate
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG. Use after motiscope-analyze, or when the user asks to "build/recreate this animation in ". Reads the motiscope animation spec and emits a runnable component.