メニュー
Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/seflless/dot-agents --skill editframe-compositionコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Research what people actually say about any topic in the last 30 days. Pulls posts and engagement from Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitHub, and the web.
Render inline interactive visuals — SVG diagrams, HTML widgets, charts, and explainers — directly in the conversation. Use this skill whenever the user asks to visualize, diagram, chart, illustrate, or explain something visually, or when an explanation would genuinely benefit from a spatial/interactive diagram rather than text. Also triggers for: flowcharts, architecture diagrams, data visualizations, interactive explainers, comparison layouts, UI mockups, and any request containing 'show me', 'draw', 'map out', 'visualize', or 'diagram'. Even when the user doesn't explicitly ask for a visual, use this skill proactively when the topic has spatial, sequential, or systemic relationships that a diagram would clarify better than prose.
SKILL.md を表示中
| name | editframe-composition |
| title | Video Composition |
| description | Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering. |
| order | 10 |
| license | MIT |
| metadata | {"author":"editframe","version":"2.0"} |
Build video compositions 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.
1. HTML or React?
TimelineRoot wrapper (see references/timeline-root.md)2. What's the core structure?
Every composition is a tree of ef-timegroup containers. Pick a mode:
mode="sequence" — children play one after another (scenes)mode="fixed" — children play simultaneously for a set durationmode="contain" — expands to fit children3. What does the user need?
| Need | Reference |
|---|---|
| Arrange clips in sequence | timegroup, sequencing |
| Animate text | text, css-variables |
| Video/audio/image | video, audio, image |
| Per-frame canvas animation | scripting |
| Scene transitions | transitions |
| Captions/subtitles | captions |
| Export to MP4 | render-to-video or use editframe-cli |
| Cloud rendering | render-api |
The single gate: Does the composition have explicit dimensions (w-[1920px] h-[1080px] or equivalent) on the root timegroup? If not, the renderer has nothing to frame against — add them before anything else.
<ef-configuration api-host="..." media-engine="local">
<ef-timegroup mode="sequence" overlap="1s">
<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
split="word"
class="absolute top-8 left-8 text-white text-4xl font-bold"
style="animation: 0.6s slide-up both; animation-delay: calc(var(--ef-word-index) * 80ms)"
>Opening 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>
<style>
@keyframes slide-up {
from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
import { Timegroup, Video, Text, Audio } from "@editframe/react";
export const MyVideo = () => (
<Timegroup mode="sequence" overlap="1s" 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
split="word"
className="absolute top-8 left-8 text-white text-4xl font-bold"
style={{ animation: "0.6s slide-up both", animationDelay: "calc(var(--ef-word-index) * 80ms)" }}
>Opening 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>
);
@keyframes slide-up {
from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
React requires a TimelineRoot wrapper — see references/timeline-root.md.
5s (seconds) | 1000ms (milliseconds) | 2m (minutes)
Create a project: npm create @editframe (see the editframe-create skill)
Motion is how compositions become video rather than presentations. These are the primary tools.
--ef-stagger-offset--ef-progress, --ef-duration, time-driven CSSaddFrameTask for per-frame canvas and procedural animationSee the editframe-cli skill for CLI rendering.
Elements use standard CSS/Tailwind. Position with absolute, size with w-full h-full or size-full.
SOC 職業分類に基づく