CtrlK
BlogDocsLog inGet started
Tessl Logo

picture-element

Use when reviewing image assets, markup, and CDN or build transforms related to Use <picture> with an <img> fallback. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

68

Quality

82%

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

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.

A well-structured, concise review skill with good progressive disclosure and actionable inspection/remediation guidance. The main gap is workflow clarity: verification is gestured at but not framed as an explicit validate→fix→retry checkpoint loop.

Suggestions

Add an explicit validation checkpoint to the Check/Fix flow—e.g., 'After fixing, re-scan all <picture> elements and confirm in DevTools Network panel that the expected AVIF/WebP source is selected'—to form a validate→fix→retry loop.

De-duplicate the IE11/no-<img> fallback fact between the intro and Explain sections to tighten token use.

Include one inline copy-paste-ready <picture> example in the body (or a minimal Bad/Good pair) so the most common case is actionable without opening references/rule.md.

DimensionReasoningScore

Conciseness

Lean body with a useful intro, terse quick-reference bullets, and sectioned Check/Fix/Explain/Code Review guidance; the only redundancy is the IE11/no-<img> fact restated in both the intro and Explain sections.

4 / 5

Actionability

'Check' provides a concrete numbered inspection list and 'Fix' gives a remediation template ('<img src="{fallback-url}" alt="{description}" width="{w}" height="{h}">'), but the body uses placeholders and defers literal code to references.

4 / 5

Workflow Clarity

A clear Check→Fix→Explain→Code Review sequence exists, but validation checkpoints are only implicit ('Flag any <picture> missing...', 'confirm the fix in DevTools') with no explicit validate→fix→retry feedback loop in the body.

3 / 5

Progressive Disclosure

Concise overview with well-organized sections and a single, clearly signaled one-level-deep pointer to the existing references/rule.md, which matches the bundle structure on disk.

5 / 5

Total

16

/

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, third-person description that explicitly pairs a 'Use when' trigger with concrete review dimensions and a clearly scoped niche. It could add a few natural synonyms (responsive images, srcset, WebP/AVIF) to widen trigger-term coverage.

DimensionReasoningScore

Specificity

Names the picture-element domain and lists multiple concrete review actions—'reviewing image assets, markup, and CDN or build transforms' and 'Check encoded size, rendered size, loading strategy, and above-the-fold impact'—for comprehensive coverage.

5 / 5

Completeness

Explicitly answers both 'when' ('Use when reviewing image assets, markup, and CDN or build transforms related to...') and 'what' ('Check encoded size, rendered size, loading strategy, and above-the-fold impact together') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural terms ('image assets', 'markup', '<picture>', 'CDN', 'build transforms', 'loading strategy', 'above-the-fold'), but missing a few common synonyms a user might say like 'responsive images', 'srcset', or format names like 'WebP/AVIF'.

4 / 5

Distinctiveness Conflict Risk

Scoped narrowly to the <picture>/<img> fallback rule with distinct, domain-specific triggers, giving it a clear niche and minimal overlap with other skills.

5 / 5

Total

19

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.