CtrlK
BlogDocsLog inGet started
Tessl Logo

responsive-images

Use when reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints. Check both the markup and the CSS layout because an incorrect `sizes` attribute can negate a perfectly good `srcset`.

60

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/responsive-images/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

A well-structured, brief overview with excellent progressive disclosure to references/rule.md. It is held back by generic, near-empty Check/Fix/Explain sections and the absence of any concrete markup example in the body itself.

Suggestions

Replace the generic Fix/Explain one-liners with concrete guidance — e.g., a minimal correct `<img srcset sizes>` snippet or the exact attributes to add — or fold them into the Code Review section to remove restatement.

Add one short example of correct responsive `<img>` markup (srcset + sizes + width/height) in the body so the core action is copy-paste ready without requiring the reference.

Tighten the Check section into a concrete verification step (e.g., "Confirm `sizes` matches the rendered layout width, not just the viewport") to give the workflow a real checkpoint.

DimensionReasoningScore

Conciseness

The body is largely lean, but the Check/Fix/Explain one-liners ("Implement responsive images with srcset for different screen sizes and resolutions", "Explain how responsive images deliver optimized versions based on device capabilities") are generic restatements that restate the title rather than earning their tokens.

2 / 3

Actionability

The Code Review section gives concrete flags ("Flag pages that always ship desktop-sized assets to mobile, omit `sizes`"), but the body provides no example srcset/sizes markup or commands, so the guidance is actionable yet incomplete.

2 / 3

Workflow Clarity

A Check→Fix→Code Review structure is present, but it is loosely sequenced with no validation checkpoints, and the Fix/Explain sections are generic rather than concrete steps.

2 / 3

Progressive Disclosure

The SKILL.md is a concise overview that clearly signals a single one-level-deep reference ("see `references/rule.md`") for full implementation details; the referenced file exists and content is appropriately split.

3 / 3

Total

9

/

12

Passed

Description

85%

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, specific description with explicit trigger guidance and a clear niche. Its main weakness is trigger-term coverage: the canonical keywords "responsive images"/"srcset"/"sizes" sit in the explanatory clause rather than the trigger list.

DimensionReasoningScore

Specificity

It lists multiple concrete review actions — "Check both the markup and the CSS layout" and verifying that "an incorrect `sizes` attribute can negate a perfectly good `srcset`" — using imperative verbs with no first/second-person pronoun, matching the reference good examples.

3 / 3

Completeness

It explicitly answers both when ("Use when reviewing article images, cards, galleries...") and what ("Check both the markup and the CSS layout... srcset").

3 / 3

Trigger Term Quality

The trigger clause ("reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints") gives reasonable scenario coverage, but the most natural keywords ("responsive images", and "srcset"/"sizes" which appear only in the explanatory clause) are missing from the triggers.

2 / 3

Distinctiveness Conflict Risk

It targets a clear niche — responsive-image srcset/sizes review across markup and CSS — with distinct triggers unlikely to collide with other skills.

3 / 3

Total

11

/

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.