snapcn
93 components
DocsComponentsTemplatesVideo EditorNewMCPNewRemotion StudioNewRoadmapChangelog

Getting started

IntroductionInstallationAgent skill
GitHub

Star snapcn

Free, open-source components.

Production-ready Remotion animations, transitions and backgrounds — you own the code, free or paid.

Star on GitHubXFollow

43 MIT · 50 Pro · own your code.

© 2026 snapcn

Loading
snapcn
93 components
DocsComponentsTemplatesVideo EditorNewMCPNewRemotion StudioNewRoadmapChangelog

Getting started

IntroductionInstallationAgent skill
GitHub

Star snapcn

Free, open-source components.

Production-ready Remotion animations, transitions and backgrounds — you own the code, free or paid.

Star on GitHubXFollow

43 MIT · 50 Pro · own your code.

© 2026 snapcn

DocsComponentsTemplatesVideo EditorNewMCPNewRemotion StudioNewRoadmapChangelog
Getting startedIntroductionInstallationAgent skill

Agent Skill

Install the snapcn agent skill with skills.sh so your AI generates better Remotion videos

snapcn ships an agent skill — a knowledge pack that teaches AI coding agents (Claude Code and friends) how to build videos with snapcn: the full component catalog with props and durations, design defaults, motion-design principles, and common anti-patterns.

Once installed, your agent picks the right components, budgets the timeline correctly, and styles your additions to match the library — without you pasting context every time.

Install with skills.sh

The skill lives in the skills/ folder of the snapcn repo. Install it with the skills CLI:

npx skills add snapcndev/snapcn

snapcn is the only skill the repo publishes, so the CLI just asks which agent to install it into (for Claude Code that is .claude/skills/snapcn/).

Common flags

# Install globally (available in every project)
npx skills add snapcndev/snapcn --skill snapcn -g

# Target a specific agent
npx skills add snapcndev/snapcn -a claude-code

# Confirm what the repo publishes
npx skills add snapcndev/snapcn --list

Use without installing

To try it for a single session without writing files:

npx skills use snapcndev/snapcn@snapcn | claude

What's inside

FileContents
SKILL.mdInstall flow, the two tiers, categories, patterns, design defaults
references/components/One file per component — props, defaults, example, use / don't-use — plus index.md, the router table
references/archetypes/Per-archetype build recipes (product demo, changelog, logo bumper…)
references/anatomy.mdComposing a full video: strategy, the product-demo beats, the quality bar
references/design.mdAnti-slop design defaults + tokens (palette, fonts, canvas)
references/motion-principles.mdThe 12 motion principles adapted to snapcn
references/anti-patterns.mdCommon generation mistakes and their fixes

Prerequisites

  • An AI agent that loads skills (e.g. Claude Code).
  • A Remotion project with snapcn — see Installation.

Get the next component in your inbox

New free components as they ship, and the pro pack first when it lands. One email a week at most, never a sponsored one.