CtrlK
BlogDocsLog inGet started
Tessl Logo

remotion

Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling

77

1.43x
Quality

67%

Does it follow best practices?

Impact

93%

1.43x

Average score across 3 eval scenarios

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./cli-tool/components/skills/video/remotion/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is an effective, well-structured index with an executable quick start, verified reference files, and strong progressive disclosure. Its main weaknesses are redundant capability listings across three sections and the absence of an explicit end-to-end workflow with validation checkpoints.

Suggestions

Merge "When to use", "Core Concepts", and "Key Features" into a single capability section; they repeat the same list (animations, media, charts, captions, 3D, transitions) three times.

Add a brief end-to-end workflow (create project → register composition → preview in Remotion Studio → render with `npx remotion render`) with a verify-then-render checkpoint.

Drop the redundant appositive "a framework for creating videos programmatically using React" from the intro; the heading already states it.

DimensionReasoningScore

Conciseness

"When to use", "Core Concepts", and "Key Features" repeat largely the same capability list three times, and the intro sentence "a framework for creating videos programmatically using React" restates the heading; no tutorial-style padding of known concepts, so not lower.

3 / 5

Actionability

The Quick Start is executable copy-paste React using `useCurrentFrame`, `useVideoConfig`, and `interpolate` with `extrapolateRight: 'clamp'`, and Best Practices are concrete directives ("Avoid CSS animations", "Multiply time in seconds by `fps`"). Not 5 because no setup or render command (e.g. `npx remotion render`) appears inline for the common end-to-end case.

4 / 5

Workflow Clarity

There is a loose sequence (read rule files, apply the Quick Start pattern, follow Best Practices) and one implicit checkpoint ("Test frequently - Preview in Remotion Studio before rendering"), but no explicit end-to-end workflow (setup → compose → preview → render) with validation checkpoints. No destructive or batch operations, so the cap-below-3 rule does not apply.

3 / 5

Progressive Disclosure

The body is a clear overview with well-signaled, one-level-deep links grouped into thematic categories; all 28 linked references/*.md files were verified to exist on disk, and onward links from references to assets/*.tsx are code examples, not a nested documentation chain.

5 / 5

Total

15

/

20

Passed

Description

70%Weight 40%Scale 1-5

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 names a distinct, well-defined domain with several concrete capability areas, but it lacks any explicit "use when" trigger clause, which limits its completeness and leaves trigger terms implicit. Dropping the "best practices and comprehensive guide" filler in favor of when-to-use guidance would raise it further.

Suggestions

Add an explicit trigger clause, e.g. "Use when working with Remotion code, rendering videos from React, or when the user mentions Remotion, programmatic video, or motion graphics."

Replace the "Best practices and comprehensive guide" filler with additional concrete capabilities (rendering/export, captions, 3D, charts) to broaden what is promised.

Include natural user phrasings like "make a video in React" or "render a video programmatically" to catch users who don't name the framework.

DimensionReasoningScore

Specificity

"programmatic video creation in React with animations, compositions, and media handling" names several concrete capability areas, though "Best practices and comprehensive guide" is filler and capabilities are topic nouns (rendering, captions, 3D are unmentioned) rather than an exhaustive action list.

4 / 5

Completeness

The "what" is clear (programmatic video creation in React with animations, compositions, media handling), but there is no "Use when..." clause or equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines.

3 / 5

Trigger Term Quality

"Remotion", "video creation", "React", "animations", "compositions", and "media" are terms a user would naturally say, but common variations like "make/render a video", "captions", or "3D" are missing.

4 / 5

Distinctiveness Conflict Risk

"Remotion" names a specific niche framework, so the description is clearly distinguishable from other skills and unlikely to trigger the wrong skill.

5 / 5

Total

16

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
davila7/claude-code-templates
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.