CtrlK
BlogDocsLog inGet started
Tessl Logo

motion-frames

A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.

69

Quality

85%

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

SKILL.md
Quality
Evals
Security

Quality

Content

86%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, well-structured generative skill with precise, actionable specs and an explicit self-check, scoring high on conciseness and progressive disclosure. The two 4s reflect the absence of any literal executable code template and a missing iterate-on-failure feedback loop around the self-check.

Suggestions

Add a minimal executable skeleton — e.g. one fully defined `@keyframes rotate-slow`/`globe-spin` and a 10-line HTML shell with the layer `<div>`s and `data-od-id` hooks — so the output is copy-paste-ready, lifting actionability toward 5.

Turn the Self-check into a feedback loop: append 'If any criterion fails, revise the offending layer and re-run the check before emitting the artifact' to make the validation step an explicit validate→fix→retry cycle.

DimensionReasoningScore

Conciseness

Lean ~55-line body that assumes competence — it never explains what CSS animations, SVG, or a 16:9 hero are, and every line (layer spec, keyframe names, output contract) earns its place, matching the 'lean and efficient' 5 anchor.

5 / 5

Actionability

Highly concrete spec — exact values (0.5–1px strokes, 22–32px dot intervals, ~28% canvas, 60s/90s/180s rotation), named @keyframes, data-od-id attributes, and an artifact template — but no actual executable HTML/CSS code block or @keyframes definitions, a minor gap short of the copy-paste-ready 5.

4 / 5

Workflow Clarity

Five clearly numbered steps culminating in an explicit self-check checklist (frame-0 poster read, ≥3 layers at different speeds, single accent) — a real validation checkpoint, but no 'if a criterion fails, revise and re-check' feedback loop, so it sits at 4 rather than 5.

4 / 5

Progressive Disclosure

A compact, single-purpose, self-contained skill with no bundle files and no external references requiring navigation; sections (Workflow, Output contract) are well-organized, invoking the simple-skill exception that allows 5 without external file references.

5 / 5

Total

18

/

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, concrete description that clearly states both capability and an explicit 'Use when...' trigger clause with natural keywords. Minor over-claims (timer/parallax labels not in the body) and slight family-overlap risk keep specificity and distinctiveness at 4 rather than 5.

DimensionReasoningScore

Specificity

Names the domain and several concrete composition elements ("rotating type ring, animated globe, ticking timer, parallax labels", "hero video poster", "HyperFrames or any keyframe-based exporter"); minor gaps — "ticking timer"/"parallax labels" are not actually produced by the body, a slight over-claim short of comprehensive 5.

4 / 5

Completeness

Explicitly answers both what ("A single-frame motion-design composition with looping CSS animations... Renders as a hero video poster...") and when ("Use when the brief asks for 'motion design', 'animated hero', 'loop', 'video poster', 'title card'..."), with concrete trigger phrases — a clean match to the 5 anchor.

5 / 5

Trigger Term Quality

The "Use when..." clause surfaces natural terms ("motion design", "animated hero", "loop", "video poster", "title card") plus "HyperFrames"/"kinetic export"; good coverage but missing common synonyms like "motion graphic" or "kinetic typography" within the description field itself, so not a 5.

4 / 5

Distinctiveness Conflict Risk

Carves a clear niche (looping CSS-animation motion poster for keyframe exporters), but explicitly pairing with "Open Claude Design" and broad-ish terms like "hero"/"title card"/"loop" risk minor overlap with sibling poster/hero design skills, keeping it just below 5.

4 / 5

Total

17

/

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.

Validation15 / 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.