Content
92%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 tight, highly actionable body that gives concrete fonts, colors, layout, and pin/spec structure plus a validation self-check and a clear output contract. Its only weakness is mild redundancy between the intro and the frontmatter description.
Suggestions
Trim the intro's restatement of the description ("greyboxes carry the layout, numbered pins call out regions, and a right-hand spec panel turns each pin into a short engineering / UX note") since it duplicates the frontmatter; lead directly with the workflow constraints instead.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Lean and assumes Claude's competence (no explaining of what a wireframe or HTML is), but the intro paragraph restates material already in the description ("greyboxes carry the layout, numbered pins call out regions, and a right-hand spec panel turns each pin into a short engineering / UX note"), a minor instance that could be trimmed — hence 4 rather than 5. | 4 / 5 |
Actionability | Fully concrete guidance: specific fonts (Inter/system-ui, IBM Plex Mono), one accent color (coral or blue), a two-column shell, per-pin block specs, worked spec-row examples ("① Sticky nav, 64px, condenses on scroll"), `data-od-id` attributes, and a copy-ready artifact output template. | 5 / 5 |
Workflow Clarity | A clear 5-step sequence capped by an explicit self-check validation step with concrete pass/fail criteria (every pin has one matching spec row; accent color only on pins + spec numbers; thumbnail legibility), providing the feedback loop the top anchor calls for. | 5 / 5 |
Progressive Disclosure | A self-contained, single-purpose skill with well-organized sections (Workflow, Output contract) and no need for external references; per the rubric's simple-skill guidance, that is sufficient for the top anchor. | 5 / 5 |
Total | 19 / 20 Passed |