Agent skill

Video Shader Generator

by 0xsline in 0xsline/OpenChatCut

Generates WebGL shaders for video effects, transitions, masks and color grades in the OpenChatCut editor, trying built-in catalog effects such as zoom before making anything new.

AGPL-3.0Auto-check passedMedia & Creative

Install Video Shader Generator

skills CLI
$ npx skills add 0xsline/OpenChatCut --skill shader-gen -a claude-code

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

GitHub CLI
$ gh skill install 0xsline/OpenChatCut shader-gen --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/0xsline/OpenChatCut.git skills-src && mkdir -p .claude/skills && cp -r skills-src/src/agent/skills/shader-gen .claude/skills/shader-gen && 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
shader-gen
GitHub stars
2.2k
Used in
1 other repo
Token cost
~3.2k tokens
SKILL.md length
1,186 words
Files
6 (incl. references)
Skills in repo
31
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Generates WebGL shaders for video effects, transitions, masks and color grades in the OpenChatCut editor, trying built-in catalog effects such as zoom before making anything new.

  • Works in 2 steps: Catalog entry — use browse_library for… → User-uploaded .cube LUT asset that…
  • Adding a crossfade, wipe or 3D cube transition between clips
  • SKILL.md covers Catalog-first rule — try…, Beta Status Gate, Supported Targets and Type Routing, plus 8 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

This skill belongs to the OpenChatCut video editor's agent and follows a catalog-first rule: call `browse_library` for built-in effects, transitions and project assets, apply a match with `edit_item`, and generate a shader only when nothing fits the request. New shaders always go through `generate.ts`, which submits a backend generation job and returns a `jobId`, and the `track_progress` tool follows it afterwards. Manual authoring is for editing existing asset code only, never a fallback when generation fails.

One detail the skill stresses is that the built-in zoom works only as a track-bound effect. An item-bound zoom is stored but renders nothing, so `trackId`, `trackBoundFrom` and `trackBoundDurationInFrames` are required, taken from `read_project`. Zoom settings include magnification from 1 to 4 (default 1.5) and focal points between 0 and 1. Bundled examples cover cube rotate, door open and page curl transitions, and references cover design principles and property changes. The skill is published under AGPL-3.0, and the excerpt is truncated.

When your agent uses it

  • Adding a crossfade, wipe or 3D cube transition between clips
  • Applying a zoom or push-in to a video track
  • Creating a mask or reveal effect with a custom shader
  • Building a film-look color grade

Example prompts

  • “Add a push-in zoom on the whole first clip.”
  • “Make a page-curl transition between the intro and the first scene.”
  • “Give the footage a warm film-look color grade.”

Requirements

  • The OpenChatCut editor and its agent tools such as `browse_library` and `edit_item`
  • The backend generation service that `generate.ts` submits jobs to

Workflow steps

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

  1. Catalog entry — use browse_library for built-in and project effects/transitions.
  2. User-uploaded .cube LUT asset that already exists in the project library — separate code path, see "Applying an Existing LUT Asset" below…

What it can do on your machine

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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    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

Video Shader Generator loads about 3.2k tokens when it runs, and up to ~7.5k if it reads all its reference files. Until then it costs about 94 tokens; SKILL.md has 1,186 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from 0xsline/OpenChatCut at commit 2e6f4a2, republished under its AGPL-3.0 licence (© 0xsline). 1,186 words, ~3,206 tokens.

Download SKILL.mdSave it as .claude/skills/shader-gen/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
shader-gen
description
AI shader generator for WebGL video effects, transitions, masks, and color grading (LUT / 调色 / 电影感 / film look). Use when the user wants a video effect (滤镜 / 特效), a transition (转场 / crossfade / wipe / cube / 3d), a mask (蒙版 / 遮罩 / reveal), a zoom / push-in (推近 / 推镜头), or a color grade — try the built-in effects (zoom, builtin LUTs) before generating a new shader.
user-invocable
true

Shader Generator

Submit-only: creates a backend generation job, returns jobId. Use the track_progress tool for job lifecycle after submission.

Always use generate.ts for new shaders. Manual authoring is only for editing existing asset code — never as a fallback when generation fails.

Catalog-first rule — try existing assets before generation

Before generating a shader, call browse_library unless the user names an exact asset id that is already visible in read_project.

browse_library is the source of truth for built-in effects, built-in transitions, and project effect/transition assets. Built-ins are stable global asset ids, not per-project DB assets, so they may not appear in read_project asset lists.

Apply catalog entries with edit_item, do not call submit_shader.

Good catalog searches:

text
browse_library(query: "zoom")
browse_library(category: "transitions", query: "dissolve")
browse_library(category: "audio-fx")

Generate only when no catalog entry matches the user's intent closely enough.

builtin:zoom is track-bound only — DO NOT use item-bound

The default effect mode is "item-bound" (attach to a single item via targetItemId). builtin:zoom does NOT render in item-bound mode — the renderer reads zoom data exclusively from track-bound effect items. An item-bound zoom inserts into the DB silently but shows nothing in preview.

Use mode: "track-bound" with trackId + trackBoundFrom + trackBoundDurationInFrames. These three fields are required.

text
# Zoom on the entire video clip
edit_item(json: '{"adds":[{"type":"effect","assetId":"builtin:zoom","mode":"track-bound","trackId":"<clip-trackId>","trackBoundFrom":<clip-fromFrame>,"trackBoundDurationInFrames":<clip-durationInFrames>,"propertyOverrides":{"magnification":1.5,"shape":"hold"}}]}')

# Zoom on a sub-range of the clip (e.g. frames 90–150 only, a punch zoom on a beat)
edit_item(json: '{"adds":[{"type":"effect","assetId":"builtin:zoom","mode":"track-bound","trackId":"<trackId>","trackBoundFrom":90,"trackBoundDurationInFrames":60,"propertyOverrides":{"magnification":2,"shape":"punch"}}]}')

Get trackId / fromFrame / durationInFrames from read_project (each video/image item lists its trackId and timeline-frame range).

KeyTypeRange / valuesDefaultNotes
magnificationnumber1–41.5Zoom factor; 1 = no zoom, 2 = 2× in
focalPointXnumber0–10.5Horizontal focal point (0 = left, 1 = right)
focalPointYnumber0–10.5Vertical focal point (0 = top, 1 = bottom)
shapeselectpunch / hold / slow-push / instantholdAnimation curve
focalModeselectauto / manualautoauto picks subject; manual uses focalPoint
easeInFramesnumber0–608Frames to ramp in
easeOutFramesnumber0–608Frames to ramp out

Omit propertyOverrides entirely for default zoom. Send only the keys you want to change — patch semantics.

Track-bound vs item-bound — the broader rule

Effect items in the schema have two modes:

  • item-bound (default): targetItemId only. Effect covers the whole target item's playback. Works for shader effects, LUTs, color grades, blurs.
  • track-bound: trackId + trackBoundFrom + trackBoundDurationInFrames. Effect covers a timeline range on a track, independent of any item. Required for builtin:zoom; also valid for any shader effect when you want it to cover a specific timeline range (e.g. a transition-like color shift across the boundary of two clips).

Default to item-bound for shader effects. Use track-bound when (a) the asset requires it (zoom), or (b) the effect should cover a timeline range that doesn't match a single item.

Built-in LUT properties
text
edit_item(json: '{"adds":[{"type":"effect","targetItemId":"<clip-id>","assetId":"builtin:slog3-s709","propertyOverrides":{"intensity":1}}]}')
KeyTypeRangeDefaultNotes
intensitynumber0–11LUT strength; 1 = full applied

To swap: delete the effect and re-add with a different assetId. To remove: delete the effect item.

These are separate from user-uploaded .cube LUT assets (see "Applying an Existing LUT Asset" below) — those use a different code path with assetId:"lut".

Beta Status Gate

New shader generation is beta. Before generating, warn the user and wait for explicit confirmation.

Use the user's language. Chinese: "新的特效/转场生成目前还是 beta 阶段,可能会有不稳定的问题。如果你坚持要做,我可以帮你实现。" Skip if user already acknowledged in the same request.

Supported Targets

Effects and transitions apply to video, image, and gif items.

Type Routing

Before generating anything, check two non-generation paths first:

  1. Catalog entry — use browse_library for built-in and project effects/transitions.
  2. User-uploaded .cube LUT asset that already exists in the project library — separate code path, see "Applying an Existing LUT Asset" below. The asset shows up in read_project with type: lut.
User wants--type
Video appearance (color, blur, glow, grain, distortion)effect
Color grade / look (teal-orange, cinematic, vintage, LUT-style)effect
Visibility control (mask, reveal, wipe, shape cutout, gradient fade)effect
Blend between clips (crossfade, dissolve, slide, 3D cube/page flip)transition

"LUT-style" in the table means generating a fresh GLSL color grade that resembles a LUT — only when the user wants something new. If they want to apply a .cube file already in the library, don't generate; bind the existing asset instead.

No separate LUT or mask generator for the generation path — those are all effect.

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

Applying an Existing LUT Asset

.cube files uploaded by the user become lut assets. Applying one to a clip is not generation — it's a single edit_item call that attaches an effect item whose assetId is the literal string "lut" and whose propertyOverrides.lut binds the real LUT asset id. (Legacy contract; the unified LUT API binds the LUT effect asset id directly — see edit_item description.)

text
edit_item(json: '{"adds":[{"type":"effect","targetItemId":"<clip-id>","assetId":"lut","propertyOverrides":{"intensity":1,"lut":{"assetId":"<lut-asset-id>","assetType":"lut","type":"asset"}}}]}')

Key points:

  • assetId is the literal string "lut", not the LUT asset's id. The real LUT asset id goes inside propertyOverrides.lut.assetId.
  • intensity is 0–1; default 1 (full strength).
  • targetItemType defaults to video; also supports image, gif.
  • To swap a LUT on an existing effect: update propertyOverrides.lut.assetId to the new LUT asset id.
  • To remove: delete the effect item.

Do not call generate.ts for this path. Do not pass a real LUT asset id as assetId — the editor checks assetId === "lut" to route into the LUT renderer; passing a UUID silently renders nothing.

Usage

Before calling submit_shader, restate the user's intent in one concrete sentence, then proceed immediately. After track_progress returns, state what was produced in one line — do NOT ask "要保留还是重新生成".

ts
submit_shader({
  type: "effect",
  prompt: "Chromatic aberration with RGB split",
  name: "Chromatic Aberration",
});

submit_shader({
  type: "transition",
  prompt: "Smooth crossfade with soft edge",
  name: "Crossfade",
});

submit_shader({
  type: "effect",
  prompt: "Cinematic teal-orange color grade",
});

submit_shader({
  type: "effect",
  prompt: "Stronger version",
  referenceAssetIds: ["effect_asset_id"],
});

Strategy

  • Submit, then stop. Tell user the job was created.
  • Use the track_progress tool for status/wait after submission.
  • Generation always produces a library asset — never refuse because the timeline isn't ready.
  • Apply is separate and optional. Only apply when user explicitly asks ("加到视频", "apply", "用到第一段"). When ambiguous, default to library-only.

Editing Existing Properties

Any time you're about to edit shader asset.properties, applied effect/transition item.propertyOverrides, or promote a hardcoded shader value, read references/property-changes.md first.

It reinforces that shader properties is an array, but the allowed shader property types are only number, boolean, color, select, and vec2. Motion Graphic properties are also arrays, but use a different type set.

Parameters

ParamDescriptionDefault
type"effect" or "transition" (req'd)—
promptDescription of the shader (req'd)—
nameAsset name shown in library—
referenceAssetIdsAsset ids. Image id → model LOOKS AT it for visual inspiration. Effect/transition id → reuse its code as style anchor (≤1 per submit, kind must match type).—

Output

Returns { success, job: { jobId, status }, manage: { status, wait, watch } }.

Applying to Timeline

Only when user explicitly requests. Call read_project first for fresh timeline state.

Effect
text
edit_item(json: '{"adds":[{"type":"effect","targetItemId":"<id>","assetId":"<id>","enabled":true,"propertyOverrides":{}}]}')
Transition

Requires two adjacent same-track endpoints. edit_item validates live seam feasibility and refuses durations that would require freeze frames or overlapping neighboring transitions. If the add fails, retry with the suggested durationInFrames, trim the clips to expose handles, delete/shorten neighboring transitions, or keep a hard cut.

text
edit_item(json: '{"adds":[{"type":"transition","assetId":"<id>","outgoingItemId":"<id1>","incomingItemId":"<id2>","durationInFrames":30}]}')

Validation & Verification

Backend Validation

When generating via generate.ts, the backend handles validation automatically (transpile, AST security, class structure, retry on failure).

Manual Code Verification

NEVER write shader code from scratch. Always use generate.ts for new shaders. This section is ONLY for modifying existing shader code that was already generated.

When writing shader code manually, read ${CLAUDE_SKILL_DIR}/references/design-principles.md first. If the change touches editable properties, also read ${CLAUDE_SKILL_DIR}/references/property-changes.md.

Typical workflow:

  1. read_project with the shader assetId and code: true — read the current source.
  2. Edit the source in your own context.
  3. edit_asset with action=update, the same assetId, and the full replacement source inline in json.code. Validation runs automatically on update — if code is invalid, the update is rejected with error details.

© 0xsline, AGPL-3.0. 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 5 other files (references) in src/agent/skills/shader-gen of 0xsline/OpenChatCut.

  • SKILL.md
  • examples/cube-rotate.md
  • examples/door-open.md
  • examples/page-curl.md
  • references/design-principles.md
  • references/property-changes.md

Open the folder on GitHubat commit 2e6f4a2

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in 0xsline/OpenChatCut, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Video Shader Generator 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.

Video Shader Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Video Shader Generator this skill0xsline/OpenChatCut2.2k1 repos~3.2kAutomated safety check: PassAGPL-3.0
HyperFrames Animationheygen-com/hyperframes60k3 repos~2.1kAutomated safety check: PassApache-2.0
Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills8.5k6 repos~3.2kAutomated safety check: NotesApache-2.0
Faceless Explainer Videoheygen-com/hyperframes60k3 repos~7.7kAutomated safety check: NotesApache-2.0
Video ShotcraftVincentwei1021/video-shotcraft11k—~2.6kAutomated safety check: PassApache-2.0
Figma to HyperFramesheygen-com/hyperframes60k3 repos~4.5kAutomated safety check: NotesApache-2.0

Similar skills

  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    60k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-check passed
  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.5k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes
  • Faceless Explainer Video

    heygen-com/hyperframes

    Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.

    60k GitHub starsUsed in 3 repos~7.7k tokens
    Media & CreativeAuto-check: notes
  • Video Shotcraft

    Vincentwei1021/video-shotcraft

    Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.

    11k GitHub stars~2.6k tokensUpdated 5 days ago
    Media & CreativeAuto-check passed
  • Figma to HyperFrames

    heygen-com/hyperframes

    Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

    60k GitHub starsUsed in 3 repos~4.5k tokens
    Media & CreativeAuto-check: notes
  • HyperFrames Video Entry Point

    heygen-com/hyperframes

    Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.

    60k GitHub starsUsed in 3 repos~5.2k tokens
    Media & CreativeAuto-check passed

More from 0xsline/OpenChatCut

All 31 skills in this repo
  • OpenChatCut Video Editing

    0xsline/OpenChatCut

    Connects an MCP-capable agent to the local OpenChatCut video editor to inspect and edit projects through draft edit sessions, with manual approval by default.

    2.2k GitHub starsUsed in 1 repo~655 tokens
    Auto-check passed
  • AI Image Generation

    0xsline/OpenChatCut

    Generates still images through the submit_image tool, choosing among Fal.ai, gpt-image-2, nano-banana, MiniMax image-01 and Grok Imagine by configured keys.

    2.2k GitHub stars~1.3k tokensUpdated 3 days ago
    Auto-check passed
  • Livestream to Clips

    0xsline/OpenChatCut

    Cuts a livestream recording into evidence-backed, platform-ready clips by combining transcript, visual, audio and genre-specific signals.

    2.2k GitHub stars~2.7k tokensUpdated 3 days ago
    Auto-check passed
  • Music Generation

    0xsline/OpenChatCut

    Generates instrumentals, songs, soundtracks and covers through Mureka, MiniMax, Atlas Cloud or Sonilo using the `submit_music` tool.

    2.2k GitHub stars~1.1k tokensUpdated 3 days ago
    Auto-check passed
  • AI Video Generation

    0xsline/OpenChatCut

    Submits AI video generation jobs to Fal.ai, Seedance, Kling, MiniMax Hailuo, xAI Grok Imagine or OFox for text-to-video, image-to-video, transitions and clip extension.

    2.2k GitHub stars~4.3k tokensUpdated 3 days ago
    Auto-check passed
  • Generates text-to-speech narration and custom sound effects for a video timeline, keeping existing voiceover in sync after visual retiming edits.

    2.2k GitHub stars~4.4k tokensUpdated 3 days ago
    Auto-check passed

Questions about Video Shader Generator

What does Video Shader Generator do?

Generates WebGL shaders for video effects, transitions, masks and color grades in the OpenChatCut editor, trying built-in catalog effects such as zoom before making anything new. This skill belongs to the OpenChatCut video editor's agent and follows a catalog-first rule: call `browse_library` for built-in effects, transitions and project assets, apply a match with `edit_item`, and generate a shader only when nothing fits the request.ts`, which submits a backend generation job and returns a `jobId`, and the `track_progress` tool follows it afterwards.

When should I use Video Shader Generator?

Video Shader Generator fits situations like: adding a crossfade, wipe or 3D cube transition between clips; applying a zoom or push-in to a video track; creating a mask or reveal effect with a custom shader; building a film-look color grade.

How do I install Video Shader Generator in Claude Code?

Run `npx skills add 0xsline/OpenChatCut --skill shader-gen -a claude-code`. Or copy the skill folder (src/agent/skills/shader-gen in 0xsline/OpenChatCut) into .claude/skills/shader-gen in your project. Claude Code loads it when a task matches its description.

How do I install Video Shader Generator in Codex?

Run `npx skills add 0xsline/OpenChatCut --skill shader-gen -a codex`. Or copy the skill folder (src/agent/skills/shader-gen in 0xsline/OpenChatCut) into .agents/skills/shader-gen in your project. Codex loads it when a task matches its description.

Can I use Video Shader Generator 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 0xsline/OpenChatCut --skill shader-gen -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/shader-gen, .gemini/skills/shader-gen, .github/skills/shader-gen and .opencode/skills/shader-gen in your project.

What does Video Shader Generator need to run?

SKILL.md names no scripts, command-line tools or credentials: Video Shader Generator is instructions for the agent only. Our summary lists: The OpenChatCut editor and its agent tools such as `browse_library` and `edit_item`; The backend generation service that `generate.ts` submits jobs to.

Does Video Shader Generator 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 Video Shader Generator 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. Review the folder before installing.

What licence does Video Shader Generator use?

Video Shader Generator is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Video Shader Generator use?

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

What are the alternatives to Video Shader Generator?

Skills that share tags, products or a category with Video Shader Generator: HyperFrames Animation (heygen-com/hyperframes, 60k stars), Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.5k stars), Faceless Explainer Video (heygen-com/hyperframes, 60k stars) and Video Shotcraft (Vincentwei1021/video-shotcraft, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Video Shader Generator?

0xsline (a GitHub user) maintains it in 0xsline/OpenChatCut, which has 2,235 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 7, 2026.

Source: 0xsline/OpenChatCut on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.