CtrlK
BlogDocsLog inGet started
Tessl Logo

hyperframes

Create AI videos with HyperFrames in Hermes using HTML, CSS, and JavaScript compositions, then validate and render them to MP4. Use for short video intros, cinematic trailers, product promos, subtitle animations, HUD/tech visuals, web-to-video work, and motion graphics.

64

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./packages/skills/hyperframes/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

75%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 tight, executable skill body: concrete CLI commands, a well-sequenced workflow with validation before render, and a clear completion standard. The main gaps are the absence of a minimal example composition (the one artifact Claude must author correctly), an unstated fix-and-revalidate loop for lint/inspect failures, and an intro paragraph that restates the frontmatter description.

Suggestions

Add a minimal, copy-paste-ready example composition HTML showing the root data-composition-id/data-width/data-height element, one timed clip, and a GSAP timeline registered on window.__timelines — this would close the actionability gap for the core artifact.

Make the validation loop explicit: after lint/inspect, state 'If issues are found (e.g., text or HUD elements outside the frame), fix the composition and re-run inspect until clean before rendering', which upgrades workflow clarity to include error-recovery feedback.

Trim the opening paragraph that re-lists trigger scenarios already covered by the frontmatter description, and fold the 'Do not stop after writing HTML' reminder into the Delivery checklist to remove duplicated guidance.

DimensionReasoningScore

Conciseness

The body is efficient — terse command blocks and rule bullets with no textbook explanation of HTML/CSS/JS — but the opening paragraph ('Use this skill when the user asks Hermes to make a video with HyperFrames, such as a 30-second vertical video, a short intro, a cinematic micro-trailer...') largely duplicates the frontmatter description, and 'Do not stop after writing HTML' overlaps the Delivery section. These are minor trimmable instances, matching anchor 4 rather than anchor 5's 'every token earns its place'.

4 / 5

Actionability

Workflow and Setup give copy-paste-ready commands ('npx hyperframes init my-video --non-interactive', 'lint', 'inspect --samples 15', 'render --output final.mp4 --quality standard') plus concrete attribute names (data-composition-id, data-start, window.__timelines). Not anchor 5: there is no example composition HTML demonstrating the data-* structure or timeline registration, so the core artifact is described but not copy-paste ready; not anchor 3: guidance is concrete and executable, not pseudocode.

4 / 5

Workflow Clarity

A clear 7-step numbered sequence with an explicit validation checkpoint ('Validate before rendering: lint, inspect --samples 15'), environment triage ('npx hyperframes doctor'), and a completion criterion ('only complete after... lint and inspect, and rendered to an MP4'). Not anchor 5: the fix-and-revalidate loop when lint/inspect report issues (e.g., text outside the frame) is implied but never stated as a retry step; not anchor 3: validation steps are explicit and correctly placed, not implicit.

4 / 5

Progressive Disclosure

Well-organized single-file structure (Setup, Workflow, Composition Rules, Delivery) with no nested or buried references — no bundle files exist, so there is nothing misleading to navigate. Not anchor 5 (via the under-50-lines exception): the body runs ~73 lines and the data-attribute/Composition Rules detail sits inline where a one-level-deep reference file could carry it; not anchor 3: content is appropriately placed for a skill of this size and navigation is trivial.

4 / 5

Total

16

/

20

Passed

Description

83%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: third-person voice, concrete capabilities with a named toolchain, and an explicit 'Use for' clause covering seven realistic trigger scenarios. Minor gaps are missing synonym variations ('animated captions', 'make a video') and slightly limited capability coverage beyond create/validate/render.

DimensionReasoningScore

Specificity

The description names concrete actions — 'Create AI videos with HyperFrames... using HTML, CSS, and JavaScript compositions, then validate and render them to MP4' — with named technology (MP4, HyperFrames, Hermes). It stops short of anchor 5 because coverage is limited to create/validate/render; capabilities like preview, lint/inspect, or project scaffolding are absent, but it clearly exceeds anchor 3's '1-2 concrete actions'.

4 / 5

Completeness

Both halves are explicit: 'what' is 'Create AI videos... validate and render them to MP4' and 'when' is a concrete 'Use for...' clause enumerating seven trigger scenarios. This matches the anchor-5 example pattern (capabilities + explicit trigger phrases) rather than anchor 4, whose 'when' is more generic ('Use when working with PDF files').

5 / 5

Trigger Term Quality

'Use for short video intros, cinematic trailers, product promos, subtitle animations, HUD/tech visuals, web-to-video work, and motion graphics' gives good natural-phrase coverage a user would actually say. Not anchor 5: common variations like 'make a video', 'animated captions', 'animate', 'vertical video', or 'shorts' are missing; not anchor 3: multiple natural synonyms and formats are present.

4 / 5

Distinctiveness Conflict Risk

The niche is clear — HyperFrames HTML-to-MP4 rendering in Hermes — with mostly distinct triggers. Not anchor 5 because broad terms like 'AI videos' and 'motion graphics' could overlap with a generic video-editing or animation skill; not anchor 3 because the tool-specific framing and use-case list keep it well distinguishable.

4 / 5

Total

17

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

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

Warning

Total

13

/

16

Passed

Repository
EKKOLearnAI/hermes-studio
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.