Remotion Rule: Measuring Dom Nodes

What it is

This is a Remotion skill rule that teaches AI coding assistants how to correctly measure DOM element dimensions inside Remotion video projects. Remotion applies a scale() CSS transform to the video container, which means raw getBoundingClientRect() values are inaccurate unless you divide by the current scale factor.

This rule is part of the official Remotion Agent Skill collection, designed for developers using Claude Code, Cursor, or OpenAI Codex to build programmatic videos in React.

How it saves time or tokens

Without this rule, an AI assistant will generate measurement code that uses getBoundingClientRect() directly, producing incorrect dimensions. Developers then spend time debugging why layout calculations are off by a fractional multiplier. The rule injects the correct pattern (dividing by useCurrentScale()) into the assistant's context automatically, eliminating a common source of visual bugs in Remotion projects.

How to use

1. Install the Remotion skills collection:

npx skills add remotion-dev/skills

1. The rule activates automatically when your AI assistant detects DOM measurement work in a Remotion project.

1. When you need element dimensions, the assistant will generate code using useCurrentScale() to compensate for the container transform.

Example

import { useCurrentScale } from 'remotion';
import { useRef, useEffect, useState } from 'react';

export const MeasuredComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const scale = useCurrentScale();
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setDimensions({
      width: rect.width / scale,
      height: rect.height / scale,
    });
  }, [scale]);

  return (
    <div ref={ref}>
      <p>Width: {dimensions.width}px</p>
      <p>Height: {dimensions.height}px</p>
    </div>
  );
};

Related on TokRepo

• Featured Workflows — Browse top-rated AI skills and workflows
• Automation Tools — Tools for automating development tasks

This tool integrates with standard development workflows and requires minimal configuration to get started. It is available as open-source software with documentation and community support through the official repository. The project follows semantic versioning for stable releases.

For teams evaluating this tool, the key advantage is reducing manual work in repetitive tasks. The automation provided by the built-in features means less custom code to maintain and fewer integration points to manage. This translates directly to lower maintenance costs and faster iteration cycles.

Common pitfalls

• Forgetting to divide by the scale factor is the most common mistake; raw getBoundingClientRect() values will be scaled proportionally to the video container size.
• The scale value changes when the preview window is resized, so always read it reactively via the useCurrentScale() hook rather than caching a static value.
• This rule only applies to Remotion projects; in standard React apps without a scale transform, getBoundingClientRect() works as expected without correction.