Agent skill

Composition

by shadcn-labs in shadcn-labs/framecn

Create video compositions with Editframe using HTML web components or React.

MITAuto-check passedMedia & Creative

Install Composition

skills CLI
$ npx skills add shadcn-labs/framecn --skill composition -a claude-code

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

GitHub CLI
$ gh skill install shadcn-labs/framecn composition --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/composition .claude/skills/composition && 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/

Facts

Skill name
composition
GitHub stars
150
Token cost
~1.1k tokens
SKILL.md length
219 words
Files
30 (incl. references)
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Create video compositions with Editframe using HTML web components or React.

  • Tasks that involve Transcription
  • SKILL.md covers Quick Start, Duration Units, Getting Started and Media Elements, plus 5 more sections
  • Calls npm

What it does

Composition is an agent skill from shadcn-labs/framecn. Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 30 other files, including reference files (for example `references/audio.md`, `references/captions.md` and `references/composition-model.md`).

It sits in Media & Creative, covering Transcription. It works with React. 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 Transcription

Example prompts

  • “/composition”

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

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Composition loads about 1.1k tokens when it runs, and up to ~78k if it reads all its reference files. Until then it costs about 42 tokens; SKILL.md has 219 words of instructions outside code blocks.

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

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). 219 words, ~1,143 tokens.

Download SKILL.mdSave it as .claude/skills/composition/SKILL.md (or your agent's skills folder). This skill also uses 29 other files; get the full folder from GitHub.
name
composition
description
Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.
license
MIT
metadata.author
editframe
metadata.version
2.0

Video Composition

Build video scenes with HTML web components (<ef-timegroup>, <ef-video>, etc.) or React (<Timegroup>, <Video>, etc.). Same composition model, same rendering pipeline — pick the syntax that fits your project.

Web component attributes use kebab-case (sourcein, auto-init). React props use camelCase (sourceIn, autoInit). Each element reference documents both.

Quick Start

html
<ef-configuration api-host="..." media-engine="local">
  <ef-timegroup mode="sequence">
    <ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full">
      <ef-video src="intro.mp4" class="size-full object-cover"></ef-video>
      <ef-text class="absolute top-8 text-white text-3xl">Title</ef-text>
    </ef-timegroup>
    <ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full">
      <ef-video src="main.mp4" sourcein="10s" sourceout="15s" class="size-full"></ef-video>
      <ef-audio src="music.mp3" volume="0.3"></ef-audio>
    </ef-timegroup>
  </ef-timegroup>
</ef-configuration>
tsx
import { Timegroup, Video, Text, Audio } from "@editframe/react";

export const MyVideo = () => (
  <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
    <Timegroup mode="fixed" duration="5s" className="absolute w-full h-full">
      <Video src="intro.mp4" className="size-full object-cover" />
      <Text className="absolute top-8 text-white text-3xl">Title</Text>
    </Timegroup>
    <Timegroup mode="fixed" duration="5s" className="absolute w-full h-full">
      <Video src="main.mp4" sourceIn="10s" sourceOut="15s" className="size-full" />
      <Audio src="music.mp3" volume={0.3} />
    </Timegroup>
  </Timegroup>
);

React requires a TimelineRoot wrapper — see references/timeline-root.md.

Duration Units

5s (seconds) | 1000ms (milliseconds) | 2m (minutes)

Getting Started

Create a project: npm create @editframe (see the editframe-create skill)

Media Elements

Layout & Timing

Rendering

See the editframe-cli skill for CLI rendering.

React

Advanced

Styling

Elements use standard CSS/Tailwind. Position with absolute, size with w-full h-full or size-full.

© shadcn-labs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 29 other files (references) in .agents/skills/composition of shadcn-labs/framecn.

  • SKILL.md
  • references/audio.md
  • references/captions.md
  • references/composition-model.md
  • references/configuration.md
  • references/css-parts.md
  • references/css-variables.md
  • references/entry-points.md
  • references/events.md
  • references/getting-started.md
  • references/hooks.md
  • references/image.md
  • references/r3f.md
  • references/render-api.md
  • references/render-strategies.md
  • references/render-to-video.md
  • references/scripting.md
  • references/sequencing.md
  • references/server-rendering.md
  • references/surface.md
  • … and 10 more

Open the folder on GitHubat commit 7717708

Compare with similar skills

Composition 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.

Composition compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Composition this skillshadcn-labs/framecn150—~1.1kAutomated safety check: PassMIT
Telnyx Meeting Botteam-telnyx/ai220—~7.4kAutomated safety check: PassMIT
Anything2explainerVincentwei1021/anything2explainer2.3k—~2.7kAutomated safety check: PassCustom licence
Edit Timeline StudioMartinDelophy/ai-video-editor896—~7kAutomated safety check: PassMIT
Edit Timeline Studio BrowserMartinDelophy/ai-video-editor896—~2.6kAutomated safety check: PassMIT
Nekocap Runtime Cautionsnopol10/nekocap105—~1.4kAutomated safety check: PassGPL-3.0

Similar skills

  • Telnyx Meeting Bot

    team-telnyx/ai

    A skill your agent uses when an agent must join, observe, react in, transcribe, summarize, or follow up on a Zoom, Google Meet, Microsoft Teams, or Webex meeting with Telnyx Meeting Bot.

    220 GitHub stars~7.4k tokensUpdated 3 days ago
    Media & CreativeAuto-check passed
  • Anything2explainer

    Vincentwei1021/anything2explainer

    给一个主题,产出一条黑底 MG 风格(幕底可选星点或点阵波)、有配音字幕章节进度条的科普讲解视频(中文或英文;Remotion 代码动画;时长由用户定,常用 3–5 分钟)。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据,以及一条完整样片(《RAG 与知识库》)作为质量标尺。Turn any topic into a narrated…

    2.3k GitHub stars~2.7k tokensUpdated 20 days ago
    Media & CreativeAuto-check passed
  • Edit Timeline Studio

    MartinDelophy/ai-video-editor

    Analyze images, video, speech, motion, products, and websites; route local vision, audio, depth, tracking, matting, identity, and restoration models; auto-edit, replicate, enhance, caption, voice…

    896 GitHub stars~7k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Edit Timeline Studio Browser

    MartinDelophy/ai-video-editor

    Use native WebMCP tools to edit the project open in Timeline Studio.

    896 GitHub stars~2.6k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • A skill your agent uses when working on Next.js routing/middleware, error handling, Sentry/logging, user-facing notifications, performance-sensitive paths (Octopus subtitle renderer, large lists…

    105 GitHub stars~1.4k tokensUpdated 5 days ago
    Media & CreativeAuto-check passed
  • Remotion Best Practices

    guanyang/open-agent-hub

    Best practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to MP4).

    975 GitHub stars~3.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed

More from shadcn-labs/framecn

All 8 skills in this repo
  • Launch Shadcn Registry

    shadcn-labs/framecn

    Launch and promote a custom shadcn/ui registry end-to-end: validate registry.json, prepare the official shadcn-ui/ui directory PR, community directory PRs (registry.directory, shadcntemplates…

    150 GitHub stars~2.2k tokensUpdated yesterday
    Auto-check passed
  • Editframe API

    shadcn-labs/framecn

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

    150 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed
  • Editor Gui

    shadcn-labs/framecn

    Build video editing interfaces with Editframe's GUI components.

    150 GitHub stars~832 tokensUpdated yesterday
    Auto-check passed
  • Webhooks

    shadcn-labs/framecn

    Webhook notifications for render completion and file processing events.

    150 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed
  • Editframe CLI

    shadcn-labs/framecn

    Command-line tools for Editframe video development. An agent skill from shadcn-labs/framecn.

    150 GitHub stars~378 tokensUpdated yesterday
    Auto-check passed
  • Editframe Create

    shadcn-labs/framecn

    Scaffold new Editframe video projects from templates. An agent skill from shadcn-labs/framecn.

    150 GitHub stars~382 tokensUpdated yesterday
    Auto-check passed

Works with

Questions about Composition

What does Composition do?

Create video compositions with Editframe using HTML web components or React. Composition is an agent skill from shadcn-labs/framecn. Create video compositions with Editframe using HTML web components or React.

When should I use Composition?

Composition fits situations like: tasks that involve Transcription.

How do I install Composition in Claude Code?

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

How do I install Composition in Codex?

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

Can I use Composition 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 composition -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/composition, .gemini/skills/composition, .github/skills/composition and .opencode/skills/composition in your project.

What does Composition need to run?

Going by SKILL.md and its folder, Composition needs the command-line tools its instructions call (npm).

Does Composition access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Composition 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 Composition use?

Composition 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 Composition use?

About 1.1k tokens (SKILL.md is roughly 4.6k 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 77k tokens, read only when the agent opens those files.

What are the alternatives to Composition?

Skills that share tags, products or a category with Composition: Telnyx Meeting Bot (team-telnyx/ai, 220 stars), Anything2explainer (Vincentwei1021/anything2explainer, 2.3k stars), Edit Timeline Studio (MartinDelophy/ai-video-editor, 896 stars) and Edit Timeline Studio Browser (MartinDelophy/ai-video-editor, 896 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Composition?

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.