remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
Install with Tessl CLI
npx tessl i github:davila7/claude-code-templates --skill remotion64
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
40%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description identifies a clear technical niche (Remotion for React video creation) which provides good distinctiveness, but it reads more like a documentation title than a skill description. It lacks explicit trigger guidance and specific actionable capabilities, relying on broad category terms instead of concrete actions Claude would perform.
Suggestions
Add a 'Use when...' clause specifying triggers like 'when the user asks about Remotion, programmatic video generation, React video projects, or rendering videos with code'
Replace broad terms like 'comprehensive guide' with specific actions: 'Create video compositions, animate elements with spring physics, sequence clips, render to MP4'
Include common user phrasings and file types: 'video rendering', '.mp4 output', 'frame-by-frame animation', 'video timeline'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Remotion, React video creation) and mentions some capabilities (animations, compositions, media handling), but these are broad categories rather than concrete actions like 'create video sequences' or 'add transitions between clips'. | 2 / 3 |
Completeness | Describes what the skill covers (Remotion best practices and guide) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'Remotion', 'React', 'video creation', 'animations', but misses common user terms like 'programmatic video', 'video rendering', 'video editing in code', or file extensions. | 2 / 3 |
Distinctiveness Conflict Risk | Remotion is a specific technology with a clear niche (programmatic video in React), making it unlikely to conflict with other skills. The combination of 'Remotion' + 'React' + 'video' creates a distinct trigger profile. | 3 / 3 |
Total | 8 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill demonstrates strong progressive disclosure with well-organized reference links and provides actionable code examples. However, it could be more concise by removing explanatory content about React/Remotion basics that Claude already knows, and would benefit from clearer workflow guidance for common video creation tasks.
Suggestions
Remove or significantly trim the 'Core Concepts' section - Claude already understands React components and frame-based animation concepts
Add a workflow section showing the complete process from project setup to rendered video with explicit validation steps (e.g., preview in Studio, check frame count, verify audio sync)
Condense the 'When to use' section - the bullet list largely duplicates the reference link categories below
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill includes some unnecessary explanatory text (e.g., 'Comprehensive skill set for creating programmatic videos') and the 'Core Concepts' section explains things Claude already knows about React and components. However, the reference links and quick start example are efficient. | 2 / 3 |
Actionability | The quick start example is fully executable, copy-paste ready TypeScript/React code. The skill provides concrete guidance through well-organized reference links to detailed documentation for each feature area. | 3 / 3 |
Workflow Clarity | The 'Best Practices' section provides useful guidelines but lacks explicit workflow sequences with validation checkpoints. For a framework skill, there's no clear step-by-step process for creating a video from start to finish with verification steps. | 2 / 3 |
Progressive Disclosure | Excellent structure with a clear overview, organized reference links grouped by category (Core Animation, Assets, Text, etc.), and one-level-deep navigation to detailed files. The categorization makes discovery easy. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.