best-practices

Apply modern web security, compatibility, and code quality checks during frontend reviews.

1|Updated May 24, 2026
One-click install
npx skills add https://github.com/gavin100305/traffic --skill best-practices-gavin100305
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: best-practices
Source: https://github.com/gavin100305/traffic/tree/main/agents/.agents/skills/best-practices
Command: npx skills add https://github.com/gavin100305/traffic --skill best-practices-gavin100305

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It reduces security weaknesses, compatibility issues, and code-quality gaps by providing concrete, actionable checks aligned with modern web and Lighthouse best practices.

Core Features & Use Cases

  • Security hardening: Enforces HTTPS, recommends HSTS, and specifies Content Security Policy (CSP) patterns including nonces, plus protective security headers to mitigate common web attacks.
  • Safe code patterns: Prevents XSS via correct handling of user input (prefer textContent, sanitize HTML), avoids vulnerable JavaScript patterns (e.g., prototype pollution-prone merges), and uses secure cookie attributes.
  • Compatibility and reliability: Ensures valid HTML structure, correct doctype/encoding/viewport, uses feature detection with fallbacks, avoids deprecated APIs, and promotes robust error handling without console noise.
  • Performance and quality: Recommends non-blocking loading patterns, event delegation, memory cleanup, source map hygiene, and semantic HTML for maintainability.

Quick Start

Review your current frontend codebase and apply the checklist from this skill to address security headers, CSP, HTTPS, input sanitization, deprecated API usage, and performance/quality issues.

Frequently Asked Questions about best-practices

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

FAQPage Schema
How do I set up Content Security Policy nonces to prevent XSS attacks?

To prevent XSS attacks with Content Security Policy, configure CSP nonces to safely handle user input by preferring textContent and sanitizing HTML, avoiding vulnerable JavaScript prototype pollution patterns, and setting secure cookie attributes.

What security headers do I need to enforce HTTPS and enable HSTS?

Enforcing HTTPS and enabling HSTS requires specifying protective security headers, applying modern web development best practices, and conducting vulnerability mitigation checks to harden your web application against common attacks.

How can I audit my frontend codebase for deprecated APIs and HTML validation issues?

You can audit frontend codebases by validating HTML structure, doctype, encoding, and viewport, using feature detection with fallbacks, and checking for deprecated APIs to ensure robust browser compatibility and error handling.

What's the best way to improve web performance using Lighthouse-style checks?

Improving web performance with Lighthouse-style checks involves recommending non-blocking loading patterns, implementing event delegation, performing memory cleanup, and maintaining source map hygiene for optimal frontend quality.

Does this approach work for remediating common HTML, CSS, and JavaScript issues across real web apps?

Yes, this approach remediates common HTML, CSS, and JavaScript issues by applying actionable checks aligned with modern web best practices, targeting security weaknesses, compatibility gaps, and code quality improvements across real web applications.

Why should I use feature detection instead of relying on deprecated JavaScript APIs?

Using feature detection with fallbacks instead of deprecated JavaScript APIs ensures browser compatibility and reliability, promoting robust error handling without console noise while validating correct HTML structure and encoding.