New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Make Tsx

by hassancs91 in hassancs91/claude-youtube-editor

Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview.

MITAuto-check: notesMedia & Creative

Install Make Tsx

skills CLI
$ npx skills add hassancs91/claude-youtube-editor --skill make-tsx -a claude-code

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

GitHub CLI
$ gh skill install hassancs91/claude-youtube-editor make-tsx --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/hassancs91/claude-youtube-editor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/make-tsx .claude/skills/make-tsx && 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
make-tsx
GitHub stars
325
Token cost
~1.9k tokens
SKILL.md length
895 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview.

  • Works in 9 steps: Read the plan + timeline + transcript +… → Ask only what's genuinely open at the… → Library-first. Reuse a kit component… → …
  • The user wants to add/edit overlays
  • SKILL.md covers Inputs (read these first,…, Workflow, timeline.json (the compositing… and Principles (the house style —…, plus 1 more section
  • Calls node, python and ffmpeg

What it does

Make Tsx is an agent skill from hassancs91/claude-youtube-editor. Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview. Use when the user wants to add/edit overlays or full-screen animation segments, "make a shot / beat", implement an edit plan or a v2 update, retime a beat to the narration, re-render shots, or re-bake the video-N preview in this repo. Covers reading the plan + edited-transcript + brand + reusable kit, authoring shots library-first, syncing reveals to word times, updating…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering React components, Video production and Text to speech and voice. It works with Remotion and YouTube. The repository describes itself as: Record the talking head, Claude Code does the rest: the cut, the visuals, the voice, the sound effects, the thumbnail, and the YouTube upload. Every screen moment is built as… The licence is MIT.

When your agent uses it

  • The user wants to add/edit overlays
  • Full-screen animation segments
  • Make a shot / beat
  • Implement an edit plan

Example prompts

  • “make a shot / beat”
  • “/make-tsx”

Requirements

  • Python 3

Workflow steps

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

  1. Read the plan + timeline + transcript + brand + kit. Pull the exact word times for each cue you must hit (grep edited-transcript.json for…
  2. Ask only what's genuinely open at the start (a small batch), then build. Don't re-ask settled decisions.
  3. Library-first. Reuse a kit component before writing UI from scratch. If you build something reusable (a window chrome, a browser frame, a…
  4. Author / edit the shot as a vidtsx-format .tsx in remotion/src/shots/video-N/ (auto-registered by scripts/gen-registry.mjs). One shot per…
  5. Sync to the words (see principles). Time each sub-element's entrance to its transcript cue; never show a thing before it's said or after…
  6. Update timeline.json — add/replace/retime the beat's span and type. Leave a clear note when a slot is a placeholder (e.g. a pending screen…
  7. Render + VERIFY BY SCREENSHOT (never skip): cd remotion && node scripts/render-all.mjs --scale=1 (opaque → out/.mp4, transparent overlays…
  8. Bake the preview: python tools/bake.py (reads timeline.json → videos/video-N/output/video-N-preview.mp4, 1080p30). --end SECONDS to bake a…
  9. Spot-check composited frames from the baked mp4 at the changed beats (the shot over the real master), not just the isolated shot.

What it can do on your machine

Read from SKILL.md and the folder at commit a6ac742. 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
    • python
    • 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

Make Tsx loads about 1.9k tokens when it runs. Until then it costs about 179 tokens; SKILL.md has 895 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~179
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:55
    tup → real UI (P4).** Keys, dashboards, `.env`, skill folders → the actual VS Code / dashboard UI, not an abstract graph

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-youtube-editor at commit a6ac742, republished under its MIT licence (© hassancs91). 895 words, ~1,922 tokens.

Download SKILL.mdSave it as .claude/skills/make-tsx/SKILL.md (or your agent's skills folder).
name
make-tsx
description
Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview. Use when the user wants to add/edit overlays or full-screen animation segments, "make a shot / beat", implement an edit plan or a v2 update, retime a beat to the narration, re-render shots, or re-bake the video-N preview in this repo. Covers reading the plan + edited-transcript + brand + reusable kit, authoring shots library-first, syncing reveals to word times, updating timeline.json (cutaway vs overlay), rendering, verifying by screenshot, and baking with tools/bake.py. Defers raw TSX authoring rules to vidtsx-2d-generator and the cut itself to clean-cut.

make-tsx — build the visual beats over the master

Step 2 of the pipeline: take an approved master cut and its timing spine and produce the animated beats — UI/browser mockups, full-screen statements, diagrams, image reveals — then composite them over the master into a preview. Work collaboratively and beat-by-beat; the user gives notes per beat.

This is the project orchestration. For the low-level rules of writing a single crash-free Remotion file (frame-based only, monotonic interpolate, Easing.bezier, no useState/useEffect, import gotchas), use the vidtsx-2d-generator skill — shots here follow those rules.

Inputs (read these first, every session)

  • The plan — videos/video-N/work/edit-plan.md (or a change list like v2-update-plan.md). The source of truth for what to build. If there's a change list from a review, that overrides; apply it, don't re-litigate settled beats.
  • videos/video-N/work/timeline.json — maps each shot → its span on the master + type. You edit this. (Schema below.)
  • videos/video-N/work/edited-transcript.json — word-level times in master timeline (ms). Everything syncs to these.
  • brand.md — colors/fonts/motion/delivery tokens. Every shot reads the brand so all videos feel like one channel.
  • remotion/src/lib/kit.tsx (+ lib/vscode.tsx, lib/browser.tsx) — the reusable component library; src/brand.ts, src/fonts.ts; existing shots in remotion/src/shots/video-N/.

Workflow

  1. Read the plan + timeline + transcript + brand + kit. Pull the exact word times for each cue you must hit (grep edited-transcript.json for the phrase → start/end ms → local frame = (cue_s − shot.master_in_s) × fps).
  2. Ask only what's genuinely open at the start (a small batch), then build. Don't re-ask settled decisions.
  3. Library-first. Reuse a kit component before writing UI from scratch. If you build something reusable (a window chrome, a browser frame, a card slot), put it in lib/ so later shots and videos get it. Promote good patterns back into the library.
  4. Author / edit the shot as a vidtsx-format .tsx in remotion/src/shots/video-N/ (auto-registered by scripts/gen-registry.mjs). One shot per file. Follow the brand tokens and the principles below.
  5. Sync to the words (see principles). Time each sub-element's entrance to its transcript cue; never show a thing before it's said or after the point has passed.
  6. Update timeline.json — add/replace/retime the beat's span and type. Leave a clear note when a slot is a placeholder (e.g. a pending screen recording).
  7. Render + VERIFY BY SCREENSHOT (never skip): cd remotion && node scripts/render-all.mjs --scale=1 <ShotIds> (opaque → out/<id>.mp4, transparent overlays → .mov). Validate with a still first (--still); for word-synced reveals/scrolls, render the clip and pull a frame at each cue (ffmpeg -ss <t> -i out/<id>.mp4 -frames:v 1 f.jpg) — one 60% still is not enough.
  8. Bake the preview: python tools/bake.py (reads timeline.json → videos/video-N/output/video-N-preview.mp4, 1080p30). --end SECONDS to bake a prefix while iterating.
  9. Spot-check composited frames from the baked mp4 at the changed beats (the shot over the real master), not just the isolated shot.

timeline.json (the compositing map)

jsonc
{
  "master": "videos/video-1/reference/master.mp4", "master_fps": 60,
  "remotion_out": "remotion/out",
  "shots": [
    { "id": "CreditsStat", "type": "cutaway", "master_in_s": 170.0, "master_out_s": 179.0, "cue": "..." }
  ],
  "preview": { "end_s": 329.6, "out": "videos/video-1/output/video-1-preview.mp4", "width": 1920, "height": 1080, "fps": 30 }
}
  • type: "cutaway" — the shot's .mp4 REPLACES the master video for [master_in_s, master_out_s]. Master audio always continues underneath.
  • type: "overlay" — a transparent shot (ProRes 4444 .mov, transparent: true in its compositionConfig) is composited OVER the master for that span. For small persistent CTAs/badges in the top/bottom band.
  • bake.py splits [0, end] at every shot boundary, renders each segment (cutaway from the shot, overlay = master+alpha, else master pass-through), concats, and muxes master audio 0..end. Frame-accurate; a shot's file must exist in remotion/out/ first.
  • Design shots at 1920×1080; render-all --scale=2 → 4K for final. Preview bakes 1080p30; final delivery is 4K60.
Show full SKILL.md (351 more words)Show less

Principles (the house style — apply them)

  • Sync to the words (P1). Reveal sub-elements on their narration cue, timed from edited-transcript.json. "Show everything then hold" is a smell.
  • Don't pre-empt (P2). Never put on screen a thing mentioned later (don't show "skill" before the skill is introduced; don't show example tiles before "more examples").
  • Real service info → real page (P3). Facts about a service (limits, pricing) → a TSX clone of that service's actual web page (browser chrome + URL bar + scroll) with the exact line highlighted. Screenshot the real page first (Playwright / website-screenshot), then clone it.
  • Config/setup → real UI (P4). Keys, dashboards, .env, skill folders → the actual VS Code / dashboard UI, not an abstract graphic.
  • Real results in the real editor (P5). A generated result is shown opened inside the real editor (image in a pane next to the chat), not floating on a brand card.
  • Full-screen vs overlay. Concept beats = full-screen cutaways (cut away from the talking head). Overlays only for small persistent CTAs/badges in the top/bottom band; never cover the center-framed talking head.
  • Real UI realism. UI clones match the real product (Claude Code = dark + coral, real logos), not the indigo brand. Brand indigo is for overlays/full-screen beats.
  • Recording vs TSX. TSX when you want controlled highlight/scroll/zoom; a real screen recording only when the point is genuine PROOF (real output, real speed). Leave a clearly-noted placeholder slot for recordings the user will provide.
  • On-screen text follows the brand voice — no em-dashes (the site copy avoids them; keep it out of overlays too).

Those are the full principle set. When a video's plan calls for a revision pass, record what changed and why in videos/<project>/work/v2-update-plan.md so the next pass inherits the reasoning.

Tooling quick reference

  • Register shots: node remotion/scripts/gen-registry.mjs (auto-runs discovery; needed after adding a file).
  • Render: node remotion/scripts/render-all.mjs [--still] [--scale=1|2] <ShotIds...>.
  • Bake: python tools/bake.py [timeline.json] [--end S] [--keep].
  • Scratch renders/frames go in the scratchpad, not the project.

Done = the changed beats render, you have looked at stills/frames at each cue, the preview is re-baked, and composited frames are spot-checked. Update the plan/timeline and any relevant memory when the pass is complete.

© 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

Just SKILL.md in .claude/skills/make-tsx of hassancs91/claude-youtube-editor.

Open the folder on GitHubat commit a6ac742

Compare with similar skills

Make Tsx 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.

Make Tsx compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Make Tsx this skillhassancs91/claude-youtube-editor325—~1.9kAutomated safety check: NotesMIT
Video Podcast MakerAgents365-ai/video-podcast-maker1.7k—~4.9kAutomated safety check: PassMIT
Video Post ProductionAnastasiyaW/codex-claude-code-config154—~1.7kAutomated safety check: PassMIT
Ip Talking Head Lecturewwwzhouhui/skills_collection283—~2.5kAutomated safety check: PassNone
Ergo Remotion Videoitwanger/toBeBetterJavaer18k—~1.1kAutomated safety check: PassNone
VidTSX 2D Video Generatorhassancs91/claude-faceless-shorts-creator271—~2.8kAutomated safety check: PassMIT

Similar skills

  • Video Podcast Maker

    Agents365-ai/video-podcast-maker

    A skill your agent uses when the user gives a topic and wants an automated topic-driven narrated explainer, podcast, or knowledge-summary video (Bilibili / YouTube / Xiaohongshu / Douyin / WeChat…

    1.7k GitHub stars~4.9k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed

  • Video Post Production

    AnastasiyaW/codex-claude-code-config

    Video post-production rules: audio mastering, color, captions, platform export.

    154 GitHub stars~1.7k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • Ip Talking Head Lecture

    wwwzhouhui/skills_collection

    IP 卡通数字人口播动画课件视频工厂。用 Remotion 把「一段逐字稿 + 一张 IP 形象图」变成一条成片：主讲 IP 以圆形头像常驻右下角讲课（待机浮动 + 口型开合 + 说话光环 + 声波条），主画面是自动排版的动画课件（封面 / 概念 / 步骤 / 对比 / 数据 / 总结 六套版式），底部居中烧录字幕并做跟读高亮，另有品牌水印与顶部进度条；配音走小米 MiMo 或火山引擎或…

    283 GitHub stars~2.5k tokensUpdated 4 days ago
    Media & CreativeAuto-check passed

  • Ergo Remotion Video

    itwanger/toBeBetterJavaer

    把口播稿做成二哥风格的 Remotion 视频，包括整理视频用稿、火山 TTS 配音、音画对齐、逐章动画预览和导出带配音的 MP4。用户说“做视频”“口播稿转视频”“Remotion”“继续做下一章”“出片”“渲染”“改读音”“配音读错了”，或给出 docs/src/ai/video/ 下的稿子要做成视频时使用。共享工具、配置和素材在…

    18k GitHub stars~1.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • VidTSX 2D Video Generator

    hassancs91/claude-faceless-shorts-creator

    Generates 2D Remotion-based TSX video files for VidTSX from a shot or scene description, with style presets and rules that keep renders from crashing.

    271 GitHub stars~2.8k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Motion Video in Remotion

    ooiyeefei/ccc

    Builds marketing and explainer videos in Remotion from rendered scenes, with one real product capture as proof, and cuts them for each platform's formats.

    494 GitHub stars~2.9k tokensUpdated 2 mo ago
    Media & CreativeAuto-check passed

More from hassancs91/claude-youtube-editor

All 8 skills in this repo

  • Youtube Thumbnail

    hassancs91/claude-youtube-editor

    Dedicated YouTube thumbnail generator — interviews you for exactly the style elements you want (environment, text budget, extras, accent color), then renders high-contrast, vibrant, face-consistent…

    325 GitHub stars~2.1k tokensUpdated 1 mo ago
    Auto-check: notes

  • Brand Setup

    hassancs91/claude-youtube-editor

    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 rewrites brand.md +…

    325 GitHub stars~2.3k tokensUpdated 1 mo ago
    Auto-check passed

  • Clean Cut

    hassancs91/claude-youtube-editor

    Step 1 of the AI Video Editor pipeline — turn raw talking-head footage into a clean master cut.

    325 GitHub stars~4.3k tokensUpdated 1 mo ago
    Auto-check: notes

  • Fake Screencast

    hassancs91/claude-youtube-editor

    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 page, hard-cut…

    325 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Suggest Sfx

    hassancs91/claude-youtube-editor

    Step 4 of the AI Video Editor pipeline — the SFX pass. An agent skill from hassancs91/claude-youtube-editor.

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

  • Youtube Packaging

    hassancs91/claude-youtube-editor

    Generates click-optimized YouTube packaging — 3 thumbnail bets under one fixed title, engineered for YouTube's built-in A/B/C thumbnail test, plus a value-forward description, then renders the…

    325 GitHub stars~3.7k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Make Tsx

What does Make Tsx do?

Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview. Make Tsx is an agent skill from hassancs91/claude-youtube-editor. Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview.

When should I use Make Tsx?

Make Tsx fits situations like: the user wants to add/edit overlays; full-screen animation segments; make a shot / beat; implement an edit plan.

How do I install Make Tsx in Claude Code?

Run `npx skills add hassancs91/claude-youtube-editor --skill make-tsx -a claude-code`. Or copy the skill folder (.claude/skills/make-tsx in hassancs91/claude-youtube-editor) into .claude/skills/make-tsx in your project. Claude Code loads it when a task matches its description.

How do I install Make Tsx in Codex?

Run `npx skills add hassancs91/claude-youtube-editor --skill make-tsx -a codex`. Or copy the skill folder (.claude/skills/make-tsx in hassancs91/claude-youtube-editor) into .agents/skills/make-tsx in your project. Codex loads it when a task matches its description.

Can I use Make Tsx 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 hassancs91/claude-youtube-editor --skill make-tsx -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/make-tsx, .gemini/skills/make-tsx, .github/skills/make-tsx and .opencode/skills/make-tsx in your project.

What does Make Tsx need to run?

Going by SKILL.md and its folder, Make Tsx needs the command-line tools its instructions call (node, python and ffmpeg). Our summary lists: Python 3.

Does Make Tsx 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 Make Tsx safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Make Tsx use?

Make Tsx 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 Make Tsx use?

About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Make Tsx?

Skills that share tags, products or a category with Make Tsx: Video Podcast Maker (Agents365-ai/video-podcast-maker, 1.7k stars), Video Post Production (AnastasiyaW/codex-claude-code-config, 154 stars), Ip Talking Head Lecture (wwwzhouhui/skills_collection, 283 stars) and Ergo Remotion Video (itwanger/toBeBetterJavaer, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Make Tsx?

hassancs91 (a GitHub user) maintains it in hassancs91/claude-youtube-editor, which has 325 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on August 18, 2026.

Source: hassancs91/claude-youtube-editor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.