Best Practices

Originally forked from Addy Osmani's web quality skills, this covers Lighthouse-based best practices for modern web development. You get security patterns (HTTPS enforcement, avoiding mixed content), browser compatibility guidance, and general code quality standards. It's the kind of reference that's useful when you want Claude to follow established web standards rather than inventing its own approach. The examples show concrete before-and-after code snippets, which helps when you're reviewing generated markup or scripts. Not groundbreaking, but solid fundamentals that keep AI-generated code from making rookie mistakes on security and compatibility.

skills.sh installs: 276
GitHub stars: 7.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tech-leads-club/agent-skills --skill best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Best practices

Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.

Security

HTTPS everywhere

Enforce HTTPS:

<!-- ❌ Mixed content -->
<img src="http://example.com/image.jpg" />
<script src="http://cdn.example.com/script.js"></script>

<!-- ✅ HTTPS only -->
<img src="https://example.com/image.jpg" />
<script src="https://cdn.example.com/script.js"></script>

<!-- ✅ Protocol-relative (will use page's protocol) -->
<img src="//example.com/image.jpg" />

HSTS Header:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Content Security Policy (CSP)

<!-- Basic CSP via meta tag -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; 
               script-src 'self' https://trusted-cdn.com; 
               style-src 'self' 'unsafe-inline';
               img-src 'self' data: https:;
               connect-src 'self' https://api.example.com;"
/>

<!-- Better: HTTP header -->

CSP Header (recommended):

SKILL.md on GitHub