best-practices

Applies web security, browser compatibility, and code quality standards to frontend codebases.

Updated Nov 29, 2025
One-click install
npx skills add https://github.com/achyutkneupane/Blog-Kit --skill best-practices-achyutkneupane
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: best-practices
Source: https://github.com/achyutkneupane/Blog-Kit/tree/main/.ai/skills/best-practices
Command: npx skills add https://github.com/achyutkneupane/Blog-Kit --skill best-practices-achyutkneupane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications often ship with security vulnerabilities, deprecated APIs, and compatibility issues that fail Lighthouse audits and expose users to attacks like XSS, clickjacking, and supply-chain compromises. This Skill provides a structured checklist and concrete code patterns to audit and fix these issues. ## Core Features & Use Cases - Security Hardening: Enforce HTTPS, configure CSP headers with nonces, deploy Trusted Types against DOM-XSS, pin third-party scripts with Subresource Integrity, and set secure cookies and headers (HSTS, X-Content-Type-Options, Referrer-Policy). - Compatibility & Deprecation Cleanup: Replace deprecated APIs like document.write, synchronous XHR, and Application Cache with modern alternatives such as fetch, dynamic script loading, and Service Workers. - Code Quality & Performance: Apply semantic HTML, passive event listeners, event delegation, memory cleanup with AbortController, and safe source map configuration. - Use Case: Before launching a site, ask the AI to audit your HTML and JavaScript against the security and compatibility checklist to catch mixed content, vulnerable dependencies, and missing CSP headers. ## Quick Start Audit my website's HTML and JavaScript files for security vulnerabilities and deprecated APIs using the best practices checklist.

Frequently Asked Questions about best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I secure my website against XSS attacks?

Use a strict Content Security Policy with nonces, enforce Trusted Types so DOM sinks reject raw strings, and sanitize user input with DOMPurify before assigning to innerHTML. Prefer textContent over innerHTML whenever HTML rendering is not required.

How to fix mixed content warnings on HTTPS sites?

Replace all http:// URLs in images, scripts, and stylesheets with https:// equivalents, and avoid protocol-relative URLs. Add an HSTS header with includeSubDomains to force browsers to always use secure connections.

What is Subresource Integrity and when should I use it?

Subresource Integrity pins third-party scripts and stylesheets to a cryptographic hash so the browser refuses tampered files. Use it for every CDN-hosted resource you do not control, combined with the crossorigin attribute.

Should I still use the X-XSS-Protection header?

No. The legacy XSS auditor was deprecated and removed from Chrome and Edge, and it introduced its own vulnerabilities. Use a strict Content Security Policy with Trusted Types instead for modern XSS defense.

Why is document.write considered a deprecated API?

document.write blocks the HTML parser and breaks in async or deferred script contexts, harming performance and reliability. Replace it with dynamically created script elements appended to document.head.

How do I prevent memory leaks from event listeners?

Remove listeners when components unmount using removeEventListener, or register them with an AbortController signal and call controller.abort() for cleanup. This is especially important for window-level listeners like resize and scroll.