CtrlK
BlogDocsLog inGet started
Tessl Logo

video-template-frame-vignelli

Use this plugin when the user wants a "Vignelli" HyperFrames motion video — Bold typography with red accents

56

Quality

64%

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 ./plugins/_official/video-templates/frame-vignelli/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%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 an exemplary lean overview: tight sections, concrete specs, and a clearly signaled single bundle reference. Its weaknesses are the missing render command (the one truly executable step) and the absence of any validation checkpoint in the workflow.

Suggestions

Replace 'Render to MP4 via the html-video / HyperFrames renderer' with the actual render command (e.g., `hyperframes render source/index.html --format mp4 --fps 30 --duration 10s`).

Add a validation step after editing, e.g., 'Verify the animation timeline still plays correctly before rendering' and 'Confirm the rendered MP4 duration and resolution match 10s at 9:16'.

State what 'keep the motion timing and visual signature intact' concretely means (e.g., which GSAP timeline files or layer names must not be modified).

DimensionReasoningScore

Conciseness

The body is ~20 lean lines with zero padding or explanations of concepts Claude already knows; every token earns its place (e.g., 'renders deterministically to MP4 / WEBM at 9:16, default 10s, 30fps' gives exactly the non-obvious specs). Matches the 'Lean and efficient' anchor; no neighboring anchor fits better.

5 / 5

Actionability

Steps 1-3 are reasonably concrete ('Read source/index.html', 'Replace the sample copy', 'keep the composition self-contained under source/'), but the critical render step is only 'Render to MP4 via the html-video / HyperFrames renderer' with no command or code. Not 4 because no executable command appears anywhere in the body.

3 / 5

Workflow Clarity

A clear 4-step sequence is present (understand layers, replace copy, keep self-contained, render), but there is no validation checkpoint (e.g., confirming the render completed or that motion timing survived the copy swap). Matches 'Steps listed but validation gaps'; not 4 because checkpoints are entirely absent rather than minor-gapped.

3 / 5

Progressive Disclosure

The skill is under 50 lines with well-organized sections, and its single bundle reference (source/index.html) is clearly signaled one level deep — the simple-skill exception applies. Not 4 because there are no organization gaps: each section is short and purposeful.

5 / 5

Total

16

/

20

Passed

Description

57%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 has a clear, explicit 'when' clause and occupies a distinct niche, but it describes the artifact's look rather than what the skill does, and its trigger terms lean on brand jargon ('Vignelli', 'HyperFrames') instead of natural user language. Adding concrete actions and natural synonyms would materially improve it.

Suggestions

State concrete actions explicitly, e.g., 'Renders a 9:16 MP4/WEBM motion video from an HTML + CSS + GSAP template, and swaps in the user's copy while preserving the animation timeline.'

Add natural trigger synonyms users would actually say: 'vertical video', 'portrait social video', 'promo clip', 'bold statement card', 'motion graphics'.

Replace or supplement the jargon trigger with plain-language conditions, e.g., 'Use when the user asks for a bold, typography-driven social video with red accents.'

DimensionReasoningScore

Specificity

The description names the domain ("Vignelli" HyperFrames motion video — Bold typography with red accents) but lists no concrete actions — no verbs like renders, generates, or customizes. It matches 'Names the domain but actions are minimal or generic' and falls short of 3, which requires 1-2 concrete actions.

2 / 5

Completeness

It has an explicit trigger ("Use this plugin when the user wants a 'Vignelli' HyperFrames motion video") and a reasonably clear 'what' via the artifact description. Not 5 because the 'what' relies on the artifact name rather than explicitly stating what the skill does (e.g., renders a 9:16 MP4 from an HTML/GSAP template).

4 / 5

Trigger Term Quality

Some relevant keywords are present ("motion video", "Vignelli", "Bold typography", "red accents") but common user phrasings like "vertical video", "promo video", "9:16", or "social clip" are missing. Not 4 because natural-term coverage is thin relative to the good examples.

3 / 5

Distinctiveness Conflict Risk

The niche is distinct ('Vignelli' HyperFrames motion video) with minimal conflict risk against other skills. Not 5 because the triggers depend on product-specific jargon a user would rarely say naturally, which risks missed triggers even though wrong-skill triggering is unlikely.

4 / 5

Total

13

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

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.