[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DYRZC1ACEW5GMYR7WBJPXQ":3,"skill-same:01M6DYRZC1ACEW5GMYR7WBJPXQ":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M6DYRZC1ACEW5GMYR7WBJPXQ","best-practices",null,"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\".","kennyolofsson23-netizen\u002Fclaude-code-config","kennyolofsson23-netizen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F262391667?v=4","01M6DYPCT5DBDV0C11CXD8G7RX","01M6DYPD3KYJ7P6A8H7RKJ6KGG",0,"MIT","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fbest-practices\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"best practices","audit","modernize","quality review","compatibility","use","check","quality","web development","security audit","review","code","development","code quality","web","vulnerabilities","security","2026-11-10 10:12:30",false,"---\nname: best-practices\ndescription: 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\".\nlicense: MIT\nmetadata:\n  author: web-quality-skills\n  version: \"1.0\"\n---\n\n# Best practices\n\nModern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.\n\n## Security\n\n### HTTPS everywhere\n\n**Enforce HTTPS:**\n```html\n\u003C!-- ❌ Mixed content -->\n\u003Cimg src=\"http:\u002F\u002Fexample.com\u002Fimage.jpg\">\n\u003Cscript src=\"http:\u002F\u002Fcdn.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u003C!-- ✅ HTTPS only -->\n\u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fimage.jpg\">\n\u003Cscript src=\"https:\u002F\u002Fcdn.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u003C!-- ✅ Protocol-relative (will use page's protocol) -->\n\u003Cimg src=\"\u002F\u002Fexample.com\u002Fimage.jpg\">\n```\n\n**HSTS Header:**\n```\nStrict-Transport-Security: max-age=31536000; includeSubDomains; preload\n```\n\n### Content Security Policy (CSP)\n\n```html\n\u003C!-- Basic CSP via meta tag -->\n\u003Cmeta http-equiv=\"Content-Security-Policy\" \n      content=\"default-src 'self'; \n               script-src 'self' https:\u002F\u002Ftrusted-cdn.com; \n               style-src 'self' 'unsafe-inline';\n               img-src 'self' data: https:;\n               connect-src 'self' https:\u002F\u002Fapi.example.com;\">\n\n\u003C!-- Better: HTTP header -->\n```\n\n**CSP Header (recommended):**\n```\nContent-Security-Policy: \n  default-src 'self';\n  script-src 'self' 'nonce-abc123' https:\u002F\u002Ftrusted.com;\n  style-src 'self' 'nonce-abc123';\n  img-src 'self' data: https:;\n  connect-src 'self' https:\u002F\u002Fapi.example.com;\n  frame-ancestors 'self';\n  base-uri 'self';\n  form-action 'self';\n```\n\n**Using nonces for inline scripts:**\n```html\n\u003Cscript nonce=\"abc123\">\n  \u002F\u002F This inline script is allowed\n\u003C\u002Fscript>\n```\n\n### Security headers\n\n```\n# Prevent clickjacking\nX-Frame-Options: DENY\n\n# Prevent MIME type sniffing\nX-Content-Type-Options: nosniff\n\n# Enable XSS filter (legacy browsers)\nX-XSS-Protection: 1; mode=block\n\n# Control referrer information\nReferrer-Policy: strict-origin-when-cross-origin\n\n# Permissions policy (formerly Feature-Policy)\nPermissions-Policy: geolocation=(), microphone=(), camera=()\n```\n\n### No vulnerable libraries\n\n```bash\n# Check for vulnerabilities\nnpm audit\nyarn audit\n\n# Auto-fix when possible\nnpm audit fix\n\n# Check specific package\nnpm ls lodash\n```\n\n**Keep dependencies updated:**\n```json\n\u002F\u002F package.json\n{\n  \"scripts\": {\n    \"audit\": \"npm audit --audit-level=moderate\",\n    \"update\": \"npm update && npm audit fix\"\n  }\n}\n```\n\n**Known vulnerable patterns to avoid:**\n```javascript\n\u002F\u002F ❌ Prototype pollution vulnerable patterns\nObject.assign(target, userInput);\n_.merge(target, userInput);\n\n\u002F\u002F ✅ Safer alternatives\nconst safeData = JSON.parse(JSON.stringify(userInput));\n```\n\n### Input sanitization\n\n```javascript\n\u002F\u002F ❌ XSS vulnerable\nelement.innerHTML = userInput;\ndocument.write(userInput);\n\n\u002F\u002F ✅ Safe text content\nelement.textContent = userInput;\n\n\u002F\u002F ✅ If HTML needed, sanitize\nimport DOMPurify from 'dompurify';\nelement.innerHTML = DOMPurify.sanitize(userInput);\n```\n\n### Secure cookies\n\n```javascript\n\u002F\u002F ❌ Insecure cookie\ndocument.cookie = \"session=abc123\";\n\n\u002F\u002F ✅ Secure cookie (server-side)\nSet-Cookie: session=abc123; Secure; HttpOnly; SameSite=Strict; Path=\u002F\n```\n\n---\n\n## Browser compatibility\n\n### Doctype declaration\n\n```html\n\u003C!-- ❌ Missing or invalid doctype -->\n\u003CHTML>\n\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\">\n\n\u003C!-- ✅ HTML5 doctype -->\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n```\n\n### Character encoding\n\n```html\n\u003C!-- ❌ Missing or late charset -->\n\u003Chtml>\n\u003Chead>\n  \u003Ctitle>Page\u003C\u002Ftitle>\n  \u003Cmeta charset=\"UTF-8\">\n\u003C\u002Fhead>\n\n\u003C!-- ✅ Charset as first element in head -->\n\u003Chtml>\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Ctitle>Page\u003C\u002Ftitle>\n\u003C\u002Fhead>\n```\n\n### Viewport meta tag\n\n```html\n\u003C!-- ❌ Missing viewport -->\n\u003Chead>\n  \u003Ctitle>Page\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\n\u003C!-- ✅ Responsive viewport -->\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \u003Ctitle>Page\u003C\u002Ftitle>\n\u003C\u002Fhead>\n```\n\n### Feature detection\n\n```javascript\n\u002F\u002F ❌ Browser detection (brittle)\nif (navigator.userAgent.includes('Chrome')) {\n  \u002F\u002F Chrome-specific code\n}\n\n\u002F\u002F ✅ Feature detection\nif ('IntersectionObserver' in window) {\n  \u002F\u002F Use IntersectionObserver\n} else {\n  \u002F\u002F Fallback\n}\n\n\u002F\u002F ✅ Using @supports in CSS\n@supports (display: grid) {\n  .container {\n    display: grid;\n  }\n}\n\n@supports not (display: grid) {\n  .container {\n    display: flex;\n  }\n}\n```\n\n### Polyfills (when needed)\n\n```html\n\u003C!-- Load polyfills conditionally -->\n\u003Cscript>\n  if (!('fetch' in window)) {\n    document.write('\u003Cscript src=\"\u002Fpolyfills\u002Ffetch.js\">\u003C\\\u002Fscript>');\n  }\n\u003C\u002Fscript>\n\n\u003C!-- Or use polyfill.io -->\n\u003Cscript src=\"https:\u002F\u002Fpolyfill.io\u002Fv3\u002Fpolyfill.min.js?features=fetch,IntersectionObserver\">\u003C\u002Fscript>\n```\n\n---\n\n## Deprecated APIs\n\n### Avoid these\n\n```javascript\n\u002F\u002F ❌ document.write (blocks parsing)\ndocument.write('\u003Cscript src=\"...\">\u003C\u002Fscript>');\n\n\u002F\u002F ✅ Dynamic script loading\nconst script = document.createElement('script');\nscript.src = '...';\ndocument.head.appendChild(script);\n\n\u002F\u002F ❌ Synchronous XHR (blocks main thread)\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', url, false); \u002F\u002F false = synchronous\n\n\u002F\u002F ✅ Async fetch\nconst response = await fetch(url);\n\n\u002F\u002F ❌ Application Cache (deprecated)\n\u003Chtml manifest=\"cache.manifest\">\n\n\u002F\u002F ✅ Service Workers\nif ('serviceWorker' in navigator) {\n  navigator.serviceWorker.register('\u002Fsw.js');\n}\n```\n\n### Event listener passive\n\n```javascript\n\u002F\u002F ❌ Non-passive touch\u002Fwheel (may block scrolling)\nelement.addEventListener('touchstart', handler);\nelement.addEventListener('wheel', handler);\n\n\u002F\u002F ✅ Passive listeners (allows smooth scrolling)\nelement.addEventListener('touchstart', handler, { passive: true });\nelement.addEventListener('wheel', handler, { passive: true });\n\n\u002F\u002F ✅ If you need preventDefault, be explicit\nelement.addEventListener('touchstart', handler, { passive: false });\n```\n\n---\n\n## Console & errors\n\n### No console errors\n\n```javascript\n\u002F\u002F ❌ Errors in production\nconsole.log('Debug info'); \u002F\u002F Remove in production\nthrow new Error('Unhandled'); \u002F\u002F Catch all errors\n\n\u002F\u002F ✅ Proper error handling\ntry {\n  riskyOperation();\n} catch (error) {\n  \u002F\u002F Log to error tracking service\n  errorTracker.captureException(error);\n  \u002F\u002F Show user-friendly message\n  showErrorMessage('Something went wrong. Please try again.');\n}\n```\n\n### Error boundaries (React)\n\n```jsx\nclass ErrorBoundary extends React.Component {\n  state = { hasError: false };\n  \n  static getDerivedStateFromError(error) {\n    return { hasError: true };\n  }\n  \n  componentDidCatch(error, info) {\n    errorTracker.captureException(error, { extra: info });\n  }\n  \n  render() {\n    if (this.state.hasError) {\n      return \u003CFallbackUI \u002F>;\n    }\n    return this.props.children;\n  }\n}\n\n\u002F\u002F Usage\n\u003CErrorBoundary>\n  \u003CApp \u002F>\n\u003C\u002FErrorBoundary>\n```\n\n### Global error handler\n\n```javascript\n\u002F\u002F Catch unhandled errors\nwindow.addEventListener('error', (event) => {\n  errorTracker.captureException(event.error);\n});\n\n\u002F\u002F Catch unhandled promise rejections\nwindow.addEventListener('unhandledrejection', (event) => {\n  errorTracker.captureException(event.reason);\n});\n```\n\n---\n\n## Source maps\n\n### Production configuration\n\n```javascript\n\u002F\u002F ❌ Source maps exposed in production\n\u002F\u002F webpack.config.js\nmodule.exports = {\n  devtool: 'source-map', \u002F\u002F Exposes source code\n};\n\n\u002F\u002F ✅ Hidden source maps (uploaded to error tracker)\nmodule.exports = {\n  devtool: 'hidden-source-map',\n};\n\n\u002F\u002F ✅ Or no source maps in production\nmodule.exports = {\n  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',\n};\n```\n\n---\n\n## Performance best practices\n\n### Avoid blocking patterns\n\n```javascript\n\u002F\u002F ❌ Blocking script\n\u003Cscript src=\"heavy-library.js\">\u003C\u002Fscript>\n\n\u002F\u002F ✅ Deferred script\n\u003Cscript defer src=\"heavy-library.js\">\u003C\u002Fscript>\n\n\u002F\u002F ❌ Blocking CSS import\n@import url('other-styles.css');\n\n\u002F\u002F ✅ Link tags (parallel loading)\n\u003Clink rel=\"stylesheet\" href=\"styles.css\">\n\u003Clink rel=\"stylesheet\" href=\"other-styles.css\">\n```\n\n### Efficient event handlers\n\n```javascript\n\u002F\u002F ❌ Handler on every element\nitems.forEach(item => {\n  item.addEventListener('click', handleClick);\n});\n\n\u002F\u002F ✅ Event delegation\ncontainer.addEventListener('click', (e) => {\n  if (e.target.matches('.item')) {\n    handleClick(e);\n  }\n});\n```\n\n### Memory management\n\n```javascript\n\u002F\u002F ❌ Memory leak (never removed)\nconst handler = () => { \u002F* ... *\u002F };\nwindow.addEventListener('resize', handler);\n\n\u002F\u002F ✅ Cleanup when done\nconst handler = () => { \u002F* ... *\u002F };\nwindow.addEventListener('resize', handler);\n\n\u002F\u002F Later, when component unmounts:\nwindow.removeEventListener('resize', handler);\n\n\u002F\u002F ✅ Using AbortController\nconst controller = new AbortController();\nwindow.addEventListener('resize', handler, { signal: controller.signal });\n\n\u002F\u002F Cleanup:\ncontroller.abort();\n```\n\n---\n\n## Code quality\n\n### Valid HTML\n\n```html\n\u003C!-- ❌ Invalid HTML -->\n\u003Cdiv id=\"header\">\n\u003Cdiv id=\"header\"> \u003C!-- Duplicate ID -->\n\n\u003Cul>\n  \u003Cdiv>Item\u003C\u002Fdiv> \u003C!-- Invalid child -->\n\u003C\u002Ful>\n\n\u003Ca href=\"\u002F\">\u003Cbutton>Click\u003C\u002Fbutton>\u003C\u002Fa> \u003C!-- Invalid nesting -->\n\n\u003C!-- ✅ Valid HTML -->\n\u003Cheader id=\"site-header\">\n\u003C\u002Fheader>\n\n\u003Cul>\n  \u003Cli>Item\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ca href=\"\u002F\" class=\"button\">Click\u003C\u002Fa>\n```\n\n### Semantic HTML\n\n```html\n\u003C!-- ❌ Non-semantic -->\n\u003Cdiv class=\"header\">\n  \u003Cdiv class=\"nav\">\n    \u003Cdiv class=\"nav-item\">Home\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"main\">\n  \u003Cdiv class=\"article\">\n    \u003Cdiv class=\"title\">Headline\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- ✅ Semantic HTML5 -->\n\u003Cheader>\n  \u003Cnav>\n    \u003Ca href=\"\u002F\">Home\u003C\u002Fa>\n  \u003C\u002Fnav>\n\u003C\u002Fheader>\n\u003Cmain>\n  \u003Carticle>\n    \u003Ch1>Headline\u003C\u002Fh1>\n  \u003C\u002Farticle>\n\u003C\u002Fmain>\n```\n\n### Image aspect ratios\n\n```html\n\u003C!-- ❌ Distorted images -->\n\u003Cimg src=\"photo.jpg\" width=\"300\" height=\"100\">\n\u003C!-- If actual ratio is 4:3, this squishes the image -->\n\n\u003C!-- ✅ Preserve aspect ratio -->\n\u003Cimg src=\"photo.jpg\" width=\"300\" height=\"225\">\n\u003C!-- Actual 4:3 dimensions -->\n\n\u003C!-- ✅ CSS object-fit for flexibility -->\n\u003Cimg src=\"photo.jpg\" style=\"width: 300px; height: 200px; object-fit: cover;\">\n```\n\n---\n\n## Permissions & privacy\n\n### Request permissions properly\n\n```javascript\n\u002F\u002F ❌ Request on page load (bad UX, often denied)\nnavigator.geolocation.getCurrentPosition(success, error);\n\n\u002F\u002F ✅ Request in context, after user action\nfindNearbyButton.addEventListener('click', async () => {\n  \u002F\u002F Explain why you need it\n  if (await showPermissionExplanation()) {\n    navigator.geolocation.getCurrentPosition(success, error);\n  }\n});\n```\n\n### Permissions policy\n\n```html\n\u003C!-- Restrict powerful features -->\n\u003Cmeta http-equiv=\"Permissions-Policy\" \n      content=\"geolocation=(), camera=(), microphone=()\">\n\n\u003C!-- Or allow for specific origins -->\n\u003Cmeta http-equiv=\"Permissions-Policy\" \n      content=\"geolocation=(self 'https:\u002F\u002Fmaps.example.com')\">\n```\n\n---\n\n## Audit checklist\n\n### Security (critical)\n- [ ] HTTPS enabled, no mixed content\n- [ ] No vulnerable dependencies (`npm audit`)\n- [ ] CSP headers configured\n- [ ] Security headers present\n- [ ] No exposed source maps\n\n### Compatibility\n- [ ] Valid HTML5 doctype\n- [ ] Charset declared first in head\n- [ ] Viewport meta tag present\n- [ ] No deprecated APIs used\n- [ ] Passive event listeners for scroll\u002Ftouch\n\n### Code quality\n- [ ] No console errors\n- [ ] Valid HTML (no duplicate IDs)\n- [ ] Semantic HTML elements used\n- [ ] Proper error handling\n- [ ] Memory cleanup in components\n\n### UX\n- [ ] No intrusive interstitials\n- [ ] Permission requests in context\n- [ ] Clear error messages\n- [ ] Appropriate image aspect ratios\n\n## Tools\n\n| Tool | Purpose |\n|------|---------|\n| `npm audit` | Dependency vulnerabilities |\n| [SecurityHeaders.com](https:\u002F\u002Fsecurityheaders.com) | Header analysis |\n| [W3C Validator](https:\u002F\u002Fvalidator.w3.org) | HTML validation |\n| Lighthouse | Best practices audit |\n| [Observatory](https:\u002F\u002Fobservatory.mozilla.org) | Security scan |\n\n## References\n\n- [MDN Web Security](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSecurity)\n- [OWASP Top 10](https:\u002F\u002Fowasp.org\u002Fwww-project-top-ten\u002F)\n- [Web Quality Audit](..\u002Fweb-quality-audit\u002FSKILL.md)\n","# Best practices\n\nModern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.\n\n## Security\n\n### HTTPS everywhere\n\n**Enforce HTTPS:**\n```html\n\u003C!-- ❌ Mixed content -->\n\u003Cimg src=\"http:\u002F\u002Fexample.com\u002Fimage.jpg\">\n\u003Cscript src=\"http:\u002F\u002Fcdn.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u003C!-- ✅ HTTPS only -->\n\u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fimage.jpg\">\n\u003Cscript src=\"https:\u002F\u002Fcdn.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u003C!-- ✅ Protocol-relative (will use page's protocol) -->\n\u003Cimg src=\"\u002F\u002Fexample.com\u002Fimage.jpg\">\n```\n\n**HSTS Header:**\n```\nStrict-Transport-Security: max-age=31536000; includeSubDomains; preload\n```\n\n### Content Security Policy (CSP)\n\n```html\n\u003C!-- Basic CSP via meta tag -->\n\u003Cmeta http-equiv=\"Content-Security-Policy\" \n      content=\"default-src 'self'; \n               script-src 'self' https:\u002F\u002Ftrusted-cdn.com; \n               style-src 'self' 'unsafe-inline';\n               img-src 'self' data: https:;\n               connect-src 'self' https:\u002F\u002Fapi.example.com;\">\n\n\u003C!-- Better: HTTP header -->\n```\n\n**CSP Header (recommended):**\n```\nContent-Security-Policy: \n  default-src 'self';\n  script-src 'self' 'nonce-abc123' https:\u002F\u002Ftrusted.com;\n  style-src 'self' 'nonce-abc123';\n  img-src 'self' data: https:;\n  connect-src 'self' https:\u002F\u002Fapi.example.com;\n  frame-ancestors 'self';\n  base-uri 'self';\n  form-action 'self';\n```\n\n**Using nonces for inline scripts:**\n```html\n\u003Cscript nonce=\"abc123\">\n  \u002F\u002F This inline script is allowed\n\u003C\u002Fscript>\n```\n\n### Security headers\n\n```\n# Prevent clickjacking\nX-Frame-Options: DENY\n\n# Prevent MIME type sniffing\nX-Content-Type-Options: nosniff\n\n# Enable XSS filter (legacy browsers)\nX-XSS-Protection: 1; mode=block\n\n# Control referrer information\nReferrer-Policy: strict-origin-when-cross-origin\n\n# Permissions policy (formerly Feature-Policy)\nPermissions-Policy: geolocation=(), microphone=(), camera=()\n```\n\n### No vulnerable libraries\n\n```bash\n# Check for vulnerabilities\nnpm audit\nyarn audit\n\n# Auto-fix when possible\nnpm audit fix\n\n# Check specific package\nnpm ls lodash\n```\n\n**Keep dependencies updated:**\n```json\n\u002F\u002F package.json\n{\n  \"scripts\": {\n    \"audit\": \"npm audit --audit-level=moderate\",\n    \"update\": \"npm update && npm audit fix\"\n  }\n}\n```\n\n**Known vulnerable patterns to avoid:**\n```javascript\n\u002F\u002F ❌ Prototype pollution vulnerable patterns\nObject.assign(target, userInput);\n_.merge(target, userInput);\n\n\u002F\u002F ✅ Safer alternatives\nconst safeData = JSON.parse(JSON.stringify(userInput));\n```\n\n### Input sanitization\n\n```javascript\n\u002F\u002F ❌ XSS vulnerable\nelement.innerHTML = userInput;\ndocument.write(userInput);\n\n\u002F\u002F ✅ Safe text content\nelement.textContent = userInput;\n\n\u002F\u002F ✅ If HTML needed, sanitize\nimport DOMPurify from 'dompurify';\nelement.innerHTML = DOMPurify.sanitize(userInput);\n```\n\n### Secure cookies\n\n```javascript\n\u002F\u002F ❌ Insecure cookie\ndocument.cookie = \"session=abc123\";\n\n\u002F\u002F ✅ Secure cookie (server-side)\nSet-Cookie: session=abc123; Secure; HttpOnly; SameSite=Strict; Path=\u002F\n```\n\n---\n\n## Browser compatibility\n\n### Doctype declaration\n\n```html\n\u003C!-- ❌ Missing or invalid doctype -->\n\u003CHTML>\n\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\">\n\n\u003C!-- ✅ HTML5 doctype -->\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n```\n\n### Character encoding\n\n```html\n\u003C!-- ❌ Missing or late charset -->\n\u003Chtml>\n\u003Chead>\n  \u003Ctitle>Page\u003C\u002Ftitle>\n  \u003Cmeta charset=\"UTF-8\">\n\u003C\u002Fhead>\n\n\u003C!-- ✅ Charset as first element in head -->\n\u003Chtml>\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Ctitle>Page\u003C\u002Ftitle>\n\u003C\u002Fhead>\n```\n\n### Viewport meta tag\n\n```html\n\u003C!-- ❌ Missing viewport -->\n\u003Chead>\n  \u003Ctitle>Page\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\n\u003C!-- ✅ Responsive viewport -->\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \u003Ctitle>Page\u003C\u002Ftitle>\n\u003C\u002Fhead>\n```\n\n### Feature detection\n\n```javascript\n\u002F\u002F ❌ Browser detection (brittle)\nif (navigator.userAgent.includes('Chrome')) {\n  \u002F\u002F Chrome-specific code\n}\n\n\u002F\u002F ✅ Feature detection\nif ('IntersectionObserver' in window) {\n  \u002F\u002F Use IntersectionObserver\n} else {\n  \u002F\u002F Fallback\n}\n\n\u002F\u002F ✅ Using @supports in CSS\n@supports (display: grid) {\n  .container {\n    display: grid;\n  }\n}\n\n@supports not (display: grid) {\n  .container {\n    display: flex;\n  }\n}\n```\n\n### Polyfills (when needed)\n\n```html\n\u003C!-- Load polyfills conditionally -->\n\u003Cscript>\n  if (!('fetch' in window)) {\n    document.write('\u003Cscript src=\"\u002Fpolyfills\u002Ffetch.js\">\u003C\\\u002Fscript>');\n  }\n\u003C\u002Fscript>\n\n\u003C!-- Or use polyfill.io -->\n\u003Cscript src=\"https:\u002F\u002Fpolyfill.io\u002Fv3\u002Fpolyfill.min.js?features=fetch,IntersectionObserver\">\u003C\u002Fscript>\n```\n\n---\n\n## Deprecated APIs\n\n### Avoid these\n\n```javascript\n\u002F\u002F ❌ document.write (blocks parsing)\ndocument.write('\u003Cscript src=\"...\">\u003C\u002Fscript>');\n\n\u002F\u002F ✅ Dynamic script loading\nconst script = document.createElement('script');\nscript.src = '...';\ndocument.head.appendChild(script);\n\n\u002F\u002F ❌ Synchronous XHR (blocks main thread)\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', url, false); \u002F\u002F false = synchronous\n\n\u002F\u002F ✅ Async fetch\nconst response = await fetch(url);\n\n\u002F\u002F ❌ Application Cache (deprecated)\n\u003Chtml manifest=\"cache.manifest\">\n\n\u002F\u002F ✅ Service Workers\nif ('serviceWorker' in navigator) {\n  navigator.serviceWorker.register('\u002Fsw.js');\n}\n```\n\n### Event listener passive\n\n```javascript\n\u002F\u002F ❌ Non-passive touch\u002Fwheel (may block scrolling)\nelement.addEventListener('touchstart', handler);\nelement.addEventListener('wheel', handler);\n\n\u002F\u002F ✅ Passive listeners (allows smooth scrolling)\nelement.addEventListener('touchstart', handler, { passive: true });\nelement.addEventListener('wheel', handler, { passive: true });\n\n\u002F\u002F ✅ If you need preventDefault, be explicit\nelement.addEventListener('touchstart', handler, { passive: false });\n```\n\n---\n\n## Console & errors\n\n### No console errors\n\n```javascript\n\u002F\u002F ❌ Errors in production\nconsole.log('Debug info'); \u002F\u002F Remove in production\nthrow new Error('Unhandled'); \u002F\u002F Catch all errors\n\n\u002F\u002F ✅ Proper error handling\ntry {\n  riskyOperation();\n} catch (error) {\n  \u002F\u002F Log to error tracking service\n  errorTracker.captureException(error);\n  \u002F\u002F Show user-friendly message\n  showErrorMessage('Something went wrong. Please try again.');\n}\n```\n\n### Error boundaries (React)\n\n```jsx\nclass ErrorBoundary extends React.Component {\n  state = { hasError: false };\n  \n  static getDerivedStateFromError(error) {\n    return { hasError: true };\n  }\n  \n  componentDidCatch(error, info) {\n    errorTracker.captureException(error, { extra: info });\n  }\n  \n  render() {\n    if (this.state.hasError) {\n      return \u003CFallbackUI \u002F>;\n    }\n    return this.props.children;\n  }\n}\n\n\u002F\u002F Usage\n\u003CErrorBoundary>\n  \u003CApp \u002F>\n\u003C\u002FErrorBoundary>\n```\n\n### Global error handler\n\n```javascript\n\u002F\u002F Catch unhandled errors\nwindow.addEventListener('error', (event) => {\n  errorTracker.captureException(event.error);\n});\n\n\u002F\u002F Catch unhandled promise rejections\nwindow.addEventListener('unhandledrejection', (event) => {\n  errorTracker.captureException(event.reason);\n});\n```\n\n---\n\n## Source maps\n\n### Production configuration\n\n```javascript\n\u002F\u002F ❌ Source maps exposed in production\n\u002F\u002F webpack.config.js\nmodule.exports = {\n  devtool: 'source-map', \u002F\u002F Exposes source code\n};\n\n\u002F\u002F ✅ Hidden source maps (uploaded to error tracker)\nmodule.exports = {\n  devtool: 'hidden-source-map',\n};\n\n\u002F\u002F ✅ Or no source maps in production\nmodule.exports = {\n  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',\n};\n```\n\n---\n\n## Performance best practices\n\n### Avoid blocking patterns\n\n```javascript\n\u002F\u002F ❌ Blocking script\n\u003Cscript src=\"heavy-library.js\">\u003C\u002Fscript>\n\n\u002F\u002F ✅ Deferred script\n\u003Cscript defer src=\"heavy-library.js\">\u003C\u002Fscript>\n\n\u002F\u002F ❌ Blocking CSS import\n@import url('other-styles.css');\n\n\u002F\u002F ✅ Link tags (parallel loading)\n\u003Clink rel=\"stylesheet\" href=\"styles.css\">\n\u003Clink rel=\"stylesheet\" href=\"other-styles.css\">\n```\n\n### Efficient event handlers\n\n```javascript\n\u002F\u002F ❌ Handler on every element\nitems.forEach(item => {\n  item.addEventListener('click', handleClick);\n});\n\n\u002F\u002F ✅ Event delegation\ncontainer.addEventListener('click', (e) => {\n  if (e.target.matches('.item')) {\n    handleClick(e);\n  }\n});\n```\n\n### Memory management\n\n```javascript\n\u002F\u002F ❌ Memory leak (never removed)\nconst handler = () => { \u002F* ... *\u002F };\nwindow.addEventListener('resize', handler);\n\n\u002F\u002F ✅ Cleanup when done\nconst handler = () => { \u002F* ... *\u002F };\nwindow.addEventListener('resize', handler);\n\n\u002F\u002F Later, when component unmounts:\nwindow.removeEventListener('resize', handler);\n\n\u002F\u002F ✅ Using AbortController\nconst controller = new AbortController();\nwindow.addEventListener('resize', handler, { signal: controller.signal });\n\n\u002F\u002F Cleanup:\ncontroller.abort();\n```\n\n---\n\n## Code quality\n\n### Valid HTML\n\n```html\n\u003C!-- ❌ Invalid HTML -->\n\u003Cdiv id=\"header\">\n\u003Cdiv id=\"header\"> \u003C!-- Duplicate ID -->\n\n\u003Cul>\n  \u003Cdiv>Item\u003C\u002Fdiv> \u003C!-- Invalid child -->\n\u003C\u002Ful>\n\n\u003Ca href=\"\u002F\">\u003Cbutton>Click\u003C\u002Fbutton>\u003C\u002Fa> \u003C!-- Invalid nesting -->\n\n\u003C!-- ✅ Valid HTML -->\n\u003Cheader id=\"site-header\">\n\u003C\u002Fheader>\n\n\u003Cul>\n  \u003Cli>Item\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ca href=\"\u002F\" class=\"button\">Click\u003C\u002Fa>\n```\n\n### Semantic HTML\n\n```html\n\u003C!-- ❌ Non-semantic -->\n\u003Cdiv class=\"header\">\n  \u003Cdiv class=\"nav\">\n    \u003Cdiv class=\"nav-item\">Home\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"main\">\n  \u003Cdiv class=\"article\">\n    \u003Cdiv class=\"title\">Headline\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- ✅ Semantic HTML5 -->\n\u003Cheader>\n  \u003Cnav>\n    \u003Ca href=\"\u002F\">Home\u003C\u002Fa>\n  \u003C\u002Fnav>\n\u003C\u002Fheader>\n\u003Cmain>\n  \u003Carticle>\n    \u003Ch1>Headline\u003C\u002Fh1>\n  \u003C\u002Farticle>\n\u003C\u002Fmain>\n```\n\n### Image aspect ratios\n\n```html\n\u003C!-- ❌ Distorted images -->\n\u003Cimg src=\"photo.jpg\" width=\"300\" height=\"100\">\n\u003C!-- If actual ratio is 4:3, this squishes the image -->\n\n\u003C!-- ✅ Preserve aspect ratio -->\n\u003Cimg src=\"photo.jpg\" width=\"300\" height=\"225\">\n\u003C!-- Actual 4:3 dimensions -->\n\n\u003C!-- ✅ CSS object-fit for flexibility -->\n\u003Cimg src=\"photo.jpg\" style=\"width: 300px; height: 200px; object-fit: cover;\">\n```\n\n---\n\n## Permissions & privacy\n\n### Request permissions properly\n\n```javascript\n\u002F\u002F ❌ Request on page load (bad UX, often denied)\nnavigator.geolocation.getCurrentPosition(success, error);\n\n\u002F\u002F ✅ Request in context, after user action\nfindNearbyButton.addEventListener('click', async () => {\n  \u002F\u002F Explain why you need it\n  if (await showPermissionExplanation()) {\n    navigator.geolocation.getCurrentPosition(success, error);\n  }\n});\n```\n\n### Permissions policy\n\n```html\n\u003C!-- Restrict powerful features -->\n\u003Cmeta http-equiv=\"Permissions-Policy\" \n      content=\"geolocation=(), camera=(), microphone=()\">\n\n\u003C!-- Or allow for specific origins -->\n\u003Cmeta http-equiv=\"Permissions-Policy\" \n      content=\"geolocation=(self 'https:\u002F\u002Fmaps.example.com')\">\n```\n\n---\n\n## Audit checklist\n\n### Security (critical)\n- [ ] HTTPS enabled, no mixed content\n- [ ] No vulnerable dependencies (`npm audit`)\n- [ ] CSP headers configured\n- [ ] Security headers present\n- [ ] No exposed source maps\n\n### Compatibility\n- [ ] Valid HTML5 doctype\n- [ ] Charset declared first in head\n- [ ] Viewport meta tag present\n- [ ] No deprecated APIs used\n- [ ] Passive event listeners for scroll\u002Ftouch\n\n### Code quality\n- [ ] No console errors\n- [ ] Valid HTML (no duplicate IDs)\n- [ ] Semantic HTML elements used\n- [ ] Proper error handling\n- [ ] Memory cleanup in components\n\n### UX\n- [ ] No intrusive interstitials\n- [ ] Permission requests in context\n- [ ] Clear error messages\n- [ ] Appropriate image aspect ratios\n\n## Tools\n\n| Tool | Purpose |\n|------|---------|\n| `npm audit` | Dependency vulnerabilities |\n| [SecurityHeaders.com](https:\u002F\u002Fsecurityheaders.com) | Header analysis |\n| [W3C Validator](https:\u002F\u002Fvalidator.w3.org) | HTML validation |\n| Lighthouse | Best practices audit |\n| [Observatory](https:\u002F\u002Fobservatory.mozilla.org) | Security scan |\n\n## References\n\n- [MDN Web Security](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSecurity)\n- [OWASP Top 10](https:\u002F\u002Fowasp.org\u002Fwww-project-top-ten\u002F)\n- [Web Quality Audit](..\u002Fweb-quality-audit\u002FSKILL.md)\n",{"name":5,"license":14,"metadata":45,"description":7},{"author":46,"version":47},"web-quality-skills","1.0","main","770ead1d2718b931bf0d81b757d75d0f33e43d90","skills\u002Fbest-practices",2,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen","2026-09-05 20:20:54",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill best-practices",{"tool":61,"command":62},"bunx","bunx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill best-practices",{"tool":64,"command":65},"pnpm","pnpm dlx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fbest-practices\u002FSKILL.md",true,[69],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"index.json","REFERENCE","参考文档",673,"https:\u002F\u002Fgithub.com\u002FDCx7C5\u002Fai-marketplace\u002Fblob\u002Fmain\u002Fskills\u002Fsoc\u002Fedr\u002Fcrowdstrike\u002Fdetect\u002Findex.json",[76,101,134,168,187,210],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":90,"publishedAt":40},"01M6DZ7A62MZTGTBH4GYQPYHHM","web-quality-audit","Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to \"audit my site\", \"review web quality\", \"run lighthouse audit\", \"check page quality\", or \"optimize my website\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fweb-quality-audit\u002FSKILL.md",[82,87],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000019","营销推广","SCENARIO","使用场景",{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000035","市场营销",[37,24,91,30,33,92,93,94,23,95,96,97,98,99,29,28,100],"web quality audit","performance","accessibility","run","website","seo","Lighthouse","site","page","optimize",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":113,"publishedAt":40},"01M6DZ6385911YENGYA985W015","tailwind-v4-shadcn","Production-tested setup for Tailwind CSS v4 with shadcn\u002Fui, Vite, and React.\n\nUse when: initializing React projects with Tailwind v4, setting up shadcn\u002Fui,\nimplementing dark mode, debugging CSS variable issues, fixing theme switching,\nmigrating from Tailwind v3, or encountering color\u002Ftheming problems.\n\nCovers: @theme inline pattern, CSS variable architecture, dark mode with\nThemeProvider, component composition, vite.config setup, common v4 gotchas,\nand production-tested patterns.\n\nKeywords: Tailwind v4, shadcn\u002Fui, @tailwindcss\u002Fvite, @theme inline, dark mode,\nCSS variables, hsl() wrapper, components.json, React theming, theme switching,\ncolors not working, variables broken, theme not applying, @plugin directive,\ntypography plugin, forms plugin, prose class, @tailwindcss\u002Ftypography,\n@tailwindcss\u002Fforms","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002FSKILL.md",[107,110],{"categoryNo":108,"categoryName":109,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":111,"categoryName":112,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000015","视觉设计",[114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133],"shadcn","Tailwind","tailwind v4","tailwind v4 shadcn","css","tailwindcss","components","react","component","architecture","config","debugging","issues","Composition","projects","common","broken","up","switching","css variables",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":148,"publishedAt":40},"01M6DZ5Z3F0PTH87NM9ATQD3E3","social-content","When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter\u002FX, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' or 'viral content.' This skill covers content creation, repurposing, and platform-specific strategies.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fsocial-content\u002FSKILL.md",[140,141,144,145],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":142,"categoryName":143,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":146,"categoryName":147,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000036","内容创作者",[149,150,151,152,153,154,155,156,157,28,158,159,160,161,162,163,164,165,166,167],"content","social content","social","Media","marketing","twitter","linkedin","instagram","social media","calendar","scheduling","tiktok","content calendar","content creation","facebook","viral","strategies","platform","creation",{"skillNo":169,"name":96,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":175,"publishedAt":40},"01M6DZ5NDBE4821RDH11V7FQTK","Optimize for search engine visibility and ranking. Use when asked to \"improve SEO\", \"optimize for search\", \"fix meta tags\", \"add structured data\", \"sitemap optimization\", or \"search engine optimization\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fseo\u002FSKILL.md",[173,174],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},[96,176,37,177,178,179,180,181,182,183,30,184,28,100,185,186],"structured data","search","Optimization","data","Meta","Meta Tags","improve","engine","fix","structured","ranking",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":196,"publishedAt":40},"01M6DZ39W3BS39MBVGBDA38DV9","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Freact-best-practices\u002FSKILL.md",[193,194,195],{"categoryNo":108,"categoryName":109,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":142,"categoryName":143,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[121,197,23,198,199,200,92,120,201,202,203,34,178,179,204,205,206,207,208,209],"vercel react best practices","react best practices","vercel","writing","react components","guidelines","tasks","Next.js","refactoring","patterns","next","pages","triggers",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":221,"publishedAt":40},"01M6DZ2C3HPF1JX3TD508SXNDR","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fpostgres-best-practices\u002FSKILL.md",[216,219,220],{"categoryNo":217,"categoryName":218,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":142,"categoryName":143,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[23,222,223,224,225,200,92,34,226,227,178,228,229,230,28,231,232,233,234,235],"supabase postgres best practices","supabase","postgres best practices","postgres","database","examples","analysis","correct","Rules","schema","query","across","critical","impact"]