Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities". Do NOT use for accessibility (use web-accessibility), SEO (use seo), performance (use core-web-vitals), or comprehensive multi-area audits (use web-quality-audit).
81
77%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./packages/skills-catalog/skills/(quality)/web-best-practices/SKILL.mdQuality
Discovery
89%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-structured skill description with excellent completeness and distinctiveness. The explicit 'Use when' and 'Do NOT use' clauses with named alternative skills make it highly effective for skill selection. The main weakness is that the capabilities could be more specific—listing concrete actions rather than broad categories like 'security' and 'code quality' would improve specificity.
Suggestions
Add specific concrete actions to improve specificity, e.g., 'Sanitize inputs, enforce CSP headers, update deprecated APIs, fix insecure dependencies, apply modern ES6+ patterns' instead of just naming broad categories.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names the domain (web development) and mentions areas like security, compatibility, and code quality, but doesn't list specific concrete actions (e.g., 'sanitize inputs', 'update deprecated APIs', 'add CSP headers'). The actions remain at a category level rather than enumerating specific tasks. | 2 / 3 |
Completeness | Clearly answers both 'what' (apply modern web development best practices for security, compatibility, and code quality) and 'when' (explicit 'Use when' clause with trigger phrases). Additionally includes explicit 'Do NOT use' guidance with alternatives, which strengthens the when/when-not clarity. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms users would say: 'apply best practices', 'security audit', 'modernize code', 'code quality review', 'check for vulnerabilities'. These are realistic phrases a user would type when needing this skill. | 3 / 3 |
Distinctiveness Conflict Risk | Excellent distinctiveness through explicit boundary-setting with 'Do NOT use' clauses that name competing skills (web-accessibility, seo, core-web-vitals, web-quality-audit). This dramatically reduces conflict risk and makes the skill's niche very clear. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
64%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 reference-style skill with excellent actionability through concrete code examples and clear ❌/✅ patterns. Its main weaknesses are length (could be split into sub-files for security, compatibility, and code quality) and lack of a clear workflow for conducting a best practices audit. The audit checklist is valuable but would benefit from being positioned as the primary workflow with references to detailed sections.
Suggestions
Add a brief workflow section at the top describing the recommended sequence for conducting a best practices review (e.g., 1. Run npm audit, 2. Check security headers, 3. Validate HTML, 4. Review against checklist), with validation steps.
Move detailed code examples into separate reference files (e.g., SECURITY.md, COMPATIBILITY.md) and keep SKILL.md as a concise overview with the audit checklist and links to those files.
Trim sections covering patterns Claude already knows well (semantic HTML basics, event delegation, React error boundaries) to brief reminders rather than full code examples.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400 lines) and includes some patterns Claude already knows well (semantic HTML, event delegation, error boundaries). However, the ❌/✅ pattern format is efficient for scanning, and most content is code examples rather than prose explanation. | 2 / 3 |
Actionability | Nearly every section provides concrete, executable code examples with clear ❌ bad / ✅ good patterns. Commands like `npm audit`, specific header values, and copy-paste ready code snippets make this highly actionable. | 3 / 3 |
Workflow Clarity | The audit checklist at the end provides a clear sequence of checks, but there's no explicit workflow for performing a best practices review (e.g., start here, validate this, then check that). The content reads more as a reference catalog than a guided process with validation checkpoints. | 2 / 3 |
Progressive Disclosure | The content is mostly monolithic — extensive inline code examples that could be split into separate reference files (e.g., security headers reference, CSP guide). The references section at the bottom is good, but the skill itself is a wall of examples that would benefit from a concise overview pointing to detailed sub-files. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (605 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
81e7e0d
Table of Contents
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.