CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

animated-content

Use when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

56

Quality

71%

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 ./skills/animated-content/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

60%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 a compact, well-sectioned overview that delegates implementation detail to a real, clearly signaled one-level reference, and the Check→Fix sequence includes a measurement checkpoint. Its weaknesses are duplicated Quick Reference/Explain prose that adds tokens without information, and the absence of any inline executable example or conversion command in the Fix section.

Suggestions

Inline a minimal executable example in the Fix section (the <video autoplay loop muted playsinline> markup plus an ffmpeg conversion command such as `ffmpeg -i animation.gif -movflags faststart -pix_fmt yuv420p animation.mp4`) so the core action is executable without opening the reference.

Remove the Quick Reference bullets that restate the intro and Fix sections, and drop the vague 'Explain' section in favor of the reference's 'Why It Matters' content.

Replace the body's 'Code Review' section, which repeats the description's audit language, with a short pointer to the verification steps already in references/rule.md.

DimensionReasoningScore

Conciseness

The body is short and free of known-concept padding, but there is noticeable duplication: the Quick Reference bullets ("Use `<video>` instead of large GIFs for animations", "GIFs are significantly larger than MP4/WebM") restate the intro paragraph and the Fix section, and the thin "Explain" and "Code Review" sections add little new information. This fits the 3 anchor ('mostly efficient but includes some unnecessary explanation or could be tightened'). Not a 4 because the redundancy across intro/Quick Reference/Fix is more than minor trimming; not a 2 because the body is compact and does not explain basics Claude already knows.

3 / 5

Actionability

The Fix section gives concrete but incomplete guidance: "Convert animated GIFs to MP4 or WebM and use the `<video>` tag with `autoplay`, `loop`, `muted`, and `playsinline` attributes" names formats and exact attributes, yet the body contains no executable code or command — no ffmpeg conversion command and no <video> markup, both of which live only in references/rule.md. This matches the 3 anchor ('some concrete guidance but incomplete; missing key details'). Not a 4 because there is no inline code or command to execute; not a 2 because the guidance is specific about formats and attributes rather than a high-level hint.

3 / 5

Workflow Clarity

The Check → Fix → Explain sequence is clearly ordered for this simple task, and the Code Review section supplies a verification checkpoint ("describe the measurement method used to confirm the issue"), matching the 4 anchor ('clear sequence with most checkpoints present; minor validation gaps'). Not a 5 because verification is described loosely rather than as an explicit measure-then-confirm loop, and the Check step gives no measurement method (that detail is deferred to the reference); not a 3 because the sequence and checkpoints are present and unambiguous.

4 / 5

Progressive Disclosure

The body is a short overview with a clearly signaled one-level-deep reference that exists on disk: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`", matching the 4 anchor ('good structure; most content appropriately placed; references mostly clear'). Not a 5 because the split is slightly uneven — the body's Code Review section largely duplicates the description's audit language instead of overview content, and the referenced file itself opens its code section with a stray empty '## Code Examples' heading followed by a lone '#' line, slightly muddying navigation into the bundle. Not a 3 because structure and signaling are good, the reference is real, and details are appropriately delegated.

4 / 5

Total

14

/

20

Passed

Description

70%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 an explicit and well-formed 'Use when...' trigger clause with natural performance vocabulary and named tools, and the what/when pair is complete. Its main weakness is the grammatically broken embedded clause "related to Convert animated GIFs to video", which forces the reader to reconstruct the capability instead of listing concrete actions.

Suggestions

Rewrite to lead with the what as a clean action list, e.g.: 'Convert large animated GIFs to MP4/WebM and replace them with <video autoplay loop muted playsinline> elements. Use when auditing slow page loads, heavy assets, or rendering delays caused by animated GIFs, and verify the bottleneck in DevTools, Lighthouse, or field data before recommending changes.'

Name the concrete conversion action and tool (e.g., FFmpeg) in the description so specificity moves from domain-plus-audit-hints to multiple specific capabilities.

DimensionReasoningScore

Specificity

The description names the domain ("Convert animated GIFs to video") and 1-2 concrete actions ("auditing slow page loads, heavy assets, or rendering delays" and "Verify the actual bottleneck in DevTools, Lighthouse, or field data"), which matches the 'names domain and 1-2 concrete actions, but not comprehensive' anchor. It is not a 4 because it does not list several specific actions — the core capability (converting GIFs, using FFmpeg, emitting a <video> tag) is only implied by the awkwardly embedded task title rather than stated as actions. It is not a 2 because tools are named and the auditing/verification actions are concrete rather than generic.

3 / 5

Completeness

Both 'what' and 'when' are present: the what is conveyed by the embedded phrase "related to Convert animated GIFs to video" plus the verification action, and the when is explicit via "Use when auditing slow page loads, heavy assets, or rendering delays". This matches the 4 anchor ('both present; one could be more explicit'). It is not a 5 because the what is grammatically mangled into a mid-sentence clause rather than a clear capability statement, and not a 3 because neither half is missing or merely implied.

4 / 5

Trigger Term Quality

Natural phrases users would say are present: "slow page loads", "heavy assets", "rendering delays", "animated GIFs", "video", plus tool names "DevTools, Lighthouse" — good keyword coverage matching the 4 anchor. It is not a 5 because common synonyms and extensions are missing ("animation", "MP4", "WebM", ".gif", "page weight"), and not a 3 because coverage goes beyond 'some relevant keywords' with multiple natural performance-related phrases.

4 / 5

Distinctiveness Conflict Risk

The GIF-to-video focus with named tools ("DevTools, Lighthouse") carves out a mostly distinct niche with only minor overlap risk against generic performance-audit skills — the 4 anchor. It is not a 5 because opening phrases like "slow page loads, heavy assets, or rendering delays" are shared vocabulary with general web-performance skills and could co-trigger them; not a 3 because the animated-GIF/video specifics keep it clearly distinguishable.

4 / 5

Total

15

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

thedaviddias/Front-End-Checklist

Path

skills/animated-content/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.