[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JJ4BHD1WRRPG92Q68DF1EC":3,"skill-same:01M6JJ4BHD1WRRPG92Q68DF1EC":67},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M6JJ4BHD1WRRPG92Q68DF1EC","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\".","transaurus\u002Fstaging-davila7-claude-code-templates","transaurus","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F210882017?v=4","01M6JH1R6ZCRXGJCTDP5ZKZBE6","Page Turner Agent","01M6JH1RBBR2P6Y0XWDGM4B0G7",0,"MIT","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fbest-practices\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"best practices","security audit","for","modernize","quality review","compatibility","use","check","quality","web development","review","audit","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":15,"metadata":42,"description":7},{"author":43,"version":44},"web-quality-skills","1.0","main","34fa6acf794b9a6310d298cbb8fb8c9420a5edcf","cli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fbest-practices",2,"https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates","https:\u002F\u002Fgithub.com\u002Ftransaurus","Automated works of Page Turner","2026-03-28 10:12:59",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add transaurus\u002Fstaging-davila7-claude-code-templates --skill best-practices",{"tool":59,"command":60},"bunx","bunx skills add transaurus\u002Fstaging-davila7-claude-code-templates --skill best-practices",{"tool":62,"command":63},"pnpm","pnpm dlx skills add transaurus\u002Fstaging-davila7-claude-code-templates --skill best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fbest-practices\u002FSKILL.md",true,[],[68,97,118,142,162,188],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":37},"01M6JMRJR3BE0HGWFWDZSB853S","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points.  This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fzapier-make-patterns\u002FSKILL.md",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[80,81,82,83,84,85,86,31,87,88,25,89,90,91,92,93,94,95,21,96],"zapier make patterns","patterns","make","zapier","writing","workflow","automation","integrations","business","power","complexity","platform","apps","how to","No-Code","which","spawner",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":37},"01M6JMR8YK6SWPCTG1MCQTMN9S","yeet","Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`).","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fyeet\u002FSKILL.md",[],[99,104,105,106,107,108,109,110,111,112,113,114,25,115,116,117],"cli","github","commit","pull request","openai","pull","push","flow","open","gh","user","only","stage","github cli",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":125,"publishedAt":37},"01M6JMQNFE64ZASQK90HARRXW8","workflow-automation","Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off.  This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation.  Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fworkflow-automation\u002FSKILL.md",[124],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},[85,86,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,21,96],"Workflow Automation","ai agents","accessibility","workflows","apache","execution","inngest","parallel","orchestrator","resume","n8n","payment","worker","scripts","temporal","with",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":148,"publishedAt":37},"01M6JMQDYJ0XETERPHGDR3EVGN","trigger-dev","Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Ftrigger-dev\u002FSKILL.md",[],[149,150,151,152,153,129,154,130,131,155,25,156,157,158,159,160,161,141,21,96],"dev","trigger dev","trigger","design","typescript","async execution","first","async","developer experience","expert","task","background jobs","long",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":171,"publishedAt":37},"01M6JMQ5J6KK3GSX9FJCWWK6G6","planning-with-files","Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants structured output.","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fplanning-with-files\u002FSKILL.md",[168],{"categoryNo":169,"categoryName":170,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000021","资料检索与研究",[172,173,174,141,175,85,176,177,178,179,180,181,25,182,183,184,185,186,187,21],"planning with files","planning","files","with files","storage","tasks","markdown","knowledge","projects","work","manus","structured output","progress","transforms","multi","output",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":198,"publishedAt":37},"01M6JMPWAT60RXXNEC4V9TRBRS","n8n-workflow-patterns","Proven workflow architectural patterns from real n8n workflows. Use when building new workflows, designing workflow structure, choosing workflow patterns, planning workflow architecture, or asking about webhook processing, HTTP API integration, database operations, AI agent workflows, or scheduled tasks.","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fn8n\u002Fn8n-workflow-patterns\u002FSKILL.md",[194,197],{"categoryNo":195,"categoryName":196,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},[85,199,136,200,81,201,202,129,203,177,173,204,205,206,207,208,209,210,211,212],"n8n workflow patterns","workflow patterns","n8n workflow","ai agent","architecture","database","api","planning workflow","structure","database operations","webhook","processing","http api","scheduled"]