CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

70

Quality

88%

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.

A highly actionable, workflow-tight body: executable commands, explicit validation feedback loops, and disciplined rules with no filler. Its main defects are broken bundle wiring — four referenced root-level files (including the gate-required visual-styles.md and the fallback house-style.md) don't exist, and the animation-map script path is wrong — plus some duplicated rationale in the OpenDesign section.

Suggestions

Ship or fix the four missing root-level references — visual-styles.md, house-style.md, patterns.md, and data-in-motion.md. Two are load-bearing: the Visual Identity Gate's step 3 requires visual-styles.md, and house-style.md is the mandated default when no style is given, so following the skill as written dead-ends.

Correct the animation-map invocation to the script's actual location (scripts/animation-map.mjs relative to the skill) instead of `design-templates/hyperframes/scripts/animation-map.mjs`.

Deduplicate the daemon-dispatch rationale: the sandbox-exec explanation in scaffold step 4 and the later "Reserve the daemon dispatch for render/inspect/preview... Do not run HyperFrames render yourself" paragraph repeat the same instruction; keep one.

DimensionReasoningScore

Conciseness

The body is dense, rule-driven, and free of teaching Claude things it already knows — tables of data attributes, exact GSAP/CSS snippets, and CLI invocations with flags dominate. It misses 5 because of minor padding: the daemon-dispatch rationale is stated twice (scaffold step 4's sandbox-exec explanation, then again "Reserve the daemon dispatch for render/inspect/preview... Do not run HyperFrames render yourself" a few paragraphs later), and the "OpenDesign integration" section re-explains the cache-slot rationale twice. It is above 3 because there is no concept-splaining filler, only operational content with a few redundant passages.

4 / 5

Actionability

Guidance is fully executable: a copy-paste-ready bash scaffold + daemon dispatch + wait-loop (with exit-code semantics 0/2/5), exact GSAP tween code with eases and positions, concrete CSS for scene layout, and CLI commands with specific flags ("--samples 15", "--at 1.5,4,7.25", "--no-contrast") plus fix hints for each failure mode. This matches the anchor of copy-paste-ready commands covering the common cases; the only placeholders ("<descriptive-name>.mp4") are deliberately user-supplied.

5 / 5

Workflow Clarity

Multi-step processes are explicitly sequenced with validation checkpoints and feedback loops: the 5-step Approach, the scaffold → edit → dispatch → wait render flow, an Output Checklist ("lint and validate both pass", "inspect passes, or every reported overflow is intentionally marked"), and explicit retry loops ("Re-run hyperframes validate until clean", "Re-run after fixes"). This matches the anchor-5 example's validate → fix → re-validate pattern; not 4 because checkpoints are explicit rather than implicit at every fragile step.

5 / 5

Progressive Disclosure

The References section is well-signaled (each entry has a "Read when..." activation condition and stays one level deep), but scoring against the actual bundle reveals broken navigation: `visual-styles.md`, `house-style.md`, `patterns.md`, and `data-in-motion.md` are referenced from the body yet absent from the bundle — two of them load-bearing (the HARD-GATE step 3 requires visual-styles.md; house-style.md is the mandated fallback when no style is specified). Additionally the animation-map command points at `design-templates/hyperframes/scripts/animation-map.mjs` while the actual script is `scripts/animation-map.mjs`. Structure and signaling are good (above anchor 2's inlined-content problem), but "references mostly clear and working" (anchor 4) is not met when four referenced files are missing and a script path is wrong.

3 / 5

Total

17

/

20

Passed

Description

92%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: concrete and comprehensive on capabilities, explicit "Use when" triggers with natural phrasing, and an explicit boundary delegation to the hyperframes-cli skill. The only gap is the absence of file-extension/format synonyms (e.g. .mp4, .html) in the trigger terms.

DimensionReasoningScore

Specificity

The description lists many concrete actions ("video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions") and goes further with concrete sub-features ("marker sweeps, hand-drawn circles, burst lines, scribble, sketchout"; "crossfades, wipes, reveals, shader transitions"), matching the comprehensive-coverage anchor. It is not score 4 territory because coverage of the domain's capabilities has no noticeable gaps, and not below because every clause names a specific capability rather than generic language.

5 / 5

Completeness

Both questions are explicitly answered: the "what" opens the description ("Create video compositions, animations, title cards, overlays, captions, voiceovers...") and the "when" is an explicit "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. This is the anchor-5 pattern; it is not 4 because the when-clause is already fully explicit and specific.

5 / 5

Trigger Term Quality

Natural trigger phrases are well covered ("HTML-based video content", "captions or subtitles synced to audio", "generate text-to-speech narration", "beat sync", "add transitions between scenes"), matching the good-coverage anchor. It falls short of 5 because no file extensions or format synonyms appear (.mp4, .html, "render a video", "kinetic type") alongside otherwise strong keyword coverage, and it is clearly above 3 since multiple common variations users would actually say are present.

4 / 5

Distinctiveness Conflict Risk

It carves a clear niche ("in HyperFrames HTML", "HTML-based video content") and even disambiguates the sibling skill ("For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill"), giving minimal conflict risk with adjacent video/CLI skills. It is not 4 because the boundary to the nearest overlapping skill is drawn explicitly rather than left as minor overlap risk.

5 / 5

Total

19

/

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.

Validation — 12 / 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

Path

design-templates/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.