Content
78%Weight 40%Scale 1-5Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
A well-structured review skill body: crisp imperative checklists, a clean Check/Fix/Explain workflow, and proper progressive disclosure to a real, one-level-deep reference. The main improvements are trimming the motivational intro and duplicated caveats, and surfacing one inline markup example so the body alone demonstrates the corrected HTML.
Suggestions
Trim the intro paragraph's benefit explanation (megabytes/LCP/bandwidth rationale) and state the LCP caveat and fold-position guardrail once instead of repeating each across Quick Reference, Check/Fix, and Explain — Claude already understands why lazy loading matters.
Add one short inline example of a correctly lazy-loaded <img> (loading="lazy" with width/height, and the LCP image with fetchpriority="high") so the body is self-sufficient for the common cases, keeping extended examples in references/rule.md.
Close the workflow with an explicit verification step (e.g., re-scan modified files to confirm attributes changed and no above-fold image kept loading="lazy") instead of only mentioning DevTools confirmation in passing.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The body is mostly tight imperatives (Quick Reference bullets, numbered Check/Fix steps), but the intro paragraph explains benefits Claude already knows ('A page with 20 images below the fold may transfer several megabytes... improves LCP... saves bandwidth'), the Explain section restates how native lazy loading works including a duplicated browser-support claim, and the LCP caveat and fold-position guardrail each appear 3-4 times. This is 'efficient with minor instances of over-explanation that could be trimmed' (score 4) rather than the every-token-earns-its-place profile of score 5. | 4 / 5 |
Actionability | Guidance is concrete and executable: exact attribute values (`loading="lazy"`, `fetchpriority="high"`), explicit width/height pairing to prevent CLS, removal rules for hero/logo images, and 'Show the corrected HTML for each modified image'. It stops short of score 5 because no markup example appears inline — the copy-paste-ready code lives only in references/rule.md, leaving a minor gap in the body itself. | 4 / 5 |
Workflow Clarity | A clear Check -> Fix -> Explain -> Code Review sequence with a three-way classification (missing lazy below the fold, lazy on above-fold images, eager below the fold) and separate reporting per category. It fits 'clear sequence with most checkpoints present; minor validation gaps' (score 4): DevTools confirmation of the fix is mentioned but there is no explicit verify/feedback step in the workflow. The destructive/batch validation cap does not apply since this is a read-and-report review skill. | 4 / 5 |
Progressive Disclosure | The body is short and well-sectioned (Quick Reference, Check, Fix, Explain, Code Review) and ends with a clearly signaled one-level-deep pointer — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — to a real, well-organized reference file (verified: no nested references inside it). This matches the score-5 anchor for clear overview plus well-signaled references. | 5 / 5 |
Total | 17 / 20 Passed |