Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Best Practices · mkurman | DecimalAI

mkurman/best-practices

SkillScore100Maintained

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

codingby mkurman

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/mkurman-best-practices/SKILL.md

decimalai skills pull mkurman-best-practices --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/mkurman-best-practices/SKILL.md https://app.decimal.ai/s/mkurman-best-practices/SKILL.md

Raw file: /s/mkurman-best-practices/SKILL.md ↗ · machine-readable summary at /s/mkurman-best-practices.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

Yes — +5% lift · at higher cost+91% tokens0% turns100% of whole cases pass with skill (22/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-06	✗→✓	▲ Improved	134%	0%
case-05	✓→✓	＝ Same ✓	38%	0%
case-01	✓→✓	＝ Same ✓	74%	0%
case-02	✓→✓	＝ Same ✓	93%	0%
case-03	✓→✓	＝ Same ✓	46%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

mkurman / zorai

skills/gsd-2/skills/best-practices/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

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

| Tool | Purpose | |------|---------| | npm audit | Dependency vulnerabilities | | SecurityHeaders.com | Header analysis | | W3C Validator | HTML validation | | Lighthouse | Best practices audit | | Observatory | Security scan |

References

MDN Web Security
OWASP Top 10
Web Quality Audit

Want to see if mkurman/best-practices would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/21/2026, 17:57 UTC · 22 cases

Lift

+5%

100% vs 95%

Agent turns

1.0 vs 1.0

Tokens

+91%

3,399.68 vs 1,780.05

fail → pass · 1pass → pass · 21

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-05 A JavaScript frontend function calls a remote backend API that frequently fails, currently printing errors directly via console.log or leaving thrown exceptions unhandled. Refactor the function for production error resilience.	pass→pass	17,943	14,736	-18%	1	1	0%	3,418	4,701	+38%	0	0	—
case-01 In a legacy JavaScript web application, the code injects third-party tracking scripts dynamically using document.write() during page rendering. Refactor this loading logic so it fetches and executes the script asynchronously without blocking the HTML parser.	pass→pass	12,367	9,765	-21%	1	1	0%	2,151	3,740	+74%	0	0	—
case-02 A legacy browser script uses XMLHttpRequest with the async flag set to false to fetch remote configuration synchronously. Re-implement this data fetching using modern browser APIs to prevent blocking the main browser thread.	pass→pass	9,977	8,542	-14%	1	1	0%	1,829	3,538	+93%	0	0	—
case-03 An offline web application currently relies on an HTML manifest attribute for Application Cache (<html manifest="app.manifest">). How should offline asset caching be modernized according to modern web platform standards?	pass→pass	25,974	10,409	-60%	1	1	0%	2,807	4,104	+46%	0	0	—
case-04 A web page registers touchstart and wheel event listeners on a container element. Scrolling feels sluggish because the browser waits for listeners to complete. Modernize the event registration while keeping smooth scrolling performance.	pass→pass	7,348	7,238	-1%	1	1	0%	1,235	3,110	+152%	0	0	—
case-06 Write a class-based React component designed to catch JavaScript runtime errors anywhere in its child component tree and render a fallback UI. Include the necessary lifecycle methods.	fail→pass	13,565	16,566	+22%	1	1	0%	1,688	3,955	+134%	0	0	—
case-07 A web application needs global runtime monitoring to log unhandled synchronous JavaScript errors as well as unhandled promise rejections that escape try/catch blocks. Write the window event listeners for both.	pass→pass	23,751	8,292	-65%	1	1	0%	1,760	3,399	+93%	0	0	—
case-08 A Webpack build configuration currently uses devtool: 'source-map' in production, which exposes raw TypeScript source code to any user inspecting browser devtools. How should devtool be configured for production to capture error line numbers without exposing source code publicly?	pass→pass	11,322	8,662	-23%	1	1	0%	1,882	3,411	+81%	0	0	—
case-09 A web page includes a heavy external library via <script src="lib.js"></script> at the top of the document, blocking DOM parsing. What HTML script attribute should be added to ensure the script executes after parsing without blocking layout?	pass→pass	3,977	3,492	-12%	1	1	0%	621	2,570	+314%	0	0	—
case-10 A stylesheet includes another CSS file using @import url('extra.css') at the top of the file. How should this stylesheet loading be refactored in HTML to optimize critical path loading speed?	pass→pass	10,510	9,263	-12%	1	1	0%	1,836	3,028	+65%	0	0	—
case-11 A dynamic list contains 500 list items, and the developer attaches an individual click event listener to each list item. Refactor this implementation to minimize memory overhead and improve dynamic element performance.	pass→pass	8,598	7,577	-12%	1	1	0%	1,493	3,214	+115%	0	0	—
case-12 A single-page application component adds a resize event listener to the global window object. Show how to handle listener cleanup using modern DOM APIs when the component unmounts without explicitly calling removeEventListener.	pass→pass	8,322	6,150	-26%	1	1	0%	1,479	2,952	+100%	0	0	—
case-13 A web page snippet contains invalid HTML constructs including duplicate element identifiers, direct div children inside a ul container, and a button element wrapped inside an anchor tag. Rewrite this snippet into valid HTML5 markup.	pass→pass	7,003	7,203	+3%	1	1	0%	1,229	3,190	+160%	0	0	—
case-14 A web application layout is structured entirely using generic div elements with class names like header, nav, main, article, and title. Refactor this structure to use standard semantic HTML5 tags.	pass→pass	9,928	6,927	-30%	1	1	0%	1,862	3,357	+80%	0	0	—
case-15 An HTML page displays a user profile photo stored at 4:3 native ratio using explicit attributes width='300' and height='100', causing severe vertical compression and distortion. Show two valid ways (HTML attributes and CSS) to fix this aspect ratio issue.	pass→pass	11,628	6,046	-48%	1	1	0%	2,129	3,015	+42%	0	0	—
case-16 A location-based website requests navigator.geolocation.getCurrentPosition directly on initial page load, causing browser prompt blocking and low acceptance rates. Redesign the permission flow for better user experience.	pass→pass	15,835	13,777	-13%	1	1	0%	2,612	4,616	+77%	0	0	—
case-17 A sensitive web application needs to strictly disable browser access to geolocation, camera, and microphone across all frames using an HTML meta tag. Provide the exact meta tag attribute structure.	pass→pass	7,780	3,362	-57%	1	1	0%	1,308	2,463	+88%	0	0	—
case-18 A Node.js web project needs to check its third-party npm packages for known security vulnerabilities before deployment. What official CLI command should be executed?	pass→pass	2,731	2,601	-5%	1	1	0%	398	2,314	+481%	0	0	—
case-19 A developer wants to validate their HTML markup against standard syntax specification rules using an official web-based validator. What external validation service or tool handles HTML syntax verification?	pass→pass	5,530	4,178	-24%	1	1	0%	906	2,523	+178%	0	0	—
case-20 I need to align items vertically and horizontally in a CSS layout container using CSS Grid vs Flexbox. Should I use align-items: center or justify-content: center for column-direction flex items? Explain flexbox alignment rules.	pass→pass	9,981	6,989	-30%	1	1	0%	1,758	3,308	+88%	0	0	—
case-21 A Node.js backend route handles user login using a raw PostgreSQL client connection. How should database queries be formatted to prevent SQL injection vulnerabilities when querying user credentials?	pass→pass	11,756	10,321	-12%	1	1	0%	2,122	3,785	+78%	0	0	—
case-22 I am configuring Cloudflare DNS for a custom web domain. How do CNAME flattening and ALIAS records differ from standard CNAME records at the domain root (apex zone)?	pass→pass	16,181	15,844	-2%	1	1	0%	2,638	4,500	+71%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +5 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 95.5%
Pass rate with the skill: 100%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/21/2026, 17:57 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-06

Prompt

Write a class-based React component designed to catch JavaScript runtime errors anywhere in its child component tree and render a fallback UI. Include the necessary lifecycle methods.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run100

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+89% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 7 days ago

Other measured skills in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

mkurman/best-practices

SkillSafety

Source

Deprecated APIs

Avoid these

Event listener passive

Console & errors

No console errors

Error boundaries (React)

Global error handler

Source maps

Production configuration

Performance best practices

Avoid blocking patterns

Efficient event handlers

Memory management

Code quality

Valid HTML

Semantic HTML

Image aspect ratios

Permissions & privacy

Request permissions properly

Permissions policy

Audit checklist

Security (critical)

Compatibility

Code quality

UX

Tools

References

How this skill was measured

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-06

Related skills