StealIt

Vidtsx 2d Generator

vidtsx-2d-generator

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.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add hassancs91/claude-youtube-editor --skill vidtsx-2d-generator

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Vidtsx 2d Generator

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /vidtsx-2d-generator.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1How to use this skill
  2. 2Output spec
  3. 3Mandatory file structure
  4. 4Correctness rules
  5. 5Layout
  6. 6Typography
  7. 7Style presets
  8. 8Verify the render (do not skip)
  9. 9Final output

Section headings from the skill's SKILL.md file.

What's inside · 2 files

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

More from LearnWithHasan

See all →

Brand Setup

Makes this repo's videos look like YOUR channel instead of the house default — interviews you for palette, fonts, wordmark, motion energy, delivery specs and SFX taste, then…

Video & MotionLearnWithHasan364

Clean Audio

Voice/audio cleanup step of the AI Video Editor pipeline — diagnose a video's background noise, pick the right denoise method, and produce a cleaned master (voice isolated, levels…

Video & MotionLearnWithHasan364

Clean Cut

Step 1 of the AI Video Editor pipeline — turn raw talking-head footage into a clean master cut. Use when the user wants to "clean cut", "cut the raw footage", "remove filler /…

Video & MotionLearnWithHasan364

Fake Screencast

Turn static SCREENSHOTS into a simulated screen recording (TSX) — a fake screencast with an animated cursor that eases to targets and clicks, a browser URL bar that updates per…

Video & MotionLearnWithHasan364
See all →

HyperframesTop pick

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips…

Video & MotionHeyGen79k

Slack GIF Creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for…

Video & MotionAnthropic187k

AI Video Gen

Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content…

Video & MotionOpenMontage76k