CtrlK
BlogDocsLog inGet started
Tessl Logo

hyperframes

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

72

Quality

92%

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

85%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 highly actionable with strong, validated workflows and a clean reference index, but progressive disclosure is undermined by four dangling references — two of them (house-style.md, visual-styles.md) load-bearing to the stated Visual Identity Gate — and there is some length in the OpenDesign render section that could be tightened.

Suggestions

Create the missing referenced files (house-style.md, visual-styles.md, patterns.md, data-in-motion.md) or remove the links — house-style.md and visual-styles.md are cited as the default-motion and 8-preset authorities the Visual Identity Gate depends on, so their absence breaks the gate the skill instructs Claude to follow.

Tighten the OpenDesign render workflow: keep the fast-path summary inline and move the full dispatch wait-loop (or its verbose inline comments) into a script under ./scripts/ or a reference file to reduce token load.

Flatten the transitions routing (SKILL.md → transitions.md → transitions/catalog.md is 2 levels deep) by merging catalog.md into transitions.md or linking the per-type files directly from the SKILL.md reference list.

DimensionReasoningScore

Conciseness

The body is dense with actionable rules, tables, and complete code rather than concept padding, but the OpenDesign render workflow carries a long bash loop with verbose inline comments and rationale ('Why this matters:', repeated sandbox-exec/daemon explanations) that could be trimmed — efficient with minor over-explanation, not the lean 'every token earns its place' anchor.

4 / 5

Actionability

Provides fully executable, copy-paste-ready guidance: a complete OD dispatch bash script with the wait-loop, concrete HTML/CSS/GSAP examples, attribute tables with exact values, and named commands (lint, validate, inspect) — matching the top anchor's 'specific examples cover the common cases'.

5 / 5

Workflow Clarity

Sequenced processes (Approach → Layout Before Animation → render → Output Checklist → Quality Checks) with explicit validation checkpoints (lint/validate/inspect/contrast/animation-map) and feedback loops ('Re-run hyperframes validate until clean', 'If errors: fix and re-validate'), and a checklist — matching the top anchor; the render operation is not destructive and validation is present so no cap applies.

5 / 5

Progressive Disclosure

Structure and signaling are good (a 'References (loaded on demand)' section with a 'Read when...' trigger per file, content split into captions/tts/audio-reactive/typography/etc.), but four referenced files are missing from the bundle — including load-bearing house-style.md (the default-motion authority cited repeatedly) and visual-styles.md (the 8-preset source central to the Visual Identity Gate), plus patterns.md and data-in-motion.md — so navigation is broken beyond a 'minor organization gap'; transitions.md also routes to a 2-level-deep transitions/catalog.md.

3 / 5

Total

17

/

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.

The description is third-person, comprehensive, and explicitly pairs a strong 'what' with concrete 'Use when...' triggers covering captions, TTS, audio-reactive, animated highlighting, and transitions. It is among the strongest reference examples and needs no changes.

DimensionReasoningScore

Specificity

Enumerates many concrete actions — 'Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions' plus per-feature verbs like 'add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation... add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions' — matching the comprehensive-coverage anchor rather than the 'several actions with minor gaps' anchor below it.

5 / 5

Completeness

Explicitly answers both what ('Create video compositions, animations, title cards, overlays, captions, voiceovers...') and when ('Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration...') with concrete trigger phrases, matching the top anchor; it is not the 'when could be more explicit' level below.

5 / 5

Trigger Term Quality

Dense natural-term coverage with synonyms ('captions or subtitles', 'text-to-speech narration', 'beat sync, glow, pulse', 'crossfades, wipes, reveals, shader transitions') that a user would actually say; no file extensions appear but the synonym breadth fits the comprehensive anchor better than the 'a few natural terms missing' anchor.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear HyperFrames-HTML niche with highly distinctive triggers ('drawElementImage', 'vfx-liquid-glass', 'vfx-portal', 'html shader') and explicitly defers CLI to a separate 'hyperframes-cli' skill, giving minimal conflict risk per the top anchor.

5 / 5

Total

20

/

20

Passed

Validation

75%

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

Validation12 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (503 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 7 missing, 1 deeper-than-1-level

Warning

referenced_paths_exist

Referenced path issues: 1 deeper-than-1-level

Warning

Total

12

/

16

Passed

Repository
nexu-io/open-design
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.