CtrlK
BlogDocsLog inGet started
Tessl Logo

remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

70

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

82%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.

A lean, code-first reference: executable Quick Start and catalog examples, a concrete spec schema, and compact lookup tables with essentially zero filler. The main gaps are that the custom-component example stops before showing the actual React component implementation, server-side rendering to a video file is never demonstrated, and the growing component/exports registries belong in one-level-deep reference files.

Suggestions

Add a minimal custom component example that actually defines MyCustomComponent (the React implementation receiving props), since that is the step the current example skips.

Include an executable example of rendering a spec to an output video file (e.g., via @remotion/cli or the package's render API) alongside the Player preview, so the most common use case is covered.

As the standard-component and export lists grow, move the Standard Components and Key Exports tables into a single one-level-deep reference file (e.g., references/components.md) linked from the body, keeping SKILL.md as a lean overview.

DimensionReasoningScore

Conciseness

Quotes: the body is entirely "Quick Start", "Using Standard Components", "Adding Custom Components", "Timeline Spec Structure", "Standard Components", "Key Exports" — code and tables with almost no prose. It never explains what Remotion or JSON is, assumes Claude's competence, and every line (component table, exports table, spec example) is information Claude cannot infer. Matches the 'lean and efficient; every token earns its place' anchor; the one-line intro that repeats the description is the only (trivial) redundancy, which is not enough to drop to 4.

5 / 5

Actionability

Quotes: the Quick Start, "Using Standard Components", and "Adding Custom Components" code blocks are real, executable TypeScript (imports, defineCatalog, Player props), and the Timeline Spec Structure JSON is concrete. Not a 5: the custom-components example references `components: { MyCustomClip: MyCustomComponent }` without ever defining `MyCustomComponent` (the actual React implementation is the hard part), and the most common case — actually rendering a video to a file (e.g., via @remotion/cli) — is absent; only Player preview is shown. Not a 3: the shown guidance is fully executable, not pseudocode.

4 / 5

Workflow Clarity

Quotes: the section order "Quick Start" → "Using Standard Components" → "Adding Custom Components" → "Timeline Spec Structure" → reference tables forms a coherent progression from default usage to customization to spec authoring. Not a 5: there is no validation checkpoint or error-recovery guidance (e.g., what to check when a spec fails to render), though the skill is non-destructive so no cap applies. Not a 3: the progression is clear and well-sequenced, not merely 'steps listed with implicit checkpoints'.

4 / 5

Progressive Disclosure

Quotes: sections are "## Quick Start", "## Using Standard Components", "## Adding Custom Components", "## Timeline Spec Structure", "## Standard Components", "## Key Exports" — a flat, well-organized overview with no nesting and no buried references (there are no bundle files, and none are strictly needed at ~110 lines). Not a 5: the body exceeds the under-50-lines simple-skill case, and the Standard Components and Key Exports tables are exactly the kind of registry content that would move to a one-level-deep reference file as the library grows. Not a 3: nothing is misplaced or inlined that clearly belongs elsewhere at this size.

4 / 5

Total

17

/

20

Passed

Description

87%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.

A strong description: it states a concrete capability (JSON timeline specs → videos) and follows with an explicit 'Use when...' clause containing four specific, natural trigger phrases. The only gaps are minor — slightly fuller coverage of rendering actions (e.g., output-to-MP4) and a couple of common synonyms would round it out.

DimensionReasoningScore

Specificity

Quotes: "turns JSON timeline specs into videos", "building video compositions from JSON", "creating video catalogs", "rendering AI-generated video timelines" — several concrete, distinct actions are named in both the what and the when clauses. Not a 5: the core 'what' is a single action (JSON→video conversion) and coverage is not fully comprehensive (e.g., no mention of transitions/effects or server-side rendering to MP4). Not a 3: it goes well beyond naming a domain with 1-2 generic actions.

4 / 5

Completeness

Quotes: "Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines." — an explicit 'Use when...' clause with four concrete triggers directly follows a clear statement of what the skill does. This matches the anchor-5 example structure (clear what + explicit when with concrete trigger phrases) exactly; nothing is only implied.

5 / 5

Trigger Term Quality

Quotes: "Remotion", "@json-render/remotion", "JSON timeline specs", "video compositions", "video catalogs", "AI-generated video timelines" — natural, specific terms a user working in this niche would actually say. Not a 5: a few common variations are missing (e.g., 'render video', 'MP4', 'video from JSON'). Not a 3: keyword coverage is good and domain-appropriate rather than merely 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

Quotes: "Remotion renderer for json-render", "@json-render/remotion", "JSON timeline specs" — a clear niche (JSON-spec-driven Remotion video rendering) with triggers unlikely to fire for unrelated skills. Minor residual overlap with generic video/Remotion skills, but the JSON-timeline framing keeps conflict risk minimal, matching the anchor-5 'clear niche with distinct triggers' example.

5 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/json-render
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.