Adom Wiki Skill Pack

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>__MPN__, Adom component</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
@font-face{font-family:'Familjen Grotesk';font-weight:500;font-display:swap;src:url(data:font/woff2;base64,__FAM5__) format('woff2')}
@font-face{font-family:'Familjen Grotesk';font-weight:700;font-display:swap;src:url(data:font/woff2;base64,__FAM7__) format('woff2')}
@font-face{font-family:'Satoshi';font-weight:400;font-display:swap;src:url(data:font/woff2;base64,__SAT4__) format('woff2')}
@font-face{font-family:'Satoshi';font-weight:500;font-display:swap;src:url(data:font/woff2;base64,__SAT5__) format('woff2')}
@font-face{font-family:'Satoshi';font-weight:700;font-display:swap;src:url(data:font/woff2;base64,__SAT7__) format('woff2')}
:root{--bg:#0d1117;--surface:#161b22;--elevated:#1c2128;--overlay:#21262d;--border:#30363d;--text:#e6edf3;--text-2:#8b949e;--text-3:#484f58;--accent:#00b8b0;--accent-bright:#00e6dc;--purple:#8c6bf7;--blue:#58a6ff;--green:#3fb950;--red:#f85149;--yellow:#d29922}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Satoshi',sans-serif;color:var(--text);background:var(--bg);line-height:1.5;padding-bottom:80px}
h1,h2,h3{font-family:'Familjen Grotesk',sans-serif}.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.hdr{height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.hdr .brand{display:flex;align-items:center;gap:8px;color:var(--accent);font-family:'Familjen Grotesk';font-weight:600;font-size:14px}
.hdr .brand .sub{color:var(--text-2);font-weight:500}.hdr .vsep{width:1px;height:22px;background:var(--border)}
.hdr .nm{font-family:'Familjen Grotesk';font-weight:600;font-size:14px}.hdr .meta{font-family:'JetBrains Mono';font-size:11.5px;color:var(--text-2)}
.hdr .actions{margin-left:auto;display:flex;gap:6px}.hdr .actions a{display:flex;color:var(--text-2);padding:4px;border-radius:8px}.hdr .actions a:hover{color:var(--text);background:var(--elevated)}
@media(max-width:720px){.hdr .meta{display:none}}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.intro{padding:16px 0 4px}h1{font-size:36px;letter-spacing:-1.1px;margin:6px 0 2px}
.lead{color:var(--text-2);font-size:16px;max-width:800px}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600}
.b-type{border:1px solid var(--border);color:var(--purple);background:rgba(140,107,247,.08)}.b-cls{border:1px solid rgba(0,184,176,.5);color:#7fe3dd;background:rgba(0,184,176,.10)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--text-2);margin:10px 0 0;flex-wrap:wrap}.dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:5px;vertical-align:middle}
.src{font-size:11px;color:var(--text-3)}.src.real{color:#6fbf8f}.src.mock{color:#e0a06a}
.todo{display:inline-flex;align-items:center;gap:4px;background:rgba(210,153,34,.15);border:1px solid rgba(210,153,34,.5);color:#e3b765;border-radius:8px;padding:1px 8px;font-size:11px;font-weight:600;margin-left:6px}
.hero{margin:14px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}.hero img{display:block;width:100%}
.toolbar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 16px;margin:16px 0}
.toolbar h3{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-2);margin:0 0 8px;display:flex;align-items:center;gap:7px}
.ctxrow{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}.ctx{font-size:12.5px;color:var(--text-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;background:var(--elevated)}.ctx b{color:var(--accent)}
.lbl{font-size:12px;color:var(--text-3);margin:10px 0 5px;font-weight:600}
.btns{display:flex;flex-wrap:wrap;gap:7px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--elevated);color:var(--text);user-select:none}
.btn:hover{border-color:var(--accent);color:var(--accent-bright)}.btn.go{border-color:rgba(0,184,176,.5);color:#7fe3dd;background:rgba(0,184,176,.10)}.btn.buy{color:#e8c578}.btn.dis{opacity:.4;cursor:not-allowed}
.tabs{position:sticky;top:44px;z-index:15;display:flex;gap:4px;flex-wrap:wrap;background:rgba(13,17,23,.95);backdrop-filter:blur(7px);border-bottom:1px solid var(--border);padding:9px 0;margin-top:10px}
.tab{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);padding:6px 11px;border-radius:8px;cursor:pointer;border:1px solid transparent;user-select:none}.tab:hover{color:var(--text)}.tab.on{color:var(--accent);border-color:var(--border);background:rgba(0,184,176,.08)}
.tabpanel{display:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:14px 0}.tabpanel.on{display:block}
.tabpanel h2{font-size:21px;margin-bottom:10px;display:flex;align-items:center;gap:9px}.tabpanel h2 svg{color:var(--accent)}
.viewer{width:100%;height:440px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.render{width:100%;border-radius:8px;border:1px solid var(--border);background:#fff;overflow:hidden}.render svg{display:block;width:100%;height:auto}
.viewer-cap{display:flex;gap:7px;font-size:12px;color:var(--text-2);margin:6px 0;align-items:center}.viewer-cap .live{display:inline-flex;align-items:center;gap:5px;color:#7ee2a0}.viewer-cap .live::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 6px var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:720px){.grid2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0}th,td{border-top:1px solid var(--border);padding:7px 9px;text-align:left;vertical-align:top}th{color:var(--text-2);font-weight:600}.k{font-family:'JetBrains Mono';color:#7fe3dd;font-size:12.5px}.ev{white-space:nowrap}.evlink{color:var(--accent);cursor:pointer;font-family:'JetBrains Mono';font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.dlcard{border:1px solid var(--border);border-radius:8px;padding:11px;background:var(--elevated)}.dlcard .n{font-family:'JetBrains Mono';font-size:12px}.dlcard .d{font-size:11.5px;color:var(--text-3);margin-top:3px}
.todonote{display:flex;gap:9px;background:rgba(210,153,34,.07);border:1px solid rgba(210,153,34,.35);border-radius:8px;color:#e3c089;padding:10px 13px;font-size:13px;margin:10px 0}.todonote svg{color:var(--yellow);flex:none}
.ctxrow2{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.provimg{width:100%;border:1px solid var(--border);border-radius:8px;cursor:zoom-in;background:#fff}
.cite{font-size:11.5px;color:var(--text-2);border-top:1px dashed var(--border);margin-top:10px;padding-top:8px}.cite b{color:var(--text)}
#lb{position:fixed;inset:0;background:rgba(2,6,10,.94);z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;padding:18px}#lb.on{display:flex}#lb img{max-width:100%;max-height:86vh;border-radius:8px;border:1px solid var(--border)}#lb .cap{color:var(--text-2);font-size:13px;margin-top:10px}#lb .x{position:absolute;top:14px;right:18px;color:#fff;font-size:26px;cursor:pointer}
#tip{position:fixed;z-index:99999;background:var(--overlay);border:1px solid var(--border);color:var(--text);font-size:12.5px;padding:6px 9px;border-radius:8px;max-width:240px;pointer-events:none;opacity:0;transition:.18s}#tip.on{opacity:1}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--overlay);border:1px solid var(--accent);color:#cfeee9;padding:11px 16px;border-radius:8px;font-size:14px;opacity:0;transition:.25s;z-index:60;display:flex;gap:9px;max-width:90vw}.toast.on{opacity:1;transform:translateX(-50%)}
ul.r{color:var(--text-2);font-size:14px;padding-left:18px}ul.r li{margin:3px 0}
.foot{color:var(--text-3);font-size:12.5px;text-align:center;margin-top:26px}
</style></head><body>
<div class="hdr"><div class="brand">__IC_CHIP__ Adom Wiki <span class="sub">. Component</span></div><div class="vsep"></div>
<span class="nm">__MPN__</span><span class="meta">__PKG__</span>
<div class="actions"><a href="__WIKIURL__" target="_blank" data-tip="Open the live wiki page">__IC_OPEN__</a></div></div>
<div class="wrap">
<div class="intro"><div style="display:flex;gap:9px;align-items:center;flex-wrap:wrap"><span class="badge b-type">COMPONENT</span><span class="badge b-cls">__CLS__</span><span class="src" style="margin-left:auto">data-driven from chip-fetcher</span></div>
<h1>__MPN__</h1><p class="lead"><b>__MFR__.</b> __DESC__</p>
<div class="legend"><span><span class="dot" style="background:#6fbf8f"></span>real data (chip-fetcher / ds2sf)</span><span><span class="dot" style="background:#e0a06a"></span>mock / not fetched</span><span class="todo">__IC_WARN__ TODO</span></div></div>

__HERO__

<div class="toolbar"><h3>__IC_OPEN__ Open this chip in</h3>
<div class="ctxrow"><span class="ctx">Context: <b>Hydrogen webview</b></span><span class="src mock">mock detector</span><span class="todo">__IC_WARN__ TODO: runtime context detect (HD / native / pup)</span></div>
<div class="lbl">Open directly, any browser / Hydrogen / pup __DIRECTSRC__</div><div class="btns">__DIRECTBTNS__</div>
<div class="lbl">Download CAD <span class="src real">real files</span></div><div class="btns">__DLBTNS__</div>
<div class="lbl">Buy</div><div class="btns">__BUYBTNS__</div>
<div class="lbl">Open in a container tool, tap to copy a Claude prompt</div><div class="btns">
<span class="btn" data-tip="Open the symbol in adom-symbol (SymView)" onclick="cp('open the __MPN__ symbol in adom-symbol')">adom-symbol</span>
<span class="btn" data-tip="Open the footprint in adom-footprint (FpView)" onclick="cp('open the __MPN__ footprint in adom-footprint')">adom-footprint</span>
<span class="btn" data-tip="Generate a Fusion .lbr" onclick="cp('generate a Fusion .lbr for the __MPN__ with adom-lbr')">adom-lbr</span>
<span class="btn" data-tip="Basic 3D viewer" onclick="cp('view the __MPN__ in adom-step')">adom-step</span>
<span class="btn" data-tip="Chip-on-pads fit + pin-1" onclick="cp('check the __MPN__ fit in adom-chipfit')">adom-chipfit</span>
<span class="btn" data-tip="STEP-native validation" onclick="cp('validate the __MPN__ in adom-chipsmith')">adom-chipsmith</span>
<span class="btn" data-tip="Open in chip-fetcher" onclick="cp('open the __MPN__ in chip-fetcher')">chip-fetcher</span>
<span class="btn" data-tip="Render via the shared headless KiCad service" onclick="cp('render the __MPN__ with service-kicad')">Adom KiCad viewer</span></div>
<div class="lbl">Open on your desktop, via adom-desktop</div><div class="btns">
<span class="btn" data-tip="Open in KiCad on your laptop" onclick="cp('open the __MPN__ in KiCad on my desktop')">KiCad __IC_OPEN14__</span>
<span class="btn" data-tip="Open in Fusion 360 on your laptop" onclick="cp('open the __MPN__ in Fusion 360 on my desktop')">Fusion 360 __IC_OPEN14__</span>
<span class="btn dis" data-tip="No adom-desktop verb yet">Altium</span><span class="btn dis" data-tip="No adom-desktop verb yet">OrCAD</span>
<span class="btn" data-tip="Send the library to Downloads and open the folder" onclick="cp('send the __MPN__ library to my Downloads folder and open it')">Send to Downloads</span>
<span class="btn dis" data-tip="Component Ocean is a distributor, not an Adom tool">Component Ocean</span></div>
<div class="todonote">__IC_WARN__<div><b>TODO, make this one-click.</b> No page to desktop bridge yet (and the wiki strips page JS), so tool / desktop buttons copy a paste-into-Claude prompt. Needs an injected window.adomDesktop bridge, context detection, endpoint enumeration, a reveal-folder verb, and Altium / OrCAD verbs.</div></div></div>

<div class="tabs" id="tabs">
<span class="tab on" data-t="symbol" onclick="T('symbol')">__IC_SYM__ Symbol</span><span class="tab" data-t="fp" onclick="T('fp')">__IC_FP__ Footprint</span><span class="tab" data-t="d3" onclick="T('d3')">__IC_CUBE__ 3D</span><span class="tab" data-t="pins" onclick="T('pins')">__IC_GRID__ Pins</span><span class="tab" data-t="specs" onclick="T('specs')">__IC_LIST__ Specs</span><span class="tab" data-t="src" onclick="T('src')">__IC_DOLLAR__ Sourcing</span><span class="tab" data-t="tr" onclick="T('tr')">__IC_BOX__ Tape and reel</span><span class="tab" data-t="res" onclick="T('res')">__IC_BUILD__ Resources</span><span class="tab" data-t="var" onclick="T('var')">__IC_LAYERS__ Variants</span><span class="tab" data-t="rel" onclick="T('rel')">__IC_LINK__ Related</span><span class="tab" data-t="prov" onclick="T('prov')">__IC_SHIELD__ Provenance</span><span class="tab" data-t="dl" onclick="T('dl')">__IC_DL__ Downloads</span>
</div>

<div class="tabpanel on" id="symbol"><h2>__IC_SYM__ Schematic Symbol</h2>__SYMVIEW__</div>
<div class="tabpanel" id="fp"><h2>__IC_FP__ Footprint and solder paste</h2>__FPVIEW__
<div class="grid2" style="margin-top:12px"><div><p style="font-weight:600;font-family:'Familjen Grotesk'">Solder paste</p><p style="color:var(--text-2);font-size:13.5px">Fine-pitch packages get paste as a micro-dot aperture array (not full pads) to cut bridging. Default lead-free (SAC305); leaded selectable. Toggle the Solder blobs layer in the viewer.</p><div class="btns" style="margin-top:8px"><span class="btn" data-tip="Preview leaded" onclick="cp('preview leaded paste for __MPN__')">Leaded</span><span class="btn go">Lead-free</span></div></div><div class="todonote">__IC_WARN__<div><b>TODO:</b> leaded vs lead-free switch + bridging-risk heatmap in FpView. Report bridging in Discussions.</div></div></div></div>
<div class="tabpanel" id="d3"><h2>__IC_CUBE__ 3D Model</h2>__3DVIEW__</div>
<div class="tabpanel" id="pins"><h2>__IC_GRID__ Pin map <span class="src real" style="font-size:12px;font-weight:400">__PINCOUNT__ pins, ds2sf extracted</span></h2><table><tr><th>Name</th><th>No.</th><th>Description</th><th class="ev">Cite</th></tr>__PINS__</table><div class="cite"><b>Pinout source:</b> ds2sf extraction. Click a page number to see the cited datasheet page.</div></div>
<div class="tabpanel" id="specs"><h2>__IC_LIST__ Specifications <span class="src real" style="font-size:12px;font-weight:400">class-aware (__CLS__)</span></h2><table>__SPECS__</table><div class="cite"><b>Source:</b> info.json + datasheet. Parsed fields are best-effort; full parametric pull is a TODO.</div></div>
<div class="tabpanel" id="src"><h2>__IC_DOLLAR__ Sourcing and availability</h2>__SRC__</div>
<div class="tabpanel" id="tr"><h2>__IC_BOX__ Tape and reel, pick and place</h2><ul class="r"><li>__REELNOTE__ <span class="src real">from MPN suffix</span></li><li>EIA-481 carrier; pocket referenced to sprocket holes (4.0 mm feed pitch); pin 1 conventionally Quadrant 1. <span class="todo">__IC_WARN__ TODO: embed the manufacturer tape-and-reel drawing + reel qty</span></li><li>MSL (moisture sensitivity) 1 to 6, state floor life. <span class="src mock">confirm per part</span></li><li>Pin-1 / zero orientation: IPC-7351 puts pin 1 top-left; IEC 61188-7 bottom-left. The footprint marks pin 1 with a square pad. Validate with adom-chipfit.</li></ul></div>
<div class="tabpanel" id="res"><h2>__IC_BUILD__ Manufacturer and resources <span class="src real" style="font-size:12px;font-weight:400">__MFR__</span></h2>__RESOURCES__</div>
<div class="tabpanel" id="var"><h2>__IC_LAYERS__ Variants</h2>__VARIANTS__</div>
<div class="tabpanel" id="rel"><h2>__IC_LINK__ Related</h2>__RELATED__</div>
<div class="tabpanel" id="prov"><h2>__IC_SHIELD__ Provenance</h2><div class="src" style="margin-bottom:10px">Every datapoint traces to a source. Click any citation or page to enlarge the datasheet page.</div>
<table><tr><th>Datasheet</th><td>__DSPAGES__ pages, sha256 <span class="mono">__DSSHA__</span></td></tr><tr><th>Extracted by</th><td class="mono">__TOOL__</td></tr></table>
<h3 style="font-size:15px;margin:14px 0 4px">Dimension provenance (footprint)</h3><table><tr><th>Field</th><th>Value</th><th>Figure</th><th class="ev">Cite</th></tr>__DIMS__</table>
<h3 style="font-size:15px;margin:14px 0 4px">Review flags (ds2sf honest uncertainty)</h3><ul class="r">__REVIEW__</ul>
<div class="todonote">__IC_WARN__<div>Per-pin citations are in the Pins tab. ds2sf refuses any datasheet without a pinout, so a refusal means we need a fuller PDF, not a fabricated answer.</div></div>__PROVIMGS__</div>
<div class="tabpanel" id="dl"><h2>__IC_DL__ CAD downloads <span class="src real" style="font-size:12px;font-weight:400">real files</span></h2><div class="cards">__CAD__</div><p class="src" style="margin-top:10px">CAD via Ultra Librarian / chip-fetcher; GLB by service-step2glb; .lbr by adom-lbr.</p></div>

<div class="foot">Adom Wiki, component page, data-driven from chip-fetcher. Real data + ds2sf provenance; class-aware specs; Open-in toolbar; tabs, tooltips, and citation lightbox live.</div>
</div>
<div id="lb"><span class="x" onclick="document.getElementById('lb').classList.remove('on')">&#10005;</span><img alt="source page"><div class="cap"></div></div>
<div id="tip"></div><div class="toast" id="toast"></div>
<script>
__EVJS__
function T(id){document.querySelectorAll('.tabpanel').forEach(p=>p.classList.toggle('on',p.id===id));document.querySelectorAll('.tab').forEach(t=>t.classList.toggle('on',t.dataset.t===id));var y=document.getElementById('tabs').getBoundingClientRect().top+window.scrollY-50;window.scrollTo({top:y,behavior:'smooth'})}
function LB(src,cap){var l=document.getElementById('lb');l.querySelector('img').src=src;l.querySelector('.cap').textContent=cap||'';l.classList.add('on')}
document.getElementById('lb').addEventListener('click',function(e){if(e.target.id==='lb')this.classList.remove('on')});
function cp(t){try{navigator.clipboard.writeText(t)}catch(e){}var x=document.getElementById('toast');x.textContent='Copied. Paste into Claude Code: '+t;x.classList.add('on');clearTimeout(window._t);window._t=setTimeout(()=>x.classList.remove('on'),2600)}
var tip=document.getElementById('tip'),tmr;
document.addEventListener('mouseover',e=>{var el=e.target.closest('[data-tip]');if(!el)return;clearTimeout(tmr);tmr=setTimeout(()=>{tip.textContent=el.getAttribute('data-tip');var r=el.getBoundingClientRect();tip.style.left=Math.min(r.left,innerWidth-250)+'px';tip.style.top=(r.bottom+8)+'px';tip.classList.add('on')},600)});
document.addEventListener('mouseout',e=>{if(e.target.closest('[data-tip]')){clearTimeout(tmr);tip.classList.remove('on')}});
</script></body></html>