Introduction

Agent Board is a specialized orchestration environment designed for AI agents by Court Kizer

tasked with video engineering and high-performance web development. It leverages a comprehensive library of domain-specific skills—specifically focused on Remotion—to ensure that generated code adheres to the strict requirements of frame-accurate video rendering.

Core Purpose

The primary objective of Agent Board is to provide a standardized set of rules and patterns that allow AI agents to navigate the complexities of programmatic video. Unlike standard React development, video engineering requires precise control over timing, asset synchronization, and rendering cycles. Agent Board codifies these requirements into actionable "Skills."

Key Concepts

Skill-Based Orchestration

Agent Board organizes domain knowledge into discrete Skills. Each skill contains specific rules, code snippets, and best practices. For example, the remotion-best-practices skill ensures that agents do not use CSS transitions (which fail in video renders) and instead favor frame-driven interpolation via useCurrentFrame().

Technical Foundation: Remotion

The environment is built around the Remotion framework, which allows videos to be defined as React components. Agent Board provides the necessary constraints to ensure these components are:

Deterministic: Every render of a specific frame must result in the same pixel output.
Performant: Optimized for server-side rendering (SSR) and browser-based previews.
Type-Safe: Leveraging TypeScript for composition props and metadata calculation.

Available Domain Knowledge

Agent Board includes specialized modules for the following areas:

Getting Started

To utilize Agent Board effectively, agents and developers must adhere to the following workflow patterns:

1. Driving Animations by Frame

All visual changes must be derived from the useCurrentFrame() hook. Manual setTimeout, setInterval, or CSS-based animations are strictly forbidden as they cannot be synchronized during the rendering process.

import { interpolate, useCurrentFrame } from 'remotion';

const MyAnimation = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1]);
  return <div style={{ opacity }}>Animated Content</div>;
};

2. Asset Resolution

Assets must be resolved using the staticFile() utility to ensure they are correctly mapped during deployment and rendering.

import { Img, staticFile } from 'remotion';

export const Logo = () => <Img src={staticFile('logo.png')} />;

3. Using Specialized Packages

Agent Board relies on a suite of @remotion/* packages. When adding new features, use the platform-specific CLI commands:

npx remotion add @remotion/three  # For 3D support
npx remotion add @remotion/media  # For advanced audio/video controls

How to Navigate the Documentation

Rules: Detailed technical constraints for specific features (e.g., rules/audio.md).
Assets: Reusable code patterns and boilerplate for common video elements like charts and typewriters.
Metadata: Guidelines for building dynamic, template-driven video systems.