Content
57%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.
The body is a well-disclosed overview that correctly delegates implementation detail to a real, one-level-deep reference file. However, the body itself leans vague: the Quick Reference explains concepts Claude already knows, the Fix section is circular, and Check/Fix/Code Review are unconnected modes with no verification step.
Suggestions
Replace the circular Fix section ('Implement responsive images with srcset...') with a minimal executable srcset/sizes markup example, or link directly to the Code Example section of references/rule.md.
Order Check → Fix → Code Review as an explicit sequence with a verification checkpoint, e.g. re-confirm the rendered image size at each breakpoint after applying a fix.
Trim the intro sentence and Quick Reference bullets, which recap how srcset/sizes/DPR work — knowledge Claude already has — or move them into references/rule.md.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The intro ("Serving a 2000px image to a 400px phone screen... srcset lets the browser download only the size it needs") and Quick Reference ("Browser selects optimal size based on viewport and DPR") recap how srcset/sizes/DPR work — concepts Claude already knows. Mostly efficient overall, but the Quick Reference section could be cut entirely, keeping it below anchor 4. | 3 / 5 |
Actionability | "Flag pages that always ship desktop-sized assets to mobile, omit `sizes`, or generate variants that do not match the actual rendered layout" is genuinely concrete, but no executable markup appears anywhere in the body and the Fix section is circular ("Implement responsive images with srcset..." to fix responsive images). Some concrete guidance, but key execution details are missing or deferred. | 3 / 5 |
Workflow Clarity | The "## Check", "## Fix", "## Explain", and "## Code Review" headings read as parallel modes with no explicit sequence connecting them and no verification checkpoint (e.g., re-confirming rendered sizes after a fix). Not 2 because each section is individually coherent and the task is identifiable; not 4 because the sections never link into an ordered workflow. | 3 / 5 |
Progressive Disclosure | "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" is a single, clearly signaled, one-level-deep reference that exists and delivers exactly what the pointer promises (code examples, React/Next.js guidance). The lean overview body plus one detailed reference is an appropriate split with easy navigation. | 5 / 5 |
Total | 14 / 20 Passed |