Featured

A live, always-on OpenClaw agent that handles your tasks around the clock. No servers, no setup — pick a model, connect Telegram, and it starts working.

Try it for free →

SetupClaw: done-for-you OpenClaw for founders & exec teams

White-glove OpenClaw for founders and exec teams (4–50+ employees): we install, harden, integrate your tools, and maintain it — secured from day one.

Get it set up for you →

One API to scrape, enrich, and extract the internet.

Context.dev gives your agents a single API to scrape, enrich, and extract live web data — no proxies, no parsers, no maintenance.

Start building free →

CLN.Work — Stop prompting, start hiring AI employees

Turn your Claude agents into a real team — onboard them, assign tasks, and manage them like staff.

Hire AI employees →

Keep your OpenClaw agent online 24/7

Your OpenClaw or Hermes agent, live around the clock on a Hostinger VPS. Set up in about 60 seconds, from a few dollars a month, with 20% off through this link.

Get hosting →

Launch your AI product and start charging today

Auth, billing, and AI already wired in. Skip months of boilerplate and get paying customers now, not next quarter.

See the kit →

Launch your own AI agent in one click

A live, always-on OpenClaw agent that handles your tasks around the clock. No servers, no setup — pick a model, connect Telegram, and it starts working.

Try it for free →

SetupClaw: done-for-you OpenClaw for founders & exec teams

White-glove OpenClaw for founders and exec teams (4–50+ employees): we install, harden, integrate your tools, and maintain it — secured from day one.

Get it set up for you →

One API to scrape, enrich, and extract the internet.

Context.dev gives your agents a single API to scrape, enrich, and extract live web data — no proxies, no parsers, no maintenance.

Start building free →

CLN.Work — Stop prompting, start hiring AI employees

Turn your Claude agents into a real team — onboard them, assign tasks, and manage them like staff.

Hire AI employees →

Keep your OpenClaw agent online 24/7

Your OpenClaw or Hermes agent, live around the clock on a Hostinger VPS. Set up in about 60 seconds, from a few dollars a month, with 20% off through this link.

Get hosting →

Launch your AI product and start charging today

Auth, billing, and AI already wired in. Skip months of boilerplate and get paying customers now, not next quarter.

See the kit →

figma

heygen-com/hyperframes

3K installs33K stars

Installation

npx skills add https://github.com/heygen-com/hyperframes --skill figma

Summary

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, and Figma Motion animations — via the Figma MCP connector. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

SKILL.md

Figma → HyperFrames

Bring the user's Figma work into a composition. MCP-first: you (the agent) call the Figma MCP tools, then hand their output to the pure helpers in @hyperframes/core/figma, freezing every asset locally so renders stay deterministic.

Auth

Requires the Figma MCP connector (one-click OAuth). If tools error unauthenticated, tell the user to connect Figma and stop.

Routing

Parse the user's figma link with parseFigmaRef. Then by intent:

"use this layer / logo / image" → Asset import
"import this animation / motion" → Motion import
brand tokens / components → not in this skill version (see the design spec roadmap).

Asset import

get_metadata(fileKey, nodeId) → confirm the node, capture width/height.
Export it: download_assets (or node image export) for PNG; prefer SVG for vectors.
Freeze: write the bytes with freezeBytes(bytes, join(typeDirPath(projectDir,"image"), id + ext)) where id = nextId(projectDir,"image").
Ledger: appendRecord(projectDir, { id, type:"image", path, source:"figma", width, height, provenance:{ source:"figma", fileKey, nodeId, format } }).
Emit buildAssetSnippet(record).html into the composition. Re-import guard: findByFigmaNode before re-fetching.

Motion import

get_motion_context(fileKey, nodeId) → read the codeSnippets.motionDev (and .css).
Normalize it into a MotionDoc: for each animated property build a MotionTrack { property (motion.dev name), values, times (0..1), ease[] (named strings or [x1,y1,x2,y2] bezier arrays), duration, repeat }. Selector = the target element's stable id (#<id> from the component's data-figma-id/id).
const spec = motionToGsap(doc);
const script = emitTimelineScript(spec); → inject as a <script> in the composition (after the GSAP + CustomEase CDN tags). The timeline is paused, finite, registered on window.__timelines.
If a track uses shader/spring/effect props with no GSAP mapping, bake instead: export_video → freeze MP4 → embed as <video class="clip">. Say which path you used.