Wiki Hero Image Skill - gallery.html

by adom

Design and render a billboard-grade hero image for any Adom wiki page — the 16:10 dark-mode image (set via page.json) that the wiki page, the landing grid, the Hydrogen Desktop installer, the homepage, and the screensaver all reuse. App name + value prop + one gorgeous shot of the real UI in a floating Windows-style webview window. Readable in one second.

Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity

Download

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<!DOCTYPE html><html><head><meta charset="utf-8"><title>adom-wiki-hero — variants</title>
<style>
html,body{margin:0;background:#06090d;color:#e6edf3;font-family:system-ui,sans-serif}
h1{font-size:20px;font-weight:700;padding:18px 22px 2px}
h2{font-size:13px;font-weight:700;color:#7fe3dd;letter-spacing:1px;text-transform:uppercase;padding:18px 22px 0}
p.s{margin:2px 22px 6px;color:#8b949e;font-size:13px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 22px 8px}
.card{background:#0d1117;border:1px solid #1f262e;border-radius:10px;overflow:hidden}
.card .lbl{display:flex;justify-content:space-between;padding:9px 13px;font-size:13px}
.card .lbl b{color:#fff}.card .lbl span{color:#7fe3dd;font-size:12px}
.card img{width:100%;display:block;border-top:1px solid #1f262e}
</style></head><body>
<h1>adom-wiki-hero — look &amp; feel variants</h1>
<p class="s">Two axes: <b>layout</b> (window treatment + text side) × <b>theme</b> (background + Kickstand texture). Same content throughout. The skill asks the author to pick each via AskUserQuestion.</p>

<h2>Themes — backgrounds &amp; Kickstand textures (layout: window bleeds bottom)</h2>
<div class="grid">
  <div class="card"><div class="lbl"><b>Midnight</b><span>near-black + dot-grid · default</span></div><img src="variants/hero-midnight.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>PCB Traces</b><span>deep teal + pcb-trace circuit field</span></div><img src="variants/hero-pcb.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Onion</b><span>navy + concentric-arc signature motif</span></div><img src="variants/hero-onion.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Pill Field</b><span>navy + pill-field texture</span></div><img src="variants/hero-pill.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Gradient (wow)</b><span>brand teal→blue→purple · cover-slide</span></div><img src="variants/hero-gradient.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Mirror</b><span>Midnight palette · text on the RIGHT</span></div><img src="variants/hero-mirror.png?cb=2"></div>
</div>

<h2>Layouts — window treatments</h2>
<div class="grid">
  <div class="card"><div class="lbl"><b>Bleed Right</b><span>window runs off the RIGHT edge · midnight</span></div><img src="variants/hero-bleed-right.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Bleed Right + PCB</b><span>right-bleed × circuit field</span></div><img src="variants/hero-bleed-right-pcb.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Contained</b><span>window framed inside · margins top/right/bottom</span></div><img src="variants/hero-contained.png?cb=2"></div>
  <div class="card"><div class="lbl"><b>Contained + Gradient</b><span>framed window × brand gradient</span></div><img src="variants/hero-contained-gradient.png?cb=2"></div>
</div>
</body></html>