New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Best Practices

by tech-leads-club in tech-leads-club/agent-skills

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

MITAuto-check passedFrontend & Design

Install Best Practices

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install tech-leads-club/agent-skills best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/tech-leads-club/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/'packages/skills-catalog/skills/(quality)/web-best-practices' .claude/skills/best-practices && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
best-practices
GitHub stars
7k
Token cost
~3.2k tokens
SKILL.md length
232 words
Files
1
Skills in repo
74
Repo updated
First seen
Licence
MIT

At a glance

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

  • Asked to apply best practices
  • SKILL.md covers Security, Browser compatibility, Deprecated APIs and Console & errors, plus 3 more sections
  • Calls npm and yarn; reaches polyfill.io
  • Code quality review

What it does

Best Practices is an agent skill from tech-leads-club/agent-skills. Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities". Do NOT use for accessibility (use web-accessibility), SEO (use seo), performance (use core-web-vitals), or comprehensive multi-area audits (use web-quality-audit).

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Code quality, Web performance and Security review. The repository describes itself as: The secure, validated skill registry for professional AI coding agents. Extend Antigravity, Claude Code, Cursor, Copilot and more with absolute confidence. The licence is MIT.

When your agent uses it

  • Asked to apply best practices
  • Code quality review
  • Check for vulnerabilities
  • Accessibility (use web-accessibility)

Example prompts

  • “apply best practices”
  • “security audit”
  • “modernize code”
  • “/best-practices”

What it can do on your machine

Read from SKILL.md and the folder at commit 6df68d5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • polyfill.io

    Also links to:

    • securityheaders.com
    • validator.w3.org
    • observatory.mozilla.org
    • developer.mozilla.org
    • owasp.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Best Practices loads about 3.2k tokens when it runs. Until then it costs about 101 tokens; SKILL.md has 232 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~101
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from tech-leads-club/agent-skills at commit 6df68d5, republished under its MIT licence (© tech-leads-club). 232 words, ~3,170 tokens.

Download SKILL.mdSave it as .claude/skills/best-practices/SKILL.md (or your agent's skills folder).
name
best-practices
description
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities". Do NOT use for accessibility (use web-accessibility), SEO (use seo), performance (use core-web-vitals), or comprehensive multi-area audits (use web-quality-audit).
license
MIT
metadata.author
web-quality-skills
metadata.version
1.0

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:

html
<!-- ❌ 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)
html
<!-- 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):

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-abc123' https://trusted.com;
  style-src 'self' 'nonce-abc123';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';

Using nonces for inline scripts:

html
<script nonce="abc123">
  // This inline script is allowed
</script>
Security headers
# Prevent clickjacking
X-Frame-Options: DENY

# Prevent MIME type sniffing
X-Content-Type-Options: nosniff

# Enable XSS filter (legacy browsers)
X-XSS-Protection: 1; mode=block

# Control referrer information
Referrer-Policy: strict-origin-when-cross-origin

# Permissions policy (formerly Feature-Policy)
Permissions-Policy: geolocation=(), microphone=(), camera=()
No vulnerable libraries
bash
# Check for vulnerabilities
npm audit
yarn audit

# Auto-fix when possible
npm audit fix

# Check specific package
npm ls lodash

Keep dependencies updated:

json
// package.json
{
  "scripts": {
    "audit": "npm audit --audit-level=moderate",
    "update": "npm update && npm audit fix"
  }
}

Known vulnerable patterns to avoid:

javascript
// ❌ Prototype pollution vulnerable patterns
Object.assign(target, userInput)
_.merge(target, userInput)

// ✅ Safer alternatives
const safeData = JSON.parse(JSON.stringify(userInput))
Input sanitization
javascript
// ❌ XSS vulnerable
element.innerHTML = userInput
document.write(userInput)

// ✅ Safe text content
element.textContent = userInput

// ✅ If HTML needed, sanitize
import DOMPurify from 'dompurify'
element.innerHTML = DOMPurify.sanitize(userInput)
Secure cookies
javascript
// ❌ Insecure cookie
document.cookie = "session=abc123";

// ✅ Secure cookie (server-side)
Set-Cookie: session=abc123; Secure; HttpOnly; SameSite=Strict; Path=/

Browser compatibility

Doctype declaration
html
<!-- ❌ Missing or invalid doctype -->
<html lang="en">
  <head>
    <title>Page</title>
  </head>
  <body></body>
</html>

<!-- ✅ HTML5 doctype -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page</title>
  </head>
  <body></body>
</html>
Character encoding
html
<!-- ❌ Missing or late charset -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page</title>
    <meta charset="UTF-8" />
  </head>
  <body></body>
</html>

<!-- ✅ Charset as first element in head -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page</title>
  </head>
  <body></body>
</html>
Viewport meta tag
html
<!-- ❌ Missing viewport -->
<head>
  <title>Page</title>
</head>

<!-- ✅ Responsive viewport -->
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Page</title>
</head>
Feature detection
javascript
// ❌ Browser detection (brittle)
if (navigator.userAgent.includes('Chrome')) {
  // Chrome-specific code
}

// ✅ Feature detection
if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Fallback
}

// ✅ Using @supports in CSS
@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
  }
}
Polyfills (when needed)
html
<!-- Load polyfills conditionally -->
<script>
  if (!('fetch' in window)) {
    document.write('<script src="/polyfills/fetch.js"><\/script>')
  }
</script>

<!-- Or use polyfill.io -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,IntersectionObserver"></script>

Deprecated APIs

Avoid these
javascript
// ❌ document.write (blocks parsing)
document.write('<script src="..."></script>');

// ✅ Dynamic script loading
const script = document.createElement('script');
script.src = '...';
document.head.appendChild(script);

// ❌ Synchronous XHR (blocks main thread)
const xhr = new XMLHttpRequest();
xhr.open('GET', url, false); // false = synchronous

// ✅ Async fetch
const response = await fetch(url);

// ❌ Application Cache (deprecated)
<html manifest="cache.manifest">

// ✅ Service Workers
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
Event listener passive
javascript
// ❌ Non-passive touch/wheel (may block scrolling)
element.addEventListener('touchstart', handler)
element.addEventListener('wheel', handler)

// ✅ Passive listeners (allows smooth scrolling)
element.addEventListener('touchstart', handler, { passive: true })
element.addEventListener('wheel', handler, { passive: true })

// ✅ If you need preventDefault, be explicit
element.addEventListener('touchstart', handler, { passive: false })

Console & errors

No console errors
javascript
// ❌ Errors in production
console.log('Debug info') // Remove in production
throw new Error('Unhandled') // Catch all errors

// ✅ Proper error handling
try {
  riskyOperation()
} catch (error) {
  // Log to error tracking service
  errorTracker.captureException(error)
  // Show user-friendly message
  showErrorMessage('Something went wrong. Please try again.')
}
Error boundaries (React)
jsx
class ErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  componentDidCatch(error, info) {
    errorTracker.captureException(error, { extra: info })
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />
    }
    return this.props.children
  }
}

// Usage
;<ErrorBoundary>
  <App />
</ErrorBoundary>
Global error handler
javascript
// Catch unhandled errors
window.addEventListener('error', (event) => {
  errorTracker.captureException(event.error)
})

// Catch unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  errorTracker.captureException(event.reason)
})

Source maps

Production configuration
javascript
// ❌ Source maps exposed in production
// webpack.config.js
module.exports = {
  devtool: 'source-map', // Exposes source code
}

// ✅ Hidden source maps (uploaded to error tracker)
module.exports = {
  devtool: 'hidden-source-map',
}

// ✅ Or no source maps in production
module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
}

Performance best practices

Avoid blocking patterns
javascript
// ❌ Blocking script
<script src="heavy-library.js"></script>

// ✅ Deferred script
<script defer src="heavy-library.js"></script>

// ❌ Blocking CSS import
@import url('other-styles.css');

// ✅ Link tags (parallel loading)
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="other-styles.css">
Efficient event handlers
javascript
// ❌ Handler on every element
items.forEach((item) => {
  item.addEventListener('click', handleClick)
})

// ✅ Event delegation
container.addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e)
  }
})
Memory management
javascript
// ❌ Memory leak (never removed)
const handler = () => {
  /* ... */
}
window.addEventListener('resize', handler)

// ✅ Cleanup when done
const handler = () => {
  /* ... */
}
window.addEventListener('resize', handler)

// Later, when component unmounts:
window.removeEventListener('resize', handler)

// ✅ Using AbortController
const controller = new AbortController()
window.addEventListener('resize', handler, { signal: controller.signal })

// Cleanup:
controller.abort()

Code quality

Valid HTML
html
<!-- ❌ Invalid HTML -->
<div id="header">
  <div id="header">
    <!-- Duplicate ID -->
  </div>

  <ul>
    <div>Item</div>
    <!-- Invalid child -->
  </ul>

  <a href="/"><button>Click</button></a>
  <!-- Invalid nesting -->
</div>

<!-- ✅ Valid HTML -->
<header id="site-header"></header>

<ul>
  <li>Item</li>
</ul>

<a href="/" class="button">Click</a>
Semantic HTML
html
<!-- ❌ Non-semantic -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Headline</div>
  </div>
</div>

<!-- ✅ Semantic HTML5 -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Headline</h1>
  </article>
</main>
Image aspect ratios
html
<!-- ❌ Distorted images -->
<img src="photo.jpg" width="300" height="100" />
<!-- If actual ratio is 4:3, this squishes the image -->

<!-- ✅ Preserve aspect ratio -->
<img src="photo.jpg" width="300" height="225" />
<!-- Actual 4:3 dimensions -->

<!-- ✅ CSS object-fit for flexibility -->
<img src="photo.jpg" style="width: 300px; height: 200px; object-fit: cover;" />

Permissions & privacy

Request permissions properly
javascript
// ❌ Request on page load (bad UX, often denied)
navigator.geolocation.getCurrentPosition(success, error)

// ✅ Request in context, after user action
findNearbyButton.addEventListener('click', async () => {
  // Explain why you need it
  if (await showPermissionExplanation()) {
    navigator.geolocation.getCurrentPosition(success, error)
  }
})
Permissions policy
html
<!-- Restrict powerful features -->
<meta http-equiv="Permissions-Policy" content="geolocation=(), camera=(), microphone=()" />

<!-- Or allow for specific origins -->
<meta http-equiv="Permissions-Policy" content="geolocation=(self 'https://maps.example.com')" />

Audit checklist

Security (critical)
  • HTTPS enabled, no mixed content
  • No vulnerable dependencies (npm audit)
  • CSP headers configured
  • Security headers present
  • No exposed source maps
Compatibility
  • Valid HTML5 doctype
  • Charset declared first in head
  • Viewport meta tag present
  • No deprecated APIs used
  • Passive event listeners for scroll/touch
Code quality
  • No console errors
  • Valid HTML (no duplicate IDs)
  • Semantic HTML elements used
  • Proper error handling
  • Memory cleanup in components
UX
  • No intrusive interstitials
  • Permission requests in context
  • Clear error messages
  • Appropriate image aspect ratios

Tools

ToolPurpose
npm auditDependency vulnerabilities
SecurityHeaders.comHeader analysis
W3C ValidatorHTML validation
LighthouseBest practices audit
ObservatorySecurity scan

References

© tech-leads-club, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in packages/skills-catalog/skills/(quality)/web-best-practices of tech-leads-club/agent-skills.

Open the folder on GitHubat commit 6df68d5

Compare with similar skills

Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Best Practices this skilltech-leads-club/agent-skills7k—~3.2kAutomated safety check: PassMIT
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Codebase Review SwarmZaxbyHub/opencode-swarm496—~2.8kAutomated safety check: PassMIT
Experience Lwc Security Validateforcedotcom/sf-skills1.1k—~2.6kAutomated safety check: PassApache-2.0
Accessibility Cleanupnwjs/chromium.src160—~1.1kAutomated safety check: PassBSD-3-Clause
Web Quality Auditaddyosmani/web-quality-skills2.9k—~2.6kAutomated safety check: PassMIT

Similar skills

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Codebase Review Swarm

    ZaxbyHub/opencode-swarm

    Runs an evidence-gated, quote-grounded audit of a codebase for security, QA, accessibility, performance and more, and writes a verified report without changing source files.

    496 GitHub stars~2.8k tokensUpdated today
    DevelopmentAuto-check passed

  • Experience Lwc Security Validate

    forcedotcom/sf-skills

    Use this skill as THE specialized Lightning Web Security (LWS) validator for a Lightning Web Component bundle (.js, .ts, .html, .css, .js-meta.xml) — the canonical LWS/Product-Security review for…

    1.1k GitHub stars~2.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Accessibility Cleanup

    nwjs/chromium.src

    Finds common violations of the Android accessibility API in the Clank App Java code and attempts to address them (e.g.

    160 GitHub stars~1.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Web Quality Audit

    addyosmani/web-quality-skills

    Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.

    2.9k GitHub stars~2.6k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Web Quality Audit

    midudev/100cosas.dev

    Comprehensive web quality audit covering performance, accessibility, SEO, and best practices.

    114 GitHub starsUsed in 3 repos~1.7k tokens
    Frontend & DesignAuto-check passed

More from tech-leads-club/agent-skills

All 74 skills in this repo

  • Evolutionary Modular Architecture

    tech-leads-club/agent-skills

    Guides design of modular-monolith platforms with DDD, flat-by-aggregate modules, anti-corruption layers, outbox events and resilience, plus an architecture document with SVG diagrams.

    7k GitHub stars~3.7k tokensUpdated 2 days ago
    Auto-check passed

  • Excalidraw Diagram Studio

    tech-leads-club/agent-skills

    Generates Excalidraw diagram files from plain descriptions, choosing among flowcharts, mind maps, architecture, swimlane, class, sequence and ER diagrams.

    7k GitHub stars~3.6k tokensUpdated 2 days ago
    Auto-check passed

  • Mermaid Studio

    tech-leads-club/agent-skills

    Creates, validates and renders Mermaid diagrams to SVG, PNG or ASCII, including C4 and AWS architecture-beta, flowcharts, sequence diagrams and ERDs.

    7k GitHub stars~4.6k tokensUpdated 2 days ago
    Auto-check passed

  • AWS Cloud Advisor

    tech-leads-club/agent-skills

    Answers AWS architecture, security and service-selection questions by searching AWS documentation through MCP tools first, then adapting advice to your stack and team.

    7k GitHub stars~2.1k tokensUpdated 2 days ago
    Auto-check passed

  • Harness Eval

    tech-leads-club/agent-skills

    Evaluates a repository's agent harness (AGENTS.md, rules, skills) for broken paths, redundant instructions and usefulness, and stops at reports.

    7k GitHub stars~3.9k tokensUpdated 2 days ago
    Auto-check passed

  • NestJS Modular Monolith Architect

    tech-leads-club/agent-skills

    Designs scalable NestJS modular monoliths with domain-driven design, Clean Architecture layers and optional CQRS, defining bounded contexts and strict module boundaries.

    7k GitHub stars~3.9k tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Best Practices

What does Best Practices do?

Apply modern web development best practices for security, compatibility, and code quality. Best Practices is an agent skill from tech-leads-club/agent-skills. Apply modern web development best practices for security, compatibility, and code quality.

When should I use Best Practices?

Best Practices fits situations like: asked to apply best practices; code quality review; check for vulnerabilities; accessibility (use web-accessibility).

How do I install Best Practices in Claude Code?

Run `npx skills add tech-leads-club/agent-skills --skill best-practices -a claude-code`. Or copy the skill folder (packages/skills-catalog/skills/(quality)/web-best-practices in tech-leads-club/agent-skills) into .claude/skills/best-practices in your project. Claude Code loads it when a task matches its description.

How do I install Best Practices in Codex?

Run `npx skills add tech-leads-club/agent-skills --skill best-practices -a codex`. Or copy the skill folder (packages/skills-catalog/skills/(quality)/web-best-practices in tech-leads-club/agent-skills) into .agents/skills/best-practices in your project. Codex loads it when a task matches its description.

Can I use Best Practices in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tech-leads-club/agent-skills --skill best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/best-practices, .gemini/skills/best-practices, .github/skills/best-practices and .opencode/skills/best-practices in your project.

What does Best Practices need to run?

Going by SKILL.md and its folder, Best Practices needs the command-line tools its instructions call (npm and yarn).

Does Best Practices access the network?

SKILL.md names 6 domains. In commands or code: polyfill.io; the agent is likely to contact it when it follows the instructions. As links in the text: securityheaders.com, validator.w3.org, observatory.mozilla.org, developer.mozilla.org and owasp.org. This is read from the text; nothing was executed.

Is Best Practices safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Best Practices use?

Best Practices is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Best Practices use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Best Practices?

Skills that share tags, products or a category with Best Practices: React Doctor (makeplane/plane, 61k stars), Codebase Review Swarm (ZaxbyHub/opencode-swarm, 496 stars), Experience Lwc Security Validate (forcedotcom/sf-skills, 1.1k stars) and Accessibility Cleanup (nwjs/chromium.src, 160 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Best Practices?

tech-leads-club (a GitHub organization) maintains it in tech-leads-club/agent-skills, which has 7,045 GitHub stars. The repository holds 74 skills in this directory. The repository was last updated on October 9, 2026.

Source: tech-leads-club/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.