Agent skill

Editframe API

JavaScript/TypeScript SDK for Editframe's video rendering API.

Install Editframe API

skills CLI

$ npx skills add shadcn-labs/framecn --skill editframe-api -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install shadcn-labs/framecn editframe-api --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/editframe-api .claude/skills/editframe-api && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "editframe-api" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api into .claude/skills/editframe-api/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editframe-api", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add shadcn-labs/framecn --skill editframe-api -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install shadcn-labs/framecn editframe-api --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/editframe-api .agents/skills/editframe-api && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "editframe-api" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api into .agents/skills/editframe-api/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editframe-api", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add shadcn-labs/framecn --skill editframe-api -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install shadcn-labs/framecn editframe-api --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/editframe-api .cursor/skills/editframe-api && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "editframe-api" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api into .cursor/skills/editframe-api/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editframe-api", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/shadcn-labs/framecn.git --path .agents/skills/editframe-api

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add shadcn-labs/framecn --skill editframe-api -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install shadcn-labs/framecn editframe-api --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/editframe-api .gemini/skills/editframe-api && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "editframe-api" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api into .gemini/skills/editframe-api/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editframe-api", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install shadcn-labs/framecn editframe-api

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add shadcn-labs/framecn --skill editframe-api -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/editframe-api .github/skills/editframe-api && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "editframe-api" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api into .github/skills/editframe-api/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editframe-api", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add shadcn-labs/framecn --skill editframe-api -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install shadcn-labs/framecn editframe-api --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/editframe-api .opencode/skills/editframe-api && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "editframe-api" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/editframe-api into .opencode/skills/editframe-api/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editframe-api", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: editframe-api
GitHub stars: 150
Token cost: ~1.2k tokens
SKILL.md length: 381 words
Files: 11 (incl. references)
Skills in repo: 8
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

JavaScript/TypeScript SDK for Editframe's video rendering API.

Tasks that involve Video production
SKILL.md covers Quick Start, Function Index, Unified Files API and Using Files in Compositions, plus 1 more section
Reaches assets.editframe.com and editframe.com; needs EDITFRAME_API_KEY

What it does

Editframe API is an agent skill from shadcn-labs/framecn. JavaScript/TypeScript SDK for Editframe's video rendering API. Create renders, upload video and image files, manage assets, and sign URLs for playback.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including reference files (for example `references/authentication.md`, `references/caption-files.md` and `references/files.md`).

It sits in Media & Creative, covering Video production. It works with JavaScript and TypeScript. The repository describes itself as: Beautiful video components, built on Editframe. 100% Free, Zero config, one command setup. The licence is MIT.

When your agent uses it

Tasks that involve Video production

Example prompts

“/editframe-api”

Requirements

Node.js
A credential in EDITFRAME_API_KEY

What it can do on your machine

Read from SKILL.md and the folder at commit 7717708. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- assets.editframe.com
- editframe.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
- EDITFRAME_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Editframe API loads about 1.2k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 41 tokens; SKILL.md has 381 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~41
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~12k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from shadcn-labs/framecn at commit 7717708, republished under its MIT licence (© shadcn-labs). 381 words, ~1,248 tokens.

Download SKILL.mdSave it as .claude/skills/editframe-api/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.

name: editframe-api
description: JavaScript/TypeScript SDK for Editframe's video rendering API. Create renders, upload video and image files, manage assets, and sign URLs for playback.
license: MIT
metadata.author: editframe
metadata.version: 2.0

Editframe API

JavaScript/TypeScript client for Editframe's video rendering API. Render videos from HTML compositions, upload and process media files, and manage authenticated access to CDN resources.

Quick Start

typescript

import { Client, createRender, getRenderProgress, downloadRender } from "@editframe/api";

// Initialize client with API key
const client = new Client(process.env.EDITFRAME_API_KEY);

// Create a render from HTML composition
const render = await createRender(client, {
  html: `<ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4"></ef-video>
  </ef-timegroup>`,
  width: 1920,
  height: 1080,
  fps: 30,
});

// Poll for completion
for await (const event of await getRenderProgress(client, render.id)) {
  console.log(`Progress: ${event.progress}%`);
}

// Download the result
const response = await downloadRender(client, render.id);
const buffer = await response.arrayBuffer();

Function Index

Renders

createRender(client, payload) → CreateRenderResult — Create a render job from HTML composition
uploadRender(client, renderId, fileStream) → Promise<void> — Upload pre-rendered video file
getRenderProgress(client, id) → CompletionIterator — Stream render progress via SSE
getRenderInfo(client, id) → LookupRenderByMd5Result — Get render metadata
lookupRenderByMd5(client, md5) → LookupRenderByMd5Result | null — Find existing render by hash
downloadRender(client, id) → Response — Download completed render

Files (Unified API)

createFile(client, payload) → CreateFileResult — Register a file (video, image, or caption)
uploadFile(client, uploadDetails, fileStream) → IteratorWithPromise<UploadChunkEvent> — Upload file content with progress
getFileDetail(client, id) → FileDetail — Get file metadata and tracks
lookupFileByMd5(client, md5) → LookupFileByMd5Result | null — Find existing file by hash
deleteFile(client, id) → { success: boolean } — Delete a file
getFileProcessingProgress(client, id) → ProgressIterator — Stream processing progress for video files
transcribeFile(client, id, options?) → TranscribeFileResult — Start audio transcription
getFileTranscription(client, id) → FileTranscriptionResult | null — Get transcription status

Node.js Helpers

upload(client, filePath) → { file, uploadIterator } — Upload a file from disk (auto-detects type)

URL Signing

createURLToken(client, url) → string — Generate signed JWT for browser access to media endpoints

Unified Files API

All file types (video, image, caption) use a single set of endpoints:

Endpoint	Method	Purpose
/api/v1/files	POST	Create file record
/api/v1/files/:id	GET	Get file detail
/api/v1/files/:id/upload	GET/POST	Check upload status or upload chunk
/api/v1/files/:id/delete	POST	Delete file
/api/v1/files/:id/index	GET	Get fragment index (video only)
/api/v1/files/:id/tracks/:trackId	GET	Get track data (video only)
/api/v1/files/:id/transcribe	POST	Start transcription (video only)
/api/v1/files/:id/transcription	GET	Get transcription status
/api/v1/files/:id/progress	GET	Stream processing progress (SSE)
/api/v1/files/md5/:md5	GET	Lookup file by MD5 hash

The file type field determines processing behavior:

"video" — uploaded files are automatically processed to ISOBMFF format
"image" — uploaded files are immediately ready
"caption" — uploaded files are immediately ready

Show full SKILL.md (101 more words)Show less

Using Files in Compositions

Reference uploaded files using the file-id attribute:

html

<ef-configuration api-host="https://editframe.com">
  <ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
    <ef-video file-id="uuid-of-processed-video"></ef-video>
    <ef-image file-id="uuid-of-uploaded-image" class="w-24 h-24"></ef-image>
  </ef-timegroup>
</ef-configuration>

The file-id is a stable UUID assigned at file creation time and remains the same throughout upload, processing, and playback.

URL Signing

If your application renders Editframe compositions in a browser, you need URL signing. The browser needs authenticated access to transcode endpoints, but cannot hold your API key.

URL signing creates short-lived, scoped tokens that authorize the browser to access specific media URLs. Set up a server route that calls createURLToken, then configure <ef-configuration signingURL="/your-route"> in your frontend.

See references/url-signing.md for implementation details and integration with elements-composition and react-composition.

Files

SKILL.md and 10 other files (references) in .agents/skills/editframe-api of shadcn-labs/framecn.

SKILL.md
references/authentication.md
references/caption-files.md
references/files.md
references/getting-started.md
references/image-files.md
references/media-pipeline.md
references/renders.md
references/transcription.md
references/unprocessed-files.md
references/url-signing.md

Open the folder on GitHubat commit 7717708

Compare with similar skills

Editframe API next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Editframe API compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Editframe API this skillshadcn-labs/framecn	150	—	~1.2k	Automated safety check: Pass	MIT	today
Anything2explainerVincentwei1021/anything2explainer	2.3k	—	~2.7k	Automated safety check: Pass	Custom licence	19 days ago
Remotion Motion Graphicshaidrrrry/claude-remotion-skill	277	—	~2k	Automated safety check: Pass	MIT	1 mo ago
Explainroovincentsch/explainroo	489	—	~439	Automated safety check: Pass	MIT	3 days ago
Remotion Render via inference.shHainrixz/editor-pro-max	261	2 repos	~2k	Automated safety check: Pass	Custom licence	6 mo ago
Ffmpeg MixingvargHQ/sdk	341	—	~676	Automated safety check: Pass	MIT	6 days ago

Similar skills

Anything2explainer
Vincentwei1021/anything2explainer
给一个主题，产出一条黑底 MG 风格（幕底可选星点或点阵波）、有配音字幕章节进度条的科普讲解视频（中文或英文；Remotion 代码动画；时长由用户定，常用 3–5 分钟）。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据，以及一条完整样片（《RAG 与知识库》）作为质量标尺。Turn any topic into a narrated…
2.3k GitHub stars~2.7k tokensUpdated 19 days ago
Media & CreativeAuto-check passed
Remotion Motion Graphics
haidrrrry/claude-remotion-skill
Create and edit professional motion graphics videos with Remotion (React-based video).
277 GitHub stars~2k tokensUpdated 1 mo ago
Media & CreativeAuto-check passed
Explainroo
vincentsch/explainroo
Make an explainer video (MP4) with a voice-over using explainroo.
489 GitHub stars~439 tokensUpdated 3 days ago
Media & CreativeAuto-check passed
Remotion Render via inference.sh
Hainrixz/editor-pro-max
Renders MP4 videos from React and Remotion TSX code through the inference.sh CLI, with settings for resolution, frame rate, duration and codec.
261 GitHub starsUsed in 2 repos~2k tokens
Media & CreativeAuto-check passed
Ffmpeg Mixing
vargHQ/sdk
Mix, trim, and concatenate video clips with ffmpeg without audio/video desync.
341 GitHub stars~676 tokensUpdated 6 days ago
Media & CreativeAuto-check passed
Deprecate API
remotion-dev/remotion
Official
Reference for how deprecation of public Remotion APIs is represented in TypeScript source and documentation.
62k GitHub stars~529 tokensUpdated today
Media & CreativeAuto-check passed

Questions about Editframe API

What does Editframe API do?

JavaScript/TypeScript SDK for Editframe's video rendering API. Editframe API is an agent skill from shadcn-labs/framecn. JavaScript/TypeScript SDK for Editframe's video rendering API.

When should I use Editframe API?

Editframe API fits situations like: tasks that involve Video production.

How do I install Editframe API in Claude Code?

Run `npx skills add shadcn-labs/framecn --skill editframe-api -a claude-code`. Or copy the skill folder (.agents/skills/editframe-api in shadcn-labs/framecn) into .claude/skills/editframe-api in your project. Claude Code loads it when a task matches its description.

How do I install Editframe API in Codex?

Run `npx skills add shadcn-labs/framecn --skill editframe-api -a codex`. Or copy the skill folder (.agents/skills/editframe-api in shadcn-labs/framecn) into .agents/skills/editframe-api in your project. Codex loads it when a task matches its description.

Can I use Editframe API in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shadcn-labs/framecn --skill editframe-api -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/editframe-api, .gemini/skills/editframe-api, .github/skills/editframe-api and .opencode/skills/editframe-api in your project.

What does Editframe API need to run?

Going by SKILL.md and its folder, Editframe API needs credentials named EDITFRAME_API_KEY. Our summary lists: Node.js; A credential in EDITFRAME_API_KEY.

Does Editframe API access the network?

SKILL.md names 2 domains. In commands or code: assets.editframe.com and editframe.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Editframe API safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Editframe API use?

Editframe API is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Editframe API use?

About 1.2k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.

What are the alternatives to Editframe API?

Skills that share tags, products or a category with Editframe API: Anything2explainer (Vincentwei1021/anything2explainer, 2.3k stars), Remotion Motion Graphics (haidrrrry/claude-remotion-skill, 277 stars), Explainroo (vincentsch/explainroo, 489 stars) and Remotion Render via inference.sh (Hainrixz/editor-pro-max, 261 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Editframe API?

shadcn-labs (a GitHub organization) maintains it in shadcn-labs/framecn, which has 150 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 7, 2026.

Source: shadcn-labs/framecn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Editframe API

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Editframe API

Quick Start

Function Index

Renders

Files (Unified API)

Node.js Helpers

URL Signing

Unified Files API

Using Files in Compositions

URL Signing

Files

Compare with similar skills

Similar skills

More from shadcn-labs/framecn

Related

Questions about Editframe API