What is the Callout Positioning skill?

It is a specialized Claude Code skill designed to help developers accurately position visual annotations like arrows, labels, and highlights in Remotion video projects.

How does the Debug Grid help in development?

The Debug Grid provides a visual overlay of pixel coordinates and rulers, allowing you to identify the exact X and Y values needed for placing elements without guessing.

Does this work with vertical video formats like TikTok or Reels?

Yes, it includes predefined coordinate systems and safe-zone guides for 1920x1080 (Landscape), 1080x1920 (Vertical), and 1080x1080 (Square) resolutions.

Is it possible to make callouts responsive across different resolutions?

Yes, the skill provides patterns for anchor-based and scale-based positioning, ensuring your annotations remain correctly placed even if the output resolution changes.

Callout Positioning & Video Annotation

Name: Callout Positioning & Video Annotation
Author: yonatangross

byyonatangross

•

设计工具

Simplifies the precise placement of arrows, callouts, and debug grids within Remotion video compositions across various aspect ratios.

This skill provides a comprehensive toolkit for developers using Remotion to create high-quality video annotations. It includes specialized components like debug grids and rulers to visualize pixel-perfect coordinates, ensuring callouts and arrows are accurately aligned regardless of the video's resolution or aspect ratio. With built-in support for responsive positioning and various callout styles—including pointers, brackets, and highlights—it streamlines the video production workflow from initial layout to final render, making it essential for technical tutorials and data-driven video content.

主要功能

01Visual Debug Grids and Rulers for pixel-precise coordinate mapping

02Standardized Calibration Workflow using screenshot-based measurement

03Multi-style Callout Components including pointers, brackets, and highlight overlays

04Responsive Anchor-based Positioning for cross-resolution compatibility

0569 GitHub stars

06Predefined Coordinate Systems for Landscape, Vertical (Shorts/Reels), and Square formats

使用场景

01Developing educational or tutorial videos requiring precise on-screen pointers and annotations

02Building reusable, animated callout libraries for production-ready Remotion templates

03Debugging coordinate misalignment in multi-format video exports like converting 16:9 to 9:16

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit callout-positioning

For use in Claude.ai and ChatGPT

Download Skill