# Builder

> Use when creating Remotion video components, animations, or compositions. Triggers on "create a Remotion component", "build a video animation", "generate Remotion code", "make a text reveal", or when working on Remotion projects and needing component scaffolding.

- Skill: `tomevault-io/builder-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/builder-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/builder-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/builder-3

---


# Remotion Builder

Generates Remotion components, animations, and video compositions following best practices from the `remotion-best-practices` skill.

## Usage

```bash
# Interactive mode - asks what to build
/remotion-max:builder

# Generate specific component type
/remotion-max:builder text-reveal
/remotion-max:builder fade-transition
/remotion-max:builder video-composition

# Specify output path
/remotion-max:builder --output src/components/MyAnimation.tsx
```

**Arguments received:** $ARGUMENTS

## What This Command Does

1. **Understands the request**: Asks clarifying questions about what you want to build
2. **References best practices**: Consults the `remotion-best-practices` skill for patterns
3. **Generates code**: Creates properly typed TypeScript components
4. **Explains implementation**: Documents timing decisions and usage
5. **Suggests next steps**: How to register and use the component

## Common Component Types

### Animations
- `text-reveal` - Animated text reveals
- `fade-in` - Fade in transitions
- `slide-in` - Slide transitions
- `scale-animation` - Scale effects
- `rotation` - Rotation animations

### Media Components
- `video-player` - Video with controls (trim, speed, volume)
- `audio-sync` - Audio-synchronized animations
- `image-sequence` - Image sequences
- `caption-display` - Caption overlays

### Compositions
- `video-composition` - Full video composition structure
- `scene-sequence` - Multi-scene setup
- `dynamic-composition` - With calculateMetadata

## Examples

### Text Reveal Animation
```bash
/remotion-max:builder text-reveal
```

Generates:
```typescript
import {useCurrentFrame, interpolate, spring} from 'remotion';

export const TextReveal: React.FC<{text: string}> = ({text}) => {
  const frame = useCurrentFrame();
  const opacity = spring({
    frame,
    fps: 30,
    config: {damping: 200}
  });

  return <div style={{opacity}}>{text}</div>;
};
```

### Video Composition
```bash
/remotion-max:builder video-composition
```

Generates complete composition with:
- Intro scene
- Main content
- Outro scene
- Transitions between scenes

## Configuration Options

The command will ask about:
- **Duration**: How long should the animation be?
- **FPS**: Frame rate (default: 30)
- **Dimensions**: Video size (default: 1920x1080)
- **Styling**: Tailwind CSS or inline styles?
- **Assets**: Any media files to include?

## Output

Creates:
- TypeScript component file
- Usage documentation
- Registration code for Root.tsx
- Example props

## Integration with remotion-best-practices

This command automatically:
- References appropriate rule files from the skill
- Uses recommended patterns and APIs
- Follows timing best practices
- Implements type-safe code
- Includes performance optimizations

## Tips

- Run in your Remotion project directory
- Have your composition structure ready
- Know your video requirements (duration, size)
- Check existing components first to avoid duplicates

## Next Steps After Generation

1. Review the generated code
2. Add component to Root.tsx
3. Test in Remotion Studio (`npm start`)
4. Adjust timing/styling as needed
5. Render the video (`npm run build`)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/itsdevcoffee) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->