New: 97,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 midudev in midudev/100cosas.dev

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

MITAuto-check passedDevelopment

Install Best Practices

skills CLI
$ npx skills add midudev/100cosas.dev --skill best-practices -a claude-code

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

GitHub CLI
$ gh skill install midudev/100cosas.dev 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/midudev/100cosas.dev.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/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
114
Used in
3 other repos
Token cost
~3k tokens
SKILL.md length
232 words
Files
1
Skills in repo
3
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 midudev/100cosas.dev. 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".

Its SKILL.md is about 3k 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 Development, covering Code quality and Security review. The repository describes itself as: Aprende y mejora en programación con consejos de grandes referentes. The licence is MIT.

When your agent uses it

  • Asked to apply best practices
  • Code quality review
  • Check for vulnerabilities

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 d62cf52. 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 3k tokens when it runs. Until then it costs about 60 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
~60
When it runs · the whole SKILL.md, loaded when a task matches
~3k

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 midudev/100cosas.dev at commit d62cf52, republished under its MIT licence (© midudev). 232 words, ~3,009 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".
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>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

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

<!-- ✅ Charset as first element in head -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
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 -->

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

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

<!-- ✅ 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

© midudev, 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 .agents/skills/best-practices of midudev/100cosas.dev.

Open the folder on GitHubat commit d62cf52

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in midudev/100cosas.dev, which our catalogue first saw on October 7, 2026.

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 skillmidudev/100cosas.dev1143 repos~3kAutomated safety check: PassMIT
Code Review Specialistluongnv89/claude-howto42k—~764Automated safety check: PassMIT
Read-Only Code AuditHarnessMD/munder-difflin8.5k—~350Automated safety check: NotesMIT
Codebase Review SwarmZaxbyHub/opencode-swarm488—~2.8kAutomated safety check: PassMIT
Find Bugsgetsentry/skills1k9 repos~708Automated safety check: PassApache-2.0
Code Review with Beads Tasksmaslennikov-ig/claude-code-orchestrator-kit259—~2kAutomated safety check: PassCustom licence

Similar skills

  • Code Review Specialist

    luongnv89/claude-howto

    Reviews code for security, performance, quality and maintainability, using a checklist, a finding template and two metrics scripts.

    42k GitHub stars~764 tokensUpdated 7 days ago
    DevelopmentAuto-check passed

  • Read-Only Code Audit

    HarnessMD/munder-difflin

    Scans the working directory for ignored errors, hard-coded secrets, debt comments, dead exports and type gaps, and reports findings by severity without editing files.

    8.5k GitHub stars~350 tokensUpdated today
    DevelopmentAuto-check: notes

  • 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.

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

  • Find Bugs

    getsentry/skills

    Official

    Find bugs, security vulnerabilities, and code quality issues in local branch changes.

    1k GitHub starsUsed in 9 repos~708 tokens
    DevelopmentAuto-check passed

  • Code Review with Beads Tasks

    maslennikov-ig/claude-code-orchestrator-kit

    Reviews staged changes, a branch, a PR or a path for bugs, security gaps and performance issues, then writes an evidence-based report and creates Beads tasks.

    259 GitHub stars~2k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed

  • Review

    Thank-you-Linus/Linus-Dashboard

    Review code quality, security, and maintainability before committing.

    211 GitHub stars~1.5k tokensUpdated yesterday
    DevelopmentAuto-check passed

More from midudev/100cosas.dev

  • 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
    Auto-check passed

  • Performance

    midudev/100cosas.dev

    Optimize web performance for faster loading and better user experience.

    114 GitHub starsUsed in 6 repos~2.3k tokens
    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. dev. 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.

How do I install Best Practices in Claude Code?

Run `npx skills add midudev/100cosas.dev --skill best-practices -a claude-code`. Or copy the skill folder (.agents/skills/best-practices in midudev/100cosas.dev) 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 midudev/100cosas.dev --skill best-practices -a codex`. Or copy the skill folder (.agents/skills/best-practices in midudev/100cosas.dev) 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 midudev/100cosas.dev --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 3k tokens (SKILL.md is roughly 12k 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: Code Review Specialist (luongnv89/claude-howto, 42k stars), Read-Only Code Audit (HarnessMD/munder-difflin, 8.5k stars), Codebase Review Swarm (ZaxbyHub/opencode-swarm, 488 stars) and Find Bugs (getsentry/skills, 1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Best Practices?

midudev (a GitHub user) maintains it in midudev/100cosas.dev, which has 114 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on September 28, 2026.

Source: midudev/100cosas.dev on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.