# Adom Wiki Hero Image

**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 header, the landing grid card, the Hydrogen
Desktop installer, the wiki homepage, and the [adom-screensaver](/adom/adom-screensaver) all reuse
as a promotional billboard.

A hero is **not a screenshot and not a brochure** — it's a billboard. Picture it at highway speed:
the viewer gets about **one second**. So it must read instantly: the **app name**, **what it does**,
and **one gorgeous shot** of the real UI in a floating, drop-shadowed, Windows-style webview window.
That's the whole job.

## Why this skill exists

Without guidance, AI just **shoves a boring screenshot into the hero** — and every wiki page ends up
looking the same. This skill flips the mindset to *"convey this app's **value proposition** in one
clean image."* It gives Adom employees and third parties enough design guardrails that their hero is:

- **Beautiful & on-brand** — consistent type, color, and layout, drawn from the Kickstand brand guide.
- **Unique to their app** — picked layout × theme, a real screenshot, the headline, and a brand
  mark/chip make each hero distinct, so the wiki is a gallery, not a wall of clones.

## Where these heroes run (so design them like ad creative)

The same image is reused, unchanged, as a billboard across many surfaces — so it has to stand alone:

- the wiki **page header** + landing **grid card**;
- the **wiki homepage** daily **trending-apps slideshow**;
- the **[adom-screensaver](/adom/adom-screensaver)** — auto-discovers public `hero.png`s and cross-fades
  them, so your hero literally runs as an **ad** on idle screens;
- the **Hydrogen Desktop installer** setup steps;
- and increasingly **YouTube / TikTok / Instagram / X.com** posts.

## Examples — heroes made with this recipe

This is the consolidated recipe behind the whole Adom app-page family. Same skill, same brand
system, instantly distinct per app:

![Adom Parts Search hero](/blob/app/adom-parts-search/screenshots/hero.png)
*Tagline-led headline + category chip — the real `ui.html` populated with example MPNs.*

![Adom Mouser hero](/blob/app/adom-mouser/screenshots/hero.png)
*Brand-mark variant — the vendor wordmark recreated as a transparent, brightened-for-dark SVG.*

## Pick a look & feel — two axes, layout × theme

When you run this skill it **asks you** (via Claude's `AskUserQuestion`) to choose a **layout** and a
**theme** — they compose, so the same recipe makes a hero that's distinctly yours. Everything is drawn
from the Kickstand brand guide + tiling textures, all bundled with the skill.

**Themes** — background + Kickstand texture:

![Midnight theme](/blob/skill/adom-wiki-hero-image/variants/hero-midnight.png)
***Midnight** (default) — near-black + faint dot-grid. Neutral; lets the UI pop.*

![PCB Traces theme](/blob/skill/adom-wiki-hero-image/variants/hero-pcb.png)
***PCB Traces** — deep brand teal + the Kickstand `pcb-trace` circuit field. Electronic/ethereal.*

![Onion theme](/blob/skill/adom-wiki-hero-image/variants/hero-onion.png)
***Onion** — navy + the signature concentric-arc motif (the deck "substance" slide).*

![Gradient theme](/blob/skill/adom-wiki-hero-image/variants/hero-gradient.png)
***Gradient (wow)** — the brand teal→blue→purple cover-slide gradient. For flagship/launch heroes.*

**Layouts** — window treatment:

![Bleed right layout](/blob/skill/adom-wiki-hero-image/variants/hero-bleed-right.png)
***Bleed right** — the window runs off the right edge as a tall panel.*

![Contained layout](/blob/skill/adom-wiki-hero-image/variants/hero-contained.png)
***Contained** — the whole window framed inside, margins top/right/bottom.*

![Mirror layout](/blob/skill/adom-wiki-hero-image/variants/hero-mirror.png)
***Mirror** — name/value-prop on the right, window on the left.*

*Mix any layout with any theme — e.g. Bleed-right × PCB, Contained × Gradient.*
Deck principle from Kickstand: **gradient = emotional · solids = substance**.

## Install

```bash
adompkg install adom-wiki-hero-image
```

Installs the `adom-wiki-hero-image` skill to `~/.claude/skills/`, **bundled with its own brand fonts,
the ADOM wordmark, the render pipeline (`render.js`), and the fill-in-the-blanks `hero.html`
template** — so it works with zero `gallia` dependency. Then just ask Claude.

## Quick Start

Render any filled `hero.html` to a crisp 2× PNG, then downscale to the 2000×1250 deliverable:

```bash
CHROME=$(ls -d ~/.cache/puppeteer/chrome/linux-*/chrome-linux64/chrome | head -1)
CHROME=$CHROME node render.js hero.html 1600 1000 /tmp/hero@2x.png 2
convert /tmp/hero@2x.png -resize 2000x screenshots/hero.png
```

Set the hero in your page's `page.json` (NOT inline in the README):

```json
"hero": { "type": "image", "path": "screenshots/hero.png" }
```

## Features

- **One-second read** — app name + value prop + one screenshot. No collages, ever.
- **On-brand by construction** — the Adom dark gradient, the teal→blue→purple headline accent,
  Familjen Grotesk + Satoshi (bundled), the ADOM wordmark.
- **Floating Windows-style webview window** — min/max/close top-right (never macOS traffic lights),
  high-right, drop shadow + teal glow, bleeding off the bottom.
- **Real UI, good data** — renders the app's own `ui.html` with a realistic dataset; no dead
  mockups.
- **Two proven headline patterns** — name-led, or tagline-led with a brand mark / category chip.
- **Deterministic in-container render** — Puppeteer + cached Chrome, external requests aborted,
  fonts/assets inlined. No desktop, no live backend, no flaky CDN fetches.
- **Self-contained** — bundles fonts + wordmark so an installed copy never reaches into gallia.
- **Publish-ready** — the exact `page.json` hero field, versioned-filename CDN tactic, and the
  anon-verify steps, all documented.

## Dependencies

This skill has **zero `adompkg` dependencies** — it deliberately vendors everything it needs so an
installed copy is self-contained.

| Dependency | Required? | Why |
|---|---|---|
| _(none, adompkg)_ | — | Brand fonts + ADOM wordmark are bundled in `assets/`; nothing to install. |
| Puppeteer-managed Chrome | Render-time | Headless render of the hero HTML (the system `chromium-browser` snap stub is dead; use `~/.cache/puppeteer/chrome/*`). |
| ImageMagick (`convert`) | Render-time | Downscale the 2× render to the 2000×1250 deliverable. |

## Talk to the AI

**Make / redo a hero**
- "make a hero for my app"
- "make a billboard hero for this wiki page"
- "redo my hero, it looks too busy"
- "render `screenshots/hero.png` following adom-wiki-hero-image and set `page.json`"

**See it**
- "make a hero image and show it to me in pup"

**Publish it**
- "publish my hero — set `page.json`, versioned filename, and verify it anon"

Use these words and Claude routes to this skill.

## Skills

| Skill | Purpose |
|---|---|
| **adom-wiki-hero-image** | The full recipe: layout, brand tokens, render pipeline, the HTML/CSS template, how to get the real product screenshot, and the publish + QA checklist. |

## How it works (the short version)

1. **Layout** — two columns: text left (80–92px margin, ~520px wide), the app window high-right with
   a ≥~90px gutter. URL lower-left, ADOM mark top-left, chip/brand-mark top-right.
2. **Screenshot** — render the app's own `ui.html` with realistic data (or frame a GUI/CLI window).
3. **Render** — fill `hero.html`, run `render.js` at 1600×1000 @2×, downscale to 2000×1250.
4. **Publish** — push the PNG, point `page.json.hero` at it, verify the anon image 200 + that the
   rendered page references it.

See [SKILL.md](/blob/skill/adom-wiki-hero-image/skills/adom-wiki-hero-image/SKILL.md) for the full,
copy-paste-ready recipe with all the hard-won rules.