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-crafted skill description with strong trigger terms, clear completeness (both what and when), and exceptional distinctiveness through explicit negative boundaries that name alternative skills. The main weakness is that the capability description stays at a category level (security, compatibility, code quality) rather than listing specific concrete actions, which slightly reduces specificity.
Suggestions
Add 2-3 specific concrete actions per category, e.g., 'sanitize user inputs, enforce Content Security Policy, update deprecated APIs, fix cross-browser compatibility issues' to improve specificity.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (web development) and broad action areas (security, compatibility, code quality), but doesn't list specific concrete actions like 'sanitize inputs, update deprecated APIs, enforce 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 users would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Excellent distinctiveness through explicit negative boundaries — clearly delineates what NOT to use it for (accessibility, SEO, performance, comprehensive audits) and names the alternative skills. This dramatically reduces conflict risk with related web skills. | 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, well-structured reference for web best practices with excellent concrete examples using the ❌/✅ pattern. Its main weaknesses are verbosity (many patterns Claude already knows, like semantic HTML and event delegation) and lack of a clear guided workflow for performing an actual audit. Trimming well-known content and adding an explicit step-by-step audit process would significantly improve it.
Suggestions
Add an explicit step-by-step workflow at the top (e.g., '1. Check security headers → 2. Run npm audit → 3. Scan for mixed content → 4. Validate HTML → 5. Verify fixes') with validation checkpoints after each step.
Remove or drastically shorten sections covering patterns Claude already knows well (semantic HTML, event delegation, basic error handling) to reduce token usage by ~30-40%.
Split detailed reference content (CSP configuration, security headers, React error boundaries) into separate linked files, keeping SKILL.md as a concise overview with the audit workflow and checklist.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400 lines) and includes some patterns Claude already knows well (semantic HTML, basic error handling, event delegation). However, most content is concrete examples rather than prose explanation, which keeps it from being a 1. Could be significantly tightened by removing well-known patterns and focusing on the non-obvious guidance. | 2 / 3 |
Actionability | Excellent use of concrete, executable code examples throughout with clear ❌/✅ patterns showing what to avoid and what to use instead. 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 good 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 skill reads more as a reference catalog than a guided process. For a security audit task, missing validation/verification steps (e.g., how to confirm fixes worked) caps this at 2. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers, but it's monolithic — nearly everything is inline rather than split into separate reference files. The tools table and references at the end are good, but topics like CSP configuration, security headers, and React error boundaries could be linked out to keep the main skill leaner. | 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 | |
906a57d
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.