[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M773WN4HKPW05DPVANT1Q0H6":3,"skill-same:01M773WN4HKPW05DPVANT1Q0H6":50},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":28,"commitSha":29,"skillDirectory":30,"forksCount":31,"repositoryHtmlUrl":32,"repositoryHomepageUrl":6,"ownerHtmlUrl":33,"ownerBlogUrl":6,"ownerDescription":34,"updatedAt":35,"install":36,"resources":49},"01M773WN4HKPW05DPVANT1Q0H6","web-quality-best-practices",null,"Modern web development standards: security (HTTPS, HSTS, CSP), modern APIs, browser compatibility, error handling, console cleanliness, and UX patterns. Based on Lighthouse Best Practices category. Trigger: When applying best practices, running security audit, modernizing legacy web code, checking browser compatibility, or reviewing code quality.","davidcoachdev\u002Fdcfiles","davidcoachdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F69812733?v=4","01M758C4BR16TAV1N47W319E9V","David H. Caycedo Blum.","01M758C4CCZA2ZYGA0BGMXCDRH",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fweb-quality-best-practices\u002FSKILL.md",[],[],"2026-11-12 13:55:43",false,"---\nname: web-quality-best-practices\ndescription: >\n  Modern web development standards: security (HTTPS, HSTS, CSP), modern APIs, browser\n  compatibility, error handling, console cleanliness, and UX patterns. Based on Lighthouse\n  Best Practices category.\n  Trigger: When applying best practices, running security audit, modernizing legacy web code,\n  checking browser compatibility, or reviewing code quality.\nlicense: Apache-2.0\nmetadata:\n  author: gentleman-programming\n  version: \"1.0\"\n---\n\n## When to Use\n\n- Pre-launch code quality review\n- Security audit (frontend-side)\n- Modernizing legacy code (deprecated APIs)\n- Browser compatibility checks\n- Console error \u002F warning cleanup\n- Reviewing UX patterns (interstitials, permissions, etc.)\n\n## Security\n\n### HTTPS & HSTS\n- **HTTPS everywhere.** No mixed content (http resources on https page).\n- **HSTS header:** `Strict-Transport-Security: max-age=31536000; includeSubDomains; preload`\n- **Redirect HTTP → HTTPS** at edge, 301 permanent.\n- **No insecure cookies:** all cookies `Secure` + `HttpOnly` + `SameSite=Lax\u002FStrict`.\n\n### Content Security Policy (CSP)\nStart strict, expand as needed:\n```\nContent-Security-Policy: default-src 'self'; \n  script-src 'self' 'nonce-{random}'; \n  style-src 'self' 'nonce-{random}'; \n  img-src 'self' data: https:; \n  font-src 'self'; \n  connect-src 'self'; \n  frame-ancestors 'none'; \n  base-uri 'self'; \n  form-action 'self';\n```\n- **No `unsafe-inline`** in script-src unless using nonces\n- **No `unsafe-eval`** ever\n- **Submit CSP report** initially: `Content-Security-Policy-Report-Only: ...`\n\n### Other headers\n- `X-Content-Type-Options: nosniff` — prevent MIME sniffing\n- `Referrer-Policy: strict-origin-when-cross-origin`\n- `Permissions-Policy: camera=(), microphone=(), geolocation=()` — disable unused\n- `X-Frame-Options: DENY` or rely on `frame-ancestors` in CSP\n\n### Source maps & secrets\n- **No source maps in production** (`.map` files leak source)\n- **No exposed secrets** in client bundle — env vars belong on server\n- **No debug endpoints** in production builds\n\n## Modern Standards\n\n### No deprecated APIs\n| Deprecated | Use instead |\n|------------|-------------|\n| `document.write` | `appendChild`, `insertAdjacentHTML` |\n| Synchronous XHR | `fetch` with `await` |\n| `var` | `const` \u002F `let` |\n| `new Date()` for parsing | `Temporal` (or `Date` carefully) |\n| `alert` \u002F `confirm` \u002F `prompt` | Custom modal UI |\n| `Application Cache` | Service Workers |\n| `User-Agent` sniffing | Feature detection |\n| `\u003Cframe>`, `\u003Cframeset>` | `\u003Ciframe>` (or none) |\n\n### Document basics\n- **Valid doctype:** `\u003C!DOCTYPE html>` (always first line)\n- **Charset first in head:** `\u003Cmeta charset=\"UTF-8\">`\n- **Viewport:** `\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">`\n- **Title:** unique, descriptive, 50-60 chars\n- **Lang attribute:** `\u003Chtml lang=\"en\">` (or relevant locale)\n\n### Modern APIs to prefer\n- `fetch` over XHR\n- `localStorage` \u002F `IndexedDB` \u002F `Cache API` (not cookies for app state)\n- `IntersectionObserver` over scroll listeners\n- `ResizeObserver` for responsive components\n- `requestAnimationFrame` for animations (not setInterval)\n- `URL` \u002F `URLSearchParams` for URL parsing (not regex)\n- `structuredClone` for deep copy (not JSON.parse(JSON.stringify(x)))\n- `AbortController` for cancellable fetches\n\n## Error Handling\n\n### Global handlers (with reporting)\n```javascript\nwindow.addEventListener('error', e => report(e));\nwindow.addEventListener('unhandledrejection', e => report(e.reason));\n```\n- Log to real endpoint, not `console.error` only\n- Include stack, user-agent, route, but **no PII**\n\n### Async errors\n```javascript\n\u002F\u002F Bad: silent\nfetch(url).then(r => r.json());\n\n\u002F\u002F Good: handled\ntry {\n  const r = await fetch(url);\n  if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);\n  return await r.json();\n} catch (e) {\n  report(e);\n  throw e;  \u002F\u002F let caller decide\n}\n```\n\n### User-facing\n- **Show, don't just log.** \"Couldn't load — try again\" beats blank screen.\n- **Don't expose internals** to users (stack traces, error codes).\n- **Preserve user input** on failure.\n\n## Console Cleanliness\n\n- **No `console.log` in production builds** — use logger with levels\n- **No `console.error` from third-party** — wrap or filter\n- **No warnings** from deprecated APIs (fix the code)\n- **Use `console.warn` and `console.error`** sparingly and intentionally\n\n## UX Patterns\n\n### Permissions\n- **Don't ask upfront.** Wait for the user action that needs it.\n- **Provide context** before the browser prompt.\n- **Handle denial gracefully** — feature should still work degraded.\n- **Never `Notification.requestPermission()`** on page load.\n\n### Interstitials\n- **No full-screen popups** especially on mobile (Google penalizes).\n- **No deceptive patterns** — buttons that look like content.\n- **Easy to dismiss** with one click or ESC.\n\n### Forms\n- **Labels always visible** (not just placeholders).\n- **Errors inline** next to the field, with `aria-describedby`.\n- **Don't block paste** in password fields.\n- **Confirm destructive actions** with undo, not just OK.\n\n### Loading states\n- **Skeleton > spinner > nothing** for content loads.\n- **Optimistic UI** for mutations when safe.\n- **Disable button while submitting** — no double-submits.\n\n## Browser Compatibility\n\n- **Use caniuse.com** before shipping new APIs\n- **Baseline 2024+** is the safe target for greenfield projects\n- **Progressive enhancement:** feature detection, fallbacks for critical paths\n- **Avoid user-agent sniffing** entirely\n\n## Quick Audit Checklist\n\n```markdown\n### Security\n- [ ] HTTPS only, HSTS, no mixed content\n- [ ] CSP header present, no unsafe-inline\n- [ ] Cookies: Secure, HttpOnly, SameSite\n- [ ] No secrets in client bundle\n- [ ] No source maps in prod\n\n### Modern Standards\n- [ ] No deprecated APIs (document.write, sync XHR, var)\n- [ ] DOCTYPE, charset, viewport correct\n- [ ] Lang attribute set\n\n### Code Quality\n- [ ] No console errors or warnings\n- [ ] Global error handlers report to backend\n- [ ] No try\u002Fcatch that swallows\n\n### UX\n- [ ] Permissions requested on action, not on load\n- [ ] No intrusive interstitials on mobile\n- [ ] Forms have visible labels, inline errors\n```\n\n## Related Skills\n\n- `web-quality-audit` — full-site audit orchestrator\n- `web-performance` — performance-specific best practices\n- `accessibility-auditor` — a11y-specific patterns\n","## When to Use\n\n- Pre-launch code quality review\n- Security audit (frontend-side)\n- Modernizing legacy code (deprecated APIs)\n- Browser compatibility checks\n- Console error \u002F warning cleanup\n- Reviewing UX patterns (interstitials, permissions, etc.)\n\n## Security\n\n### HTTPS & HSTS\n- **HTTPS everywhere.** No mixed content (http resources on https page).\n- **HSTS header:** `Strict-Transport-Security: max-age=31536000; includeSubDomains; preload`\n- **Redirect HTTP → HTTPS** at edge, 301 permanent.\n- **No insecure cookies:** all cookies `Secure` + `HttpOnly` + `SameSite=Lax\u002FStrict`.\n\n### Content Security Policy (CSP)\nStart strict, expand as needed:\n```\nContent-Security-Policy: default-src 'self'; \n  script-src 'self' 'nonce-{random}'; \n  style-src 'self' 'nonce-{random}'; \n  img-src 'self' data: https:; \n  font-src 'self'; \n  connect-src 'self'; \n  frame-ancestors 'none'; \n  base-uri 'self'; \n  form-action 'self';\n```\n- **No `unsafe-inline`** in script-src unless using nonces\n- **No `unsafe-eval`** ever\n- **Submit CSP report** initially: `Content-Security-Policy-Report-Only: ...`\n\n### Other headers\n- `X-Content-Type-Options: nosniff` — prevent MIME sniffing\n- `Referrer-Policy: strict-origin-when-cross-origin`\n- `Permissions-Policy: camera=(), microphone=(), geolocation=()` — disable unused\n- `X-Frame-Options: DENY` or rely on `frame-ancestors` in CSP\n\n### Source maps & secrets\n- **No source maps in production** (`.map` files leak source)\n- **No exposed secrets** in client bundle — env vars belong on server\n- **No debug endpoints** in production builds\n\n## Modern Standards\n\n### No deprecated APIs\n| Deprecated | Use instead |\n|------------|-------------|\n| `document.write` | `appendChild`, `insertAdjacentHTML` |\n| Synchronous XHR | `fetch` with `await` |\n| `var` | `const` \u002F `let` |\n| `new Date()` for parsing | `Temporal` (or `Date` carefully) |\n| `alert` \u002F `confirm` \u002F `prompt` | Custom modal UI |\n| `Application Cache` | Service Workers |\n| `User-Agent` sniffing | Feature detection |\n| `\u003Cframe>`, `\u003Cframeset>` | `\u003Ciframe>` (or none) |\n\n### Document basics\n- **Valid doctype:** `\u003C!DOCTYPE html>` (always first line)\n- **Charset first in head:** `\u003Cmeta charset=\"UTF-8\">`\n- **Viewport:** `\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">`\n- **Title:** unique, descriptive, 50-60 chars\n- **Lang attribute:** `\u003Chtml lang=\"en\">` (or relevant locale)\n\n### Modern APIs to prefer\n- `fetch` over XHR\n- `localStorage` \u002F `IndexedDB` \u002F `Cache API` (not cookies for app state)\n- `IntersectionObserver` over scroll listeners\n- `ResizeObserver` for responsive components\n- `requestAnimationFrame` for animations (not setInterval)\n- `URL` \u002F `URLSearchParams` for URL parsing (not regex)\n- `structuredClone` for deep copy (not JSON.parse(JSON.stringify(x)))\n- `AbortController` for cancellable fetches\n\n## Error Handling\n\n### Global handlers (with reporting)\n```javascript\nwindow.addEventListener('error', e => report(e));\nwindow.addEventListener('unhandledrejection', e => report(e.reason));\n```\n- Log to real endpoint, not `console.error` only\n- Include stack, user-agent, route, but **no PII**\n\n### Async errors\n```javascript\n\u002F\u002F Bad: silent\nfetch(url).then(r => r.json());\n\n\u002F\u002F Good: handled\ntry {\n  const r = await fetch(url);\n  if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);\n  return await r.json();\n} catch (e) {\n  report(e);\n  throw e;  \u002F\u002F let caller decide\n}\n```\n\n### User-facing\n- **Show, don't just log.** \"Couldn't load — try again\" beats blank screen.\n- **Don't expose internals** to users (stack traces, error codes).\n- **Preserve user input** on failure.\n\n## Console Cleanliness\n\n- **No `console.log` in production builds** — use logger with levels\n- **No `console.error` from third-party** — wrap or filter\n- **No warnings** from deprecated APIs (fix the code)\n- **Use `console.warn` and `console.error`** sparingly and intentionally\n\n## UX Patterns\n\n### Permissions\n- **Don't ask upfront.** Wait for the user action that needs it.\n- **Provide context** before the browser prompt.\n- **Handle denial gracefully** — feature should still work degraded.\n- **Never `Notification.requestPermission()`** on page load.\n\n### Interstitials\n- **No full-screen popups** especially on mobile (Google penalizes).\n- **No deceptive patterns** — buttons that look like content.\n- **Easy to dismiss** with one click or ESC.\n\n### Forms\n- **Labels always visible** (not just placeholders).\n- **Errors inline** next to the field, with `aria-describedby`.\n- **Don't block paste** in password fields.\n- **Confirm destructive actions** with undo, not just OK.\n\n### Loading states\n- **Skeleton > spinner > nothing** for content loads.\n- **Optimistic UI** for mutations when safe.\n- **Disable button while submitting** — no double-submits.\n\n## Browser Compatibility\n\n- **Use caniuse.com** before shipping new APIs\n- **Baseline 2024+** is the safe target for greenfield projects\n- **Progressive enhancement:** feature detection, fallbacks for critical paths\n- **Avoid user-agent sniffing** entirely\n\n## Quick Audit Checklist\n\n```markdown\n### Security\n- [ ] HTTPS only, HSTS, no mixed content\n- [ ] CSP header present, no unsafe-inline\n- [ ] Cookies: Secure, HttpOnly, SameSite\n- [ ] No secrets in client bundle\n- [ ] No source maps in prod\n\n### Modern Standards\n- [ ] No deprecated APIs (document.write, sync XHR, var)\n- [ ] DOCTYPE, charset, viewport correct\n- [ ] Lang attribute set\n\n### Code Quality\n- [ ] No console errors or warnings\n- [ ] Global error handlers report to backend\n- [ ] No try\u002Fcatch that swallows\n\n### UX\n- [ ] Permissions requested on action, not on load\n- [ ] No intrusive interstitials on mobile\n- [ ] Forms have visible labels, inline errors\n```\n\n## Related Skills\n\n- `web-quality-audit` — full-site audit orchestrator\n- `web-performance` — performance-specific best practices\n- `accessibility-auditor` — a11y-specific patterns\n",{"name":5,"license":15,"metadata":24,"description":27},{"author":25,"version":26},"gentleman-programming","1.0","Modern web development standards: security (HTTPS, HSTS, CSP), modern APIs, browser compatibility, error handling, console cleanliness, and UX patterns. Based on Lighthouse Best Practices category. Trigger: When applying best practices, running security audit, modernizing legacy web code, checking browser compatibility, or reviewing code quality.\n","main","5dc86f90a5cbe45db3acd917825461b3ed6937fb","config\u002F.config\u002Fopencode\u002Fskills\u002Fweb-quality-best-practices",0,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev","🌐 Apasionado por crear soluciones web escalables y eficientes. \r\n🧑‍🏫 Coach Dev.\r\n💻 Frontend Dev. \r\n🎚️Backend Dev.\r\n📊 Agile\u002FScrum.\r\n🚀100% remoto.","2026-08-26 07:28:05",{"source":8,"skillName":5,"commands":37,"prompt":47,"zipAvailable":48},[38,41,44],{"tool":39,"command":40},"npx","npx skills add davidcoachdev\u002Fdcfiles --skill web-quality-best-practices",{"tool":42,"command":43},"bunx","bunx skills add davidcoachdev\u002Fdcfiles --skill web-quality-best-practices",{"tool":45,"command":46},"pnpm","pnpm dlx skills add davidcoachdev\u002Fdcfiles --skill web-quality-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fweb-quality-best-practices\u002FSKILL.md",true,[],[51,58,65,72,80,87],{"skillNo":52,"name":53,"nameZh":6,"description":54,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":55,"categories":56,"keywords":57,"publishedAt":19},"01M7740FETMZY1VTYAEFY1TWY7","zustand-5","Zustand 5 state management patterns. Trigger: When managing React state with Zustand.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fzustand-5\u002FSKILL.md",[],[],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":19},"01M773ZZM9V68SA1AKP4WF4J29","zod-4","Zod 4 schema validation patterns. Trigger: When using Zod for validation - breaking changes from v3.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fzod-4\u002FSKILL.md",[],[],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M773ZJFR90CQAY0N9QR40QVP","x-bookmark-quote-posts","Workflow para revisar bookmarks de X\u002FTwitter y convertirlos en drafts de quote posts. Accede a la sección de bookmarks vía browser headless, extrae posts recientes, y genera drafts con voz personal del usuario. No publica ni muta X — solo genera contenido para revisión. Trigger: X bookmarks, Twitter bookmarks, quote posts, bookmark automation, crear quote posts, revisar bookmarks, growth content X.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fx-bookmark-quote-posts\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":76,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":19},"01M773Z2RGV3786FV310SDB0YD","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","MIT","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[],[],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":76,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":19},"01M773YJH3KDSW467CSS63CSRJ","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fwriting-plans\u002FSKILL.md",[],[],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":19},"01M773Y3S3H2CPRK5S8YFHWB5C","work-unit-commits","Plan commits as reviewable work units. Trigger: implementation, commit splitting, chained PRs, or keeping tests and docs with code.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fwork-unit-commits\u002FSKILL.md",[],[]]