Agent skill

Vid Motion Graphics

by Varnan-Tech in Varnan-Tech/opendirectory

Generates motion graphics videos (MP4) from a content brief.

MITAuto-check passedMedia & Creative

Install Vid Motion Graphics

skills CLI
$ npx skills add Varnan-Tech/opendirectory --skill vid-motion-graphics -a claude-code

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

GitHub CLI
$ gh skill install Varnan-Tech/opendirectory vid-motion-graphics --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/Varnan-Tech/opendirectory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/vid-motion-graphics .claude/skills/vid-motion-graphics && 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
vid-motion-graphics
GitHub stars
674
Token cost
~3k tokens
SKILL.md length
967 words
Files
7 (incl. scripts, references)
Skills in repo
61
Repo updated
First seen
Licence
MIT

At a glance

Generates motion graphics videos (MP4) from a content brief.

  • Works in 6 steps: Intake → Internal Architecture (never shown to… → HTML Generation → …
  • User says create a video
  • SKILL.md covers Critical Rules (read before…, Step 1: Intake, Step 2: Internal Architecture… and Step 3: HTML Generation, plus 4 more sections
  • Runs JavaScript and Shell scripts from its folder; calls bash

What it does

Vid Motion Graphics is an agent skill from Varnan-Tech/opendirectory. Generates motion graphics videos (MP4) from a content brief. Multi-scene HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. 1080×1080 default, 16:9 (1920×1080) and 9:16 (1080×1920) supported. 5 style presets. Trigger when user says "create a video", "motion graphic", "animated video", "make a reel", "create an explainer", "animated infographic", or "short video".

Its SKILL.md is about 3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including scripts and reference files (for example `README.md`, `evals/evals.json` and `references/scene-library.md`). Compatibility notes: ["claude-code","gemini-cli","github-copilot"]

It sits in Media & Creative, covering Motion graphics and Web animation and motion. It works with Playwright and FFmpeg. The repository describes itself as: AI Agent Skills built for Founders who hate Marketing. The licence is MIT.

When your agent uses it

  • User says create a video
  • Create an explainer
  • Animated infographic

Example prompts

  • “create a video”
  • “motion graphic”
  • “animated video”
  • “/vid-motion-graphics”

Requirements

  • Python 3
  • Node.js
  • A Bash shell
  • Compatibility (from SKILL.md): ["claude-code","gemini-cli","github-copilot"]

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Intake
  2. Internal Architecture (never shown to user)
  3. HTML Generation
  4. Self-QA (fix every failure before Step 5)
  5. Export
  6. Output Summary

What it can do on your machine

Read from SKILL.md and the folder at commit 62e437a. 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

    Ships 2 files in scripts/ (JavaScript and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • bash

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

  • Network

    No URLs in SKILL.md.

    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.

  • Compatibility

    ["claude-code","gemini-cli","github-copilot"]

    From compatibility in the SKILL.md frontmatter.

Context cost

Vid Motion Graphics loads about 3k tokens when it runs, and up to ~8k if it reads all its reference files. Until then it costs about 110 tokens; SKILL.md has 967 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from Varnan-Tech/opendirectory at commit 62e437a, republished under its MIT licence (© Varnan-Tech). 967 words, ~3,050 tokens.

Download SKILL.mdSave it as .claude/skills/vid-motion-graphics/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
vid-motion-graphics
description
Generates motion graphics videos (MP4) from a content brief. Multi-scene HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. 1080×1080 default, 16:9 (1920×1080) and 9:16 (1080×1920) supported. 5 style presets. Trigger when user says "create a video", "motion graphic", "animated video", "make a reel", "create an explainer", "animated infographic", or "short video".
compatibility
["claude-code","gemini-cli","github-copilot"]
author
OpenDirectory
version
1.0.0

vid-motion-graphics

Generates multi-scene motion graphics as MP4. Renders HTML/CSS animations in headless Chromium via Playwright (Web Animations API frame-seeking), assembles PNG frames with FFmpeg. No React, no AI APIs, no Python — zero new dependencies beyond the graphic-gif family.

CDN fonts only. No external libraries in HTML.


Critical Rules (read before every generation)

  1. Use window.renderFrame(t) — no CSS @keyframes for scene transitions. CSS animation currentTime seeking is silently ignored for backward seeks in Chromium. The renderFrame approach: a pure JS function computes opacity/transform directly from milliseconds. Playwright calls it once per frame. Deterministic, race-free.
  2. No animation-delay on ANY element. Not needed with renderFrame. If you catch yourself writing animation-delay, stop — you're using the wrong architecture.
  3. window.__videoReady = true only inside document.fonts.ready.then(...). Never set synchronously — fonts must load before Playwright captures frame 1 or text renders with fallback fonts.
  4. Expose window.__stopPreview(). The browser's rAF preview loop races with Playwright's evaluate/screenshot calls. capture-frames.mjs calls __stopPreview() before the frame loop. Always include it.
  5. Use t < startMs (not <=) in scene boundary checks. t <= 0 at frame 0 makes scene 1 black. The correct guard is if (t < startMs || t >= endMs) return hidden.
  6. Body = exact pixel dimensions. Width and height are integers (1080px, 1920px). No %, vw/vh, or responsive units.
  7. No two scenes visible simultaneously (except 10% enter overlap). All scenes opacity: 0 outside their renderFrame window.
  8. Transitions use opacity only. No display toggle, no visibility — GPU-composited opacity is frame-perfect.
  9. Never dump HTML in chat. Save to file, show summary only.
  10. Title states the message, not the topic. "3 Reasons Q4 Crushed Targets" not "Q4 2024 Performance Video".
  11. Read references/scene-library.md before generating ANY HTML. Use exact HTML structure and CSS class names from that file.

Step 1: Intake

Required: content_brief

Optional parameters and defaults:

ParameterDefaultDescription
content_brief—Text describing what the video communicates (required)
scenesautoNumber of scenes (1–6). Auto = derived from brief.
duration_per_scene3sDuration per scene in seconds (1–8s)
stylekinetic-darkkinetic-dark / editorial-light / data-pulse / bold-type / minimal-clean
aspect_ratio1:11:1 (1080×1080) / 16:9 (1920×1080) / 9:16 (1080×1920)
fps30Frames per second (24, 30, or 60)
musicnonePath to audio file for background track (mp3/m4a/wav)
source—Source attribution shown in final frame footer

If content_brief is missing, ask exactly:

"To create the video, I need a content brief — what should the video communicate?

Example: 'Show 3 reasons why Q4 revenue grew 85%: new enterprise deals, reduced churn, price increase. Use bold numbers. Style: data-pulse.'

Optional: style (default: kinetic-dark), aspect ratio (default: 1:1), seconds per scene (default: 3s)"

If content_brief is present → proceed to Step 2 immediately.


Step 2: Internal Architecture (never shown to user)

1. Parse brief into scenes (max 6):

  • Scene 1 = hook or title (always)
  • Scenes 2–N-1 = supporting points, metrics, or story beats
  • Scene N = CTA or closing summary (always, if more than 1 scene)
  • One key idea per scene — if brief has 7+ ideas, consolidate the weakest ones

2. Read references/scene-library.md — choose scene type for each scene:

  • Hook/opening → title-card
  • Single metric → stat-reveal
  • List of 2–4 points → bullet-list
  • Before vs after / two values → split-screen
  • Testimonial / quote → quote-card
  • Final / CTA → cta-card

3. Read references/style-presets.md — load CSS tokens + animation personality for chosen style.

4. Calculate timing:

totalDuration = sceneCount × duration_per_scene  (seconds)
totalFrames   = totalDuration × fps

Each scene occupies (100 / sceneCount)% of the total @keyframes range.

SceneStart %End %
10%(100/N)%
2(100/N)%(200/N)%
………
N((N-1)×100/N)%100%

Within each scene's range:

  • Enter: first 10% of scene range
  • Hold: 10% to 85% of scene range
  • Exit: 85% to 100% of scene range

5. Determine pixel dimensions:

  • 1:1 → W=1080, H=1080
  • 16:9 → W=1920, H=1080
  • 9:16 → W=1080, H=1920

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

Step 3: HTML Generation

Read references/scene-library.md AND references/style-presets.md before writing any code.

Required HTML structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
[font CDN link from style preset]
<style>
:root {
  [all CSS tokens from style preset]
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: [W]px; height: [H]px;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-body);
  position: relative;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px;
  opacity: 0;
  will-change: opacity, transform;
}
.scene-inner {
  width: 100%;
  max-width: 960px;
}

/* Scene-type CSS from scene-library.md */
[paste scene-type CSS here]
</style>
</head>
<body>

<div class="scene scene-1">
  <div class="scene-inner">
    [scene 1 HTML from scene-library.md template]
  </div>
</div>

[repeat for each scene]

<script>
window.__videoReady = false;
window.TOTAL_DURATION_MS = [totalDuration * 1000];

// ── Animation helpers ─────────────────────────────────────────────────────────
function lerp(a, b, p) { return a + (b - a) * p; }
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
function easeOutCubic(t) { return 1 - Math.pow(1 - clamp(t, 0, 1), 3); }

function sceneState(t, startMs, endMs) {
  if (t < startMs || t >= endMs) return { opacity: 0, ty: 0 };
  const prog = (t - startMs) / (endMs - startMs);
  if (prog < 0.10) {
    const p = easeOutCubic(prog / 0.10);
    return { opacity: p, ty: lerp(24, 0, p) };
  }
  if (prog < 0.85) return { opacity: 1, ty: 0 };
  const p = (prog - 0.85) / 0.15;
  return { opacity: 1 - p, ty: lerp(0, -12, p) };
}

function applySceneState(el, state) {
  el.style.opacity = state.opacity;
  el.style.transform = state.ty !== 0 ? `translateY(${state.ty.toFixed(2)}px)` : '';
}

// ── Main render function — called by Playwright once per frame ────────────────
window.renderFrame = function(t) {
  // Scene 1: 0ms – [D]ms
  applySceneState(document.querySelector('.scene-1'), sceneState(t, 0, [D]));
  // Scene 2: [D]ms – [2D]ms
  applySceneState(document.querySelector('.scene-2'), sceneState(t, [D], [2D]));
  // ... repeat per scene ...
};

// ── Preview loop — stopped by Playwright before frame capture ─────────────────
let __previewActive = false;
let __previewRafId = null;
window.__stopPreview = function() {
  __previewActive = false;
  if (__previewRafId !== null) { cancelAnimationFrame(__previewRafId); __previewRafId = null; }
};

document.fonts.ready.then(() => {
  window.renderFrame(0);
  window.__videoReady = true;
  __previewActive = true;
  const startTime = performance.now();
  function previewTick() {
    if (!__previewActive) return;
    const elapsed = performance.now() - startTime;
    if (elapsed < window.TOTAL_DURATION_MS) {
      window.renderFrame(elapsed);
      __previewRafId = requestAnimationFrame(previewTick);
    } else {
      window.renderFrame(window.TOTAL_DURATION_MS - 1);
      __previewActive = false;
    }
  }
  __previewRafId = requestAnimationFrame(previewTick);
});
</script>
</body>
</html>

Design quality rules:

  • Headline font size: never smaller than 60px — text must read at mobile thumbnail size
  • Numbers and stats: always the largest element on screen (120–200px)
  • Tight letter-spacing on display type: -0.02em to -0.04em
  • One accent color per scene — don't scatter accent across multiple elements
  • Dark presets: dividers rgba(255,255,255,0.10), never solid
  • Light presets: dividers rgba(0,0,0,0.10), never solid
  • transform-origin: center center on every element that uses transform
  • Padding inside .scene: minimum 80px — never let text touch viewport edges

Step 4: Self-QA (fix every failure before Step 5)

renderFrame correctness:

  • window.renderFrame(t) defined — pure function, no side effects outside style writes
  • Scene boundary uses t < startMs (not t <= startMs) — avoids black frame 0
  • Zero instances of animation-delay or @keyframes for scene transitions
  • No two scenes have overlapping opacity: 1 windows (except 10% enter overlap)
  • window.__stopPreview() exposed and preview rAF loop checks __previewActive

Readiness signal:

  • window.__videoReady = false declared before document.fonts.ready
  • window.__videoReady = true set ONLY inside document.fonts.ready.then(...)
  • window.renderFrame(0) called inside document.fonts.ready.then(...) before setting __videoReady = true

Layout:

  • html, body use exact pixel dimensions ([W]px, [H]px)
  • No %, vw, vh, rem units on body width/height
  • overflow: hidden on html, body
  • All scenes position: absolute; inset: 0

Design:

  • All colors from style preset tokens — no free hex values
  • All fonts from style preset — no free font-family strings
  • Headline font size ≥ 60px
  • Source in final scene if source param provided

Step 5: Export

Determine slug from brief content (kebab-case, ≤30 chars):

bash
mkdir -p chart/[slug]

Save HTML: chart/[slug]/video.html

Browser preview:

bash
open chart/[slug]/video.html

Run export (replace [skill-root] with path to this skill's directory):

bash
bash [skill-root]/scripts/export-video.sh \
  chart/[slug]/video.html \
  chart/[slug]/video.mp4 \
  --duration [totalDuration] \
  --fps [fps] \
  --width [W] \
  --height [H] \
  [--music path/to/audio.mp3]

The script installs Playwright on first run (~200MB Chromium), captures all frames, then assembles MP4 with FFmpeg.


Step 6: Output Summary

## Video: [title from brief]
Date: [YYYY-MM-DD] | Scenes: [N] | Style: [style] | Aspect: [ratio]
Duration: [N]s | FPS: [fps] | Frames: [N]

Files
  Source:   chart/[slug]/video.html
  Output:   chart/[slug]/video.mp4
  Size:     [X] MB

Checklist
- [ ] All scenes appear in sequence with no blank frames
- [ ] Text legible at mobile thumbnail size
- [ ] Scene transitions smooth (no jump cuts)
- [ ] Final scene includes CTA or closing message
- [ ] Source attribution present in final frame (if provided)

Prompt Tips (show when user asks for guidance)

"Provide a content brief — bullet points of what each scene should say."

"Name the insight directly. '3 reasons Q4 grew 85%' gives the video a spine."

"Mention the style if you have a preference: kinetic-dark (default), editorial-light, data-pulse, bold-type, minimal-clean."

"Specify aspect ratio for the platform: 1:1 for LinkedIn/Instagram feed, 9:16 for Stories/Reels, 16:9 for YouTube/presentations."

✅ Good: "Create a 9-second video. Q4 revenue hit $4.2M (85% growth). Drivers: enterprise deals, churn 1.2%, price increase. CTA: acme.com/q4. Style: data-pulse. Aspect: 1:1."

❌ Bad: "make a video about our company"

© Varnan-Tech, 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 6 other files (scripts, references) in skills/vid-motion-graphics of Varnan-Tech/opendirectory.

  • SKILL.md
  • README.md
  • evals/evals.json
  • references/scene-library.md
  • references/style-presets.md
  • scripts/capture-frames.mjs
  • scripts/export-video.sh

Open the folder on GitHubat commit 62e437a

Compare with similar skills

Vid Motion Graphics 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.

Vid Motion Graphics compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vid Motion Graphics this skillVarnan-Tech/opendirectory674—~3kAutomated safety check: PassMIT
Motion Adfabricioctelles/skills106—~4.1kAutomated safety check: PassApache-2.0
HyperFrames Video Compositionsspinabot/brigade11k—~1.6kAutomated safety check: PassMIT
AnalyzeKumarSashank/motiscope122—~3.1kAutomated safety check: NotesMIT
Render Myth Vs Factgooseworks-ai/goose-skills1.2k—~2.2kAutomated safety check: PassMIT
Motion EditorCoWork-OS/CoWork-OS473—~2.1kAutomated safety check: PassMIT

Similar skills

  • Motion Ad

    fabricioctelles/skills

    Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4.

    106 GitHub stars~4.1k tokensUpdated 4 days ago
    Media & CreativeAuto-check passed
  • Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.

    11k GitHub stars~1.6k tokensUpdated 5 days ago
    Media & CreativeAuto-check passed
  • Analyze

    KumarSashank/motiscope

    Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code.

    122 GitHub stars~3.1k tokensUpdated 2 mo ago
    Media & CreativeAuto-check: notes
  • Render Myth Vs Fact

    gooseworks-ai/goose-skills

    Assemble a myth-vs-fact kinetic-typography explainer video ad (≈29.5s, 9:16) from N myth/fact pairs + hook / turn / punch copy + palette + a brand end-card PNG + a VO track — a hook, 3 red-strike…

    1.2k GitHub stars~2.2k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Motion Editor

    CoWork-OS/CoWork-OS

    Build a local, offline motion-design editor app (After Effects / Screen Studio-lite) with scenes, layers, keyframes, spring easing, presets, stagger, a cursor layer, timeline, undo/redo, save/open…

    473 GitHub stars~2.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Motion Film

    CoWork-OS/CoWork-OS

    Design and render a motion-design film entirely in code — launch videos, product promos, feature announcements, explainers, brand/event openers, social loops.

    473 GitHub stars~1.8k tokensUpdated yesterday
    Media & CreativeAuto-check passed

More from Varnan-Tech/opendirectory

All 61 skills in this repo
  • Podcast Transcript Fetcher

    Varnan-Tech/opendirectory

    A skill your agent uses when fetching, searching, or analyzing transcripts from Lenny's Podcast, Dwarkesh Podcast, Cheeky Pint, 20VC, or A16z Podcast.

    674 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check: notes
  • Graphic Ebook

    Varnan-Tech/opendirectory

    Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF.

    674 GitHub stars~5k tokensUpdated 1 mo ago
    Auto-check passed
  • Where Your Customer Lives

    Varnan-Tech/opendirectory

    Given a product utility and ICP, researches the internet to find the specific channels.

    674 GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed
  • Docs From Code

    Varnan-Tech/opendirectory

    Generates and updates README.md and API reference docs by reading your codebase's functions, routes, types, schemas, and architecture.

    674 GitHub stars~1.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Graphic Chart

    Varnan-Tech/opendirectory

    Generates data visualization charts (bar, line, area, pie, doughnut, scatter, radar, treemap) as PNG using Apache ECharts v6.

    674 GitHub stars~2.9k tokensUpdated 1 mo ago
    Auto-check passed
  • Graphic Gif

    Varnan-Tech/opendirectory

    Creates animated looping GIFs from CSS animations (default) or AI image-to-video.

    674 GitHub stars~3k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Vid Motion Graphics

What does Vid Motion Graphics do?

Generates motion graphics videos (MP4) from a content brief. Vid Motion Graphics is an agent skill from Varnan-Tech/opendirectory. Generates motion graphics videos (MP4) from a content brief.

When should I use Vid Motion Graphics?

Vid Motion Graphics fits situations like: user says create a video; create an explainer; animated infographic.

How do I install Vid Motion Graphics in Claude Code?

Run `npx skills add Varnan-Tech/opendirectory --skill vid-motion-graphics -a claude-code`. Or copy the skill folder (skills/vid-motion-graphics in Varnan-Tech/opendirectory) into .claude/skills/vid-motion-graphics in your project. Claude Code loads it when a task matches its description.

How do I install Vid Motion Graphics in Codex?

Run `npx skills add Varnan-Tech/opendirectory --skill vid-motion-graphics -a codex`. Or copy the skill folder (skills/vid-motion-graphics in Varnan-Tech/opendirectory) into .agents/skills/vid-motion-graphics in your project. Codex loads it when a task matches its description.

Can I use Vid Motion Graphics 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 Varnan-Tech/opendirectory --skill vid-motion-graphics -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vid-motion-graphics, .gemini/skills/vid-motion-graphics, .github/skills/vid-motion-graphics and .opencode/skills/vid-motion-graphics in your project.

What does Vid Motion Graphics need to run?

Going by SKILL.md and its folder, Vid Motion Graphics needs JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: Python 3; Node.js; A Bash shell. Compatibility (from SKILL.md): ["claude-code","gemini-cli","github-copilot"].

Does Vid Motion Graphics access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Vid Motion Graphics 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Vid Motion Graphics use?

Vid Motion Graphics is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vid Motion Graphics use?

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

What are the alternatives to Vid Motion Graphics?

Skills that share tags, products or a category with Vid Motion Graphics: Motion Ad (fabricioctelles/skills, 106 stars), HyperFrames Video Compositions (spinabot/brigade, 11k stars), Analyze (KumarSashank/motiscope, 122 stars) and Render Myth Vs Fact (gooseworks-ai/goose-skills, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vid Motion Graphics?

Varnan-Tech (a GitHub organization) maintains it in Varnan-Tech/opendirectory, which has 674 GitHub stars. The repository holds 61 skills in this directory. The repository was last updated on August 16, 2026.

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