VidTSX 2D Video Generator

What it does

When your agent uses it

• Generating a title card or animated clip as a VidTSX TSX file
• Turning a described scene into a Remotion composition in a chosen style
• Producing vertical, square or horizontal motion graphics for social platforms

Example prompts

• “Make a shot: a neon title card that reads Launch Day with a slow zoom.”
• “Build this scene as a vertical memphis-style clip for Shorts.”
• “Generate the TSX for a corporate-style horizontal intro with animated bars.”
• “Turn this into a video: three stat cards that count up one after another.”

Requirements

• A VidTSX project that renders Remotion compositions

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Clear single shot → generate the .tsx file directly.
2. 2Complex, multi-shot, or visually ambiguous request → confirm the shot breakdown or visual direction in one short message first, then…
3. 3Deliver as an actual .tsx file, not inline code. These TSX components always exceed 20 lines, and the user edits these files directly…
4. 4The file contains only the component code — the structural section comments below are welcome, but no markdown fences, no prose…
5. 5Render it and look before calling it done — see Verify the render. A shot you have only reasoned about is not finished; a still (and, for…

What it can do on your machine

Read from SKILL.md and the folder at commit 773054b. 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:

  • node
  • ffmpeg

  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.

Context cost

VidTSX 2D Video Generator loads about 2.8k tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 241 tokens; SKILL.md has 940 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~241

When it runs · the whole SKILL.md, loaded when a task matches

~2.8k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~3.4k

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

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 hassancs91/claude-faceless-shorts-creator at commit 773054b, republished under its MIT licence (© hassancs91). 940 words, ~2,822 tokens.

name

vidtsx-2d-generator

description

Generate production-ready 2D TSX video files for VidTSX (Remotion-based) from a shot, scene, or video description. Use whenever the user wants to create or generate a VidTSX video, a 2D TSX shot or scene, an animated clip, title card, or rendered motion graphic — including when they describe a visual animation they want built, or say "make a shot", "build this scene", "generate the TSX", or "turn this into a video". Covers the mandatory file structure and composition config, dimension presets (horizontal/vertical/square), six style presets (minimalist, memphis, neo-brutalism, glassmorphism, neon, corporate), and the hard rules that keep renders from crashing, covering frame-based animation only (no useState/useEffect/setTimeout), strictly monotonic interpolate ranges, Easing.bezier not wrapper syntax, and the chroma-js and @remotion/paths import gotchas. Not for 3D/three.js compositions, general React work, or editing video files.

import React from 'react';
import {
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  Easing,
  AbsoluteFill,
  Sequence,
} from 'remotion';

// =============================================================================
// COMPOSITION CONFIG
// =============================================================================
export const compositionConfig = {
  id: 'ComponentName', // PascalCase only — NO hyphens or underscores
  durationInSeconds: 5,
  fps: 30,
  width: 1920,
  height: 1080,
};

// =============================================================================
// STYLE CONSTANTS
// =============================================================================
const COLORS = {
  primary: '#6366f1',
  secondary: '#8b5cf6',
  accent: '#06b6d4',
  background: '#0f0f23',
  text: '#ffffff',
} as const;

const TYPOGRAPHY = {
  fontFamily: 'Inter, system-ui, sans-serif',
} as const;

const EASINGS = {
  easeOut: Easing.bezier(0.33, 1, 0.68, 1),
  easeIn: Easing.bezier(0.32, 0, 0.67, 0),
  easeInOut: Easing.bezier(0.37, 0, 0.63, 1),
  overshoot: Easing.bezier(0.34, 1.56, 0.64, 1),
} as const;

// =============================================================================
// PRE-GENERATED DATA (computed once at module level, NOT during render)
// =============================================================================
const seededRandom = (seed: number): number => {
  const x = Math.sin(seed * 9999) * 10000;
  return x - Math.floor(x);
};

// =============================================================================
// MAIN COMPONENT
// =============================================================================
const ComponentName: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames, width, height } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: COLORS.background }}>
      {/* Content */}
    </AbsoluteFill>
  );
};

export default ComponentName;

// ✅ Correct
interpolate(frame, [0, 30, 60], [0, 1, 0]);

// ❌ Throws — input range descends
interpolate(frame, [60, 30, 0], [0, 1, 0]);

// ✅ Correct — maps 0→100, 1→0
interpolate(value, [0, 1], [100, 0]);

// ❌ Wrong
interpolate(value, [1, 0], [100, 0]);

const startFrame = index * 30;
const endFrame = startFrame + 30;
interpolate(frame, [startFrame, endFrame], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

// ❌ Crashes
Easing.out(Easing.cubic);
Easing.in(Easing.quad);

// ✅ Correct
interpolate(frame, [0, 30], [0, 1], {
  easing: EASINGS.easeOut,
  extrapolateRight: 'clamp',
});

// ✅ Correct
import * as chroma from 'chroma-js';
const color = chroma('#00bfff').brighten(0.5).hex();

// ❌ Wrong — "chroma is not a function"
import chroma from 'chroma-js';

import { evolvePath, getLength, getPointAtLength, getTangentAtLength } from '@remotion/paths';

const circlePath = 'M 50 10 A 40 40 0 1 1 49.99 10 Z';
const rectPath = 'M 0 0 L 100 0 L 100 50 L 0 50 Z';
const linePath = 'M 0 0 L 100 100';

const { strokeDasharray, strokeDashoffset } = evolvePath(progress, rectPath);

const centered: React.CSSProperties = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
};

© hassancs91, 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 1 other file (references) in .claude/skills/vidtsx-2d-generator of hassancs91/claude-faceless-shorts-creator.

• SKILL.md
• references/style-presets.md

Open the folder on GitHubat commit 773054b

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in hassancs91/claude-faceless-shorts-creator, which our catalogue first saw on October 7, 2026.

• hassancs91/claude-youtube-editor.claude/skills/vidtsx-2d-generator