Canvas Capture Extension Skill for Codex
Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree was deleted, rebuilt after source changes, moved to its durable install directory, or reloaded in Chrome or Chrome Canary.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/remotion-dev/remotion --skill canvas-capture-extensionWhat comes with it
2 233 bytes besides the instructionThe instruction itself
3 sections, as written by the authorCanvas Capture Extension
Build the extension from packages/canvas-capture-extension, but always install
the unpacked copy outside the checkout so deleting a worktree cannot break it.
Rebuild and install
- Locate a Remotion checkout containing
packages/canvas-capture-extension/package.json. Prefer the current checkout;
otherwise use /Users/jonathanburger/remotion.
- Run:
.agents/skills/canvas-capture-extension/scripts/rebuild-extension.sh \
--repo <remotion-checkout>
The script builds with Bun and installs the four unpacked-extension files in
/Users/jonathanburger/Applications/Remotion Canvas Capture Extension.
- Confirm that the installed directory contains
manifest.json,
background.js, content.js, and receiver.js.
Reload in Chrome
- Open
chrome://extensionsmanually in Chrome or Chrome Canary. - Enable Developer mode on
chrome://extensions. - If Remotion Canvas Capture already points to the durable directory, click
Reload.
- If Chrome shows the deleted worktree path, remove that broken entry, choose
Load unpacked, and select:
/Users/jonathanburger/Applications/Remotion Canvas Capture Extension
This one-time move changes the extension ID because Chrome derives unpacked
extension identity from its absolute path.
- Keep loading future builds from the durable directory, never from a
worktree-local dist directory.
- Enable
chrome://flags/#canvas-draw-elementand restart Chrome when the
experimental HTML-in-canvas API is unavailable.
Do not edit Chrome's Preferences or Secure Preferences files to move or
reload the extension, and do not automate the Chrome UI. Let the user use
Chrome's extensions page so its integrity metadata stays valid.
Other skills for the same job
different authors, same section of the catalogue
Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.
Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.
Best practices for Remotion - Video creation in React
Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming.
Best practices for Remotion - Video creation in React
Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.
Use this skill when building applications with Gemini API hosted models, including Gemini and Gemma 4, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or needing current model specifications. Covers SDK usage...
Turn error logs, screenshots, voice notes, and rough bug reports into crisp, developer-ready GitHub issues with repro steps, impact, and evidence.
How to use it
Take remotion-dev/canvas-capture-extension from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.