用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/mazrean/wsh2026 --skill wsh-react-mount命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | wsh-react-mount |
| description | Fixing React mount timing in WSH 2026 — changing from window.load to DOMContentLoaded for earlier hydration. |
The app delays React mounting until window.load, which fires only after ALL resources (images, fonts, scripts, stylesheets) are fully loaded. This adds seconds to FCP/LCP.
Use this skill when fixing the React mount event listener.
// Before
window.addEventListener("load", () => {
createRoot(document.getElementById("app")!).render(...);
});
// After — mount immediately (script is at top of <head>)
// Option 1: DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
createRoot(document.getElementById("app")!).render(...);
});
// Option 2: defer script + immediate mount (preferred)
// In webpack HTML plugin or index.html, add defer to script tag
// Then just mount immediately:
createRoot(document.getElementById("app")!).render(...);
Impact: FCP -2-5s, LCP -2-5s, SI improvement
| Pitfall | Symptom | Fix |
|---|---|---|
| #app div not in DOM yet | null reference error | Use DOMContentLoaded or defer |
| Script loaded before DOM parsed | Mount fails | Ensure script is deferred or use DOMContentLoaded |
| Change | Visual Impact | Mitigation |
|---|---|---|
| Earlier mount | Content appears sooner | No visual change, only timing |
application/client/src/index.tsxapplication/client/src/index.html<script src="/scripts/main.js"></script> (no defer/async)<div id="app"></div> is in the body, script is in headdefer to script tag AND use DOMContentLoaded