create-remotion-geist

Generate Remotion videos styled with Vercel's Geist design system.

5|2|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/s1366560/agi-demos --skill create-remotion-geist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-remotion-geist
Source: https://github.com/s1366560/agi-demos/tree/main/.memstack/skills/create-remotion-geist
Command: npx skills add https://github.com/s1366560/agi-demos --skill create-remotion-geist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/cli, @remotion/tailwind, react, react-dom, tailwindcss, typescript, @types/react, @geist-ui/icons, and includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of professional-looking videos and animations by providing a pre-configured setup and design system based on Vercel's Geist aesthetic.

Core Features & Use Cases

  • Geist Design System: Applies Vercel's dark theme, spring animations, typography, and color palette to Remotion videos.
  • Efficient Video Production: Offers quick start guides and templates for scenes, components, and animations.
  • Use Case: Generate a promotional video for a new software feature, ensuring it aligns with your company's brand guidelines by using the Geist design system.

Quick Start

Use the create-remotion-geist skill to scaffold a new Remotion project with Geist styling.

Frequently Asked Questions about create-remotion-geist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create Remotion videos with Vercel's Geist design system?

To create Remotion videos with the Vercel Geist design system, you can scaffold a project pre-configured with dark backgrounds, spring animations, Geist typography, and a specific color palette to ensure visual consistency.

Can I use Tailwind CSS and React to build motion graphics in Remotion?

Yes, you can use Tailwind CSS and React to build motion graphics in Remotion. The setup requires specific npm packages including @remotion/tailwind and react-dom to apply styling and compose video scenes efficiently.

What dependencies do I need to set up a Remotion project with Tailwind and TypeScript?

Setting up a Remotion project with Tailwind and TypeScript requires installing dependencies like remotion, @remotion/cli, @remotion/tailwind, react, react-dom, tailwindcss, and @geist-ui/icons to enable full functionality.

How do I add Vercel-style spring animations to my video components?

You can add Vercel-style spring animations to your video components by utilizing the pre-configured Remotion setup, which incorporates specific spring animation behaviors alongside the Geist dark theme and color palette.

Does the Geist design system work for creating software promotional videos?

Yes, the Geist design system works for creating software promotional videos. It applies Vercel's professional dark theme, typography, and motion graphics aesthetic to ensure your video aligns with modern brand guidelines.

Why is my Remotion video missing the correct Geist fonts and color palette?

Your Remotion video may be missing the correct Geist fonts and color palette if the required configuration files for fonts and root composition are not properly set up during your initial project scaffold.