skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

best-practices

Applies modern web development best practices for security, browser compatibility, and code quality.

3|1|Updated Apr 29, 2026
Search Tags:#code quality#best practices#lighthouse#csp#web security#browser compatibility#xss prevention
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill best-practices-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: best-practices
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/best-practices
Command: npx skills add https://github.com/firstsun-dev/skills --skill best-practices-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web projects often ship with security vulnerabilities, deprecated APIs, and compatibility issues that fail Lighthouse audits and expose users to risk. This Skill provides a structured checklist and concrete code patterns to audit and fix these problems systematically. ## Core Features & Use Cases - Security hardening: Enforce HTTPS, configure CSP and security headers, sanitize user input with DOMPurify, set secure cookies, and run npm audit to catch vulnerable dependencies. - Compatibility and code quality: Apply HTML5 doctype, charset, viewport, feature detection, passive event listeners, semantic HTML, and proper error handling with error boundaries and global handlers. - Use Case: Before launching a web app, ask the agent to run a best-practices audit; it checks for mixed content, missing security headers, deprecated APIs like synchronous XHR, and produces a prioritized fix list. ## Quick Start Audit my web project for security vulnerabilities, deprecated APIs, and Lighthouse best-practice violations, then suggest fixes.

Frequently Asked Questions about best-practices

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

FAQPage Schema
How do I fix Lighthouse best practices audit failures?▼

Address failures by enforcing HTTPS with no mixed content, adding security headers like CSP and X-Frame-Options, removing vulnerable dependencies via npm audit, and replacing deprecated APIs such as document.write and synchronous XHR with modern alternatives.

How to set up a Content Security Policy for a website?▼

Configure CSP via an HTTP header rather than a meta tag, starting with default-src 'self' and whitelisting trusted script and style sources. Use nonces for required inline scripts and restrict frame-ancestors, base-uri, and form-action to 'self'.

What security headers should every website have?▼

Essential headers include Strict-Transport-Security, Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy. Verify your configuration with tools like SecurityHeaders.com or Mozilla Observatory.

Does innerHTML cause XSS vulnerabilities in JavaScript?▼

Yes, assigning unsanitized user input to innerHTML enables XSS attacks. Use textContent for plain text, or sanitize HTML input with DOMPurify before insertion to strip malicious scripts.

Why should touch and wheel event listeners be passive?▼

Non-passive touchstart and wheel listeners can block scrolling because the browser waits to see if preventDefault is called. Marking them passive allows smooth scrolling; only set passive to false when you explicitly need preventDefault.

Related Skills

Explore More Software Engineering Skills→
dapperdiversdapperdivers
1

header-analysis

Audit HTTP response headers and cookie attributes for missing security controls.

Community
Intermediate
aymenhamoudiiaymenhamoudii

best-practices

Audit web applications for security, compatibility, performance, and code quality issues.

Community
Intermediate
Bonny94ITABonny94ITA

web-quality-audit

Audit website performance, accessibility, SEO, and best practices with Google Lighthouse.

Community
Advanced
Arete-ConsortiumArete-Consortium
4

web-security-hardener

Configures security headers, CSP policies, CORS, and input validation for web applications.

Official
Intermediate