# Phone Trio Hero

> The top of a landing page for a mobile app, with three phones that show three different screens of it. The phones are drawn in HTML and CSS, with metal frames, an island, side keys and glass glare but no maker's marks, and the screens inside are real interface built from your app's words and numbers: headers, big figures that count up, area and bar charts that draw themselves, donut rings, goals, rows, photo cards and a small route map. Or drop in your own screenshots. The centre phone rises, the other two fan out from behind it, each screen lights up and fills, and each feature callout arrives in a lane beside the phones with a line that lands on one detail inside its screen: the route pin, the lit bar, the goal's bar. Pick a signature per page: callouts as paper luggage tags on dashed route lines, or the centre screen's balance carried on behind the phones as a page-sized figure on the same baseline. Move the pointer and the phones turn towards it and fan wider; the centre screen scrolls its own content under a blurred header that folds its large title into a small one, as iOS does. On a phone it becomes one phone you swipe between the three screens. Your agent writes one page.json; the build checks every length and writes one HTML file, and the check measures text, contrast and overlaps at five sizes, fails any callout that covers a screen, and fails a laptop view where the phones run off the first screen.

- Output: Video, App landing hero · three HTML/CSS phones with real app screens · callouts tied to the screens, page-sized figure · swipe on phones · 1080p video
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/phone-trio-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge for the check and the video (found automatically; set `CHROME_PATH` otherwise).
- ffmpeg, only for the video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add phone-trio-hero
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/phone-trio-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/phone-trio-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/phone-trio-hero` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Make the hero for our app with Phone Trio Hero: our colours and fonts, the home screen with the balance chart in the middle, spending on the left, goals on the right, and a callout for each.