Claude Code + Remotion

turn a website link into a video

STEP 1

Install Claude Code

Official docs and install guide: https://docs.claude.com/en/docs/claude-code/overview

STEP 2

Install Node.js (if you don't have it)

Homebrew on Mac: https://brew.sh
Or download from the official site: https://nodejs.org

STEP 3

Install the Remotion skill

1) Remotion — React framework for video: https://www.remotion.dev
2) Remotion docs: https://www.remotion.dev/docs
3) Remotion on GitHub: https://github.com/remotion-dev/remotion

STEP 4

What the stack already does

→ Graph animations from your data
→ Highlight reels from article URLs
→ Promo videos from any website page
→ Product feature walkthroughs

STEP 5

Two tips

1

Build a separate skill for each format — one for 16:9, another for 9:16

2

Ask Claude to enable props on every element — you'll be able to tweak any parameter in Remotion Studio without regenerating

The Official Anthropic Skills Repo

Unlock the official Anthropic Skills repo that most developers overlook. Discover what is inside and learn how to install open-standard skills in Claude Code.

10 Claude Code Workflow Tips From the Anthropic Team

3 Claude Code Skills That Turn You Into a Designer

Transform flat interfaces into professional UI designs. Discover 3 Claude Code skills that add real motion, polish typography, and eliminate AI-looking output.

6 Claude Code Plugins: From Code Review to Persistent Memory

Explore 6 Claude Code plugins to empower your AI agent. Automate complex marketplace workflows, add persistent memory, and scale your e-commerce operations.

Claude Code .claude/ Folder Explained — Full Map

Master the complete Claude Code .claude/ folder map. Learn how to configure CLAUDE.md, MCP servers, hooks, skills, and agents to optimize your AI workflows.

claude code commands

Master all essential Claude Code commands with this complete 2026 cheat sheet. Save your AI quota, manage context, and optimize your coding workflow today.