best-practices

This skill provides a comprehensive framework for applying modern web development standards to any web project. It is designed for software engineers, front-end developers, and security-conscious teams aiming to align their codebases with industry-leading practices, specifically drawing on Google Lighthouse metrics and modern security protocols. The skill helps identify and mitigate risks associated with deprecated APIs, insecure network configurations, and brittle coding patterns while promoting robust, performant, and cross-browser compatible architectures.

• Enforcement of HTTPS everywhere, HSTS headers, and advanced Content Security Policy (CSP) implementation with nonces for inline script security.

• Comprehensive security headers audit including X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy to prevent common vulnerabilities like clickjacking, MIME sniffing, and unauthorized API access.

• Dependency vulnerability management through integration with npm and yarn audit workflows, alongside mitigation of prototype pollution and insecure data handling patterns.

• Implementation of modern standards for character encoding, responsive viewport meta tags, and HTML5 doctype requirements.

• Strategic use of browser feature detection, CSS @supports, and polyfill strategies over deprecated browser-sniffing techniques.

• Clean code practices including passive event listeners, async/await patterns, modern JavaScript APIs, and avoiding anti-patterns like document.write or synchronous XHR.

• Trigger this skill by requesting security audits, code quality reviews, or modernization tasks for legacy projects.

• The skill analyzes codebases to identify risky patterns like innerHTML usage without sanitization and replaces them with secure alternatives like textContent or DOMPurify.

• It facilitates the transition from deprecated features like Application Cache to modern alternatives like Service Workers.

• Expect actionable output including specific code refactoring suggestions, header configurations, and dependency updates based on current best practices.

• Operates in a stack-agnostic environment, making it compatible with frameworks such as React, Vue, Angular, Svelte, Next.js, and vanilla HTML/JavaScript environments.