CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

remotion-to-hyperframes

Port an existing Remotion (React) composition to HyperFrames HTML. Use ONLY when the user explicitly asks to port/convert/migrate/translate a Remotion source. Do NOT use: (a) authoring a new HyperFrames composition; (b) Remotion mentioned in passing; (c) Remotion code shared as reference only; (d) "same video as my Remotion one" without explicit migrate request — treat as fresh build. Doubt → `/general-video`. One-way, Remotion-only: no reverse export (HyperFrames→Remotion or any framework), no non-Remotion source (After Effects, Framer Motion, plain React/CSS) → out of scope, re-create via `/general-video`. Flags unsupported patterns (useState, useEffect, async calculateMetadata, third-party React libs, `@remotion/lambda`) and recommends runtime interop over lossy translation. Unsure whether to port vs. build fresh, or only a passing Remotion mention? → /hyperframes.

77

Quality

97%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

92%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 strong, highly actionable skill body: a gated five-step workflow with measurable SSIM validation and an error-recovery loop, copy-paste commands, a concrete output contract, and exemplary progressive disclosure via a pattern-to-reference table with verified bundle files. The only weakness is redundancy — the one-way/Remotion-only boundary is repeated across three sections and the @remotion/lambda clarification appears twice.

Suggestions

Consolidate the one-way/Remotion-only boundary statement into a single section — the opening blockquote, the 'NOT SUPPORTED' subsection, and 'What this skill explicitly does NOT do' all repeat the same reverse-export/non-Remotion exclusions; keeping it once (plus the frontmatter description, which already covers it) would trim ~10 lines.

Cut the parenthetical @remotion/lambda re-clarification at the end of 'What this skill explicitly does NOT do' — it duplicates the Step 1 warning-case explanation and the escape-hatch.md link already given.

DimensionReasoningScore

Conciseness

The body is efficient — it assumes Claude knows React/GSAP/Remotion basics, explains nothing elementary, and keeps every section operational. However, the one-way/Remotion-only boundary is stated three times (the opening blockquote, the 'NOT SUPPORTED' section under 'When to use', and 'What this skill explicitly does NOT do'), and the @remotion/lambda-is-a-warning clarification appears both in Step 1 and again at line 108. This matches the level-4 anchor (efficient with minor instances that could be trimmed) rather than level-5 (every token earns its place), since consolidating the boundary statement to one section would remove real duplication.

4 / 5

Actionability

Guidance is fully executable: a copy-paste render/diff command block ('npx remotion render <CompositionId> out/baseline.mp4', 'npx hyperframes render --skill=remotion-to-hyperframes', '../../scripts/render_diff.sh'), a concrete output spec (root div with 'data-composition-id, data-start="0", data-duration... data-fps, data-width, data-height', 'one paused gsap.timeline({paused: true})', 'window.__timelines["<composition-id>"] = tl;'), and exact validation prerequisites ('Config.setVideoImageFormat("png")' + 'Config.setColorSpace("bt709")'). Matches the level-5 anchor — copy-paste ready commands covering the common cases.

5 / 5

Workflow Clarity

The five-step workflow has an explicit gate (Step 1 lint: 'If any blocker fires, stop'), an explicit validation step with a measurable threshold ('~0.02 below p05 of the source's complexity tier'), and a genuine feedback loop for error recovery ('If the diff fails, run scripts/frame_strip.sh to see which frames diverged, then re-read the relevant timing/sequencing/media reference'). Matches the level-5 anchor: clear sequence, explicit validation, and retry guidance after failure.

5 / 5

Progressive Disclosure

The SKILL.md body is a lean overview with well-signaled, one-level-deep references: a table maps each source pattern ('Sequence, Series, Loop...' → sequencing.md; '@remotion/lottie' → lottie.md) with the instruction 'Don't load all of them — load only what the specific source needs', api-map.md serves as an in-scope index, and all ten referenced files plus scripts/ and assets/test-corpus/ exist in the bundle as described. Matches the level-5 anchor — clear overview, appropriately split content, easy navigation.

5 / 5

Total

19

/

20

Passed

Description

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

An exemplary description: concrete what, explicit when with enumerated exclusions, natural trigger synonyms (port/convert/migrate/translate), and explicit routing to adjacent skills that eliminates conflict risk. Third-person voice is maintained and every clause carries routing information rather than fluff.

DimensionReasoningScore

Specificity

The description states multiple concrete actions with comprehensive coverage of its niche: 'Port an existing Remotion (React) composition to HyperFrames HTML', 'Flags unsupported patterns (useState, useEffect, async calculateMetadata, third-party React libs, @remotion/lambda) and recommends runtime interop over lossy translation'. Every clause names a specific capability or boundary rather than generic language; it is not a level-4 case because no meaningful capability in scope is left uncovered (forward port, flag-and-refuse behaviors, reverse/non-Remotion exclusions are all enumerated).

5 / 5

Completeness

It explicitly answers both questions: what — 'Port an existing Remotion (React) composition to HyperFrames HTML'; when — 'Use ONLY when the user explicitly asks to port/convert/migrate/translate a Remotion source', reinforced by an enumerated 'Do NOT use' list (a)–(d) covering passing mentions and reference-only code. This matches the level-5 anchor (concrete what AND when with explicit trigger guidance); level 4 would leave the 'when' less explicit.

5 / 5

Trigger Term Quality

Natural trigger verbs users would say are comprehensively covered with synonyms: 'port/convert/migrate/translate a Remotion source', plus the domain terms 'Remotion (React) composition' and 'HyperFrames HTML'. It matches the level-5 anchor (comprehensive natural-term coverage including synonyms); file extensions are not applicable to a project-port skill, so nothing natural is missing. Level 4 would require missing common variations, which is not the case.

5 / 5

Distinctiveness Conflict Risk

The skill has a clear niche with explicit disambiguation from adjacent skills: it enumerates four do-not-trigger cases, excludes the reverse direction ('no reverse export (HyperFrames→Remotion or any framework)') and non-Remotion sources (After Effects, Framer Motion, plain React/CSS), and routes ambiguity elsewhere ('Doubt → /general-video', 'Unsure...? → /hyperframes'). Minimal conflict risk; not level 4 because no material overlap with related skills remains unaddressed.

5 / 5

Total

20

/

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

calesthio/OpenMontage

Path

.agents/skills/remotion-to-hyperframes/SKILL.md

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.