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.

74

Quality

92%

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

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is actionable, well-sequenced, and uses clean one-level-deep progressive disclosure to offload full code examples to the reference file. Its only weakness is minor conceptual redundancy between the intro and Explain sections.

Suggestions

Trim the redundancy between the opening paragraph and the "Explain" section — keep the fallback mechanism explanation in one place to avoid restating a concept Claude already knows.

Consider folding the short "Explain" section's unique point (alt belongs on <img>, not <source>) into Quick Reference rather than re-explaining how <picture>/source ordering works.

The intro and Explain both cite IE11/unsupported-format fallback; consolidate into a single concise statement.

DimensionReasoningScore

Conciseness

The body is mostly lean and well-organized, but the intro paragraph and the "Explain" section restate the same <picture>/<img> fallback mechanism — a concept Claude already knows — so some tokens could be trimmed; not quite the every-token-earns-its-place level.

2 / 3

Actionability

The Check list names exact attributes (alt, width, height, type, srcset, media) and the Fix section gives a concrete markup template with specific attribute names and values, providing specific actionable guidance rather than vague direction.

3 / 3

Workflow Clarity

A clear Check→Fix→Explain→Code Review sequence with the Check section itself acting as an explicit validation checklist and a verify step in Fix; this is a read-only review task so the destructive-feedback-loop cap does not apply.

3 / 3

Progressive Disclosure

Well-organized sections plus a clearly signaled, one-level-deep pointer to references/rule.md (verified to exist) for full implementation details and code examples, splitting content appropriately.

3 / 3

Total

11

/

12

Passed

Description

100%

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 is specific, trigger-rich, and clearly states both capability and invocation conditions with third-person/imperative voice. It is a strong, low-conflict trigger for this image-rule skill.

DimensionReasoningScore

Specificity

Lists several concrete actions — "reviewing image assets, markup, and CDN or build transforms" and "Check encoded size, rendered size, loading strategy, and above-the-fold impact together" — matching the multiple-specific-actions anchor rather than the vague single-domain anchor below.

3 / 3

Completeness

Explicitly answers both what (review image assets/markup/CDN transforms and check size/loading/above-the-fold impact) and when via an explicit "Use when..." trigger clause, so it is not capped at 2.

3 / 3

Trigger Term Quality

Uses natural frontend terms a user would actually say (image assets, markup, CDN, build transforms, loading strategy, above-the-fold, picture, img fallback) with broad coverage, rather than jargon-only or a single keyword.

3 / 3

Distinctiveness Conflict Risk

Targets a narrow, well-defined niche (the <picture> with <img> fallback rule) with distinct triggers, making overlap with unrelated skills unlikely.

3 / 3

Total

12

/

12

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.