Content
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a comprehensive and opinionated design audit skill with genuinely useful, specific guidance that goes well beyond generic advice. Its main strengths are the breadth of coverage and the specificity of each checklist item (named fonts, exact hex values, concrete CSS properties). Its weaknesses are the lack of executable code examples, missing validation/verification steps in the workflow, and a monolithic structure that could benefit from splitting into referenced sub-files.
Suggestions
Add executable before/after code snippets for the highest-impact fixes (e.g., font swap, color palette cleanup, hover states) so Claude can copy-paste rather than interpret descriptions.
Add explicit validation checkpoints to the workflow: e.g., 'After font swap, verify the font loads by checking Network tab or confirming visual render' and 'After layout changes, test at 320px, 768px, and 1440px widths.'
Split the audit checklist into separate referenced files (e.g., TYPOGRAPHY.md, COLOR.md, LAYOUT.md) with the SKILL.md serving as an overview with links, improving progressive disclosure.
Remove explanatory context Claude already knows (e.g., 'This is an accessibility requirement, not optional' for focus rings, or explaining what iOS Safari viewport bug is) to improve conciseness.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extensive and mostly earns its length through specific, actionable checklist items rather than fluff. However, some items explain things Claude already knows (e.g., what semantic HTML tags are, what 100dvh fixes), and the sheer volume could be tightened—particularly the 'Upgrade Techniques' section which lists aspirational ideas without executable code. | 2 / 3 |
Actionability | The audit checklist is highly specific with concrete CSS properties, values, and named alternatives (fonts, colors, techniques). However, it lacks executable code examples—no complete before/after CSS snippets, no shell commands, no copy-paste-ready implementations. The guidance is concrete in description but stops short of being fully executable. | 2 / 3 |
Workflow Clarity | The 3-step workflow (Scan → Diagnose → Fix) and the 7-step fix priority order provide clear sequencing. However, there are no validation checkpoints—no 'verify the font loaded correctly,' no 'test responsive behavior after layout changes,' no feedback loops for error recovery. For a skill involving potentially destructive UI changes, this is a notable gap. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and logical grouping, but it's a monolithic document with no references to external files. At ~250+ lines, sections like the full audit checklist or upgrade techniques could be split into separate reference files. For a standalone skill with no bundle, the internal structure is decent but the length warrants splitting. | 2 / 3 |
Total | 8 / 12 Passed |