# Shop Collection

> A collection page for a small brand, built from one page.json. Every product sits on a numbered plate with its price, currency and one honest stock line, and turns over on hover, focus or tap to show the reverse of the piece: the raw foot and maker's stamp of a bowl, the hallmark inside a band. Filter chips and sort re-lay the grid with a FLIP glide, so nothing jumps and plate numbers never change. An editorial band interrupts the grid, a quick-view sheet carries options and stock per option, and Add to bag becomes a bag slip. Phones get a 2-up grid, a sticky chip bar, a filter sheet and bottom sheets. With no photos yet, a three.js renderer makes true-scale stills of ceramics and jewellery from the same config.

- Output: Web, Collection page kit · page.json in, page and embed out · optional true-scale three.js product stills
- Price: Free
- Page: https://lookbk.dev/skills/shop-collection-kit

## What you need

- Node.js 18 or newer. Chrome, Chromium or Edge for the check, the recorder and the still renderer (set `CHROME_PATH` if it is somewhere unusual), and ffmpeg for the video.
- From the person: their products (name, category, price, size, options, stock as it really is), a point of view for the collection, and **photographs**: for every product and option a front photo and a photo of its reverse, ideally all shot on one seamless background with one light, at 4:5 (1600×2000 or 960×1200), as WebP.
- If they have no photographs yet and the products are thrown ceramics or simple jewellery, the still renderer can make true-scale stills from the config (see step 3). Say plainly that these are computer graphics, not photographs.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add shop-collection-kit
```

The first run prints a sign-in link; open it, approve, and run the command again.

Where it installs:

- Run by Claude Code: `~/.claude/skills/shop-collection-kit` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/shop-collection-kit`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/shop-collection-kit` 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

> Build a collection page for a small independent shop from page.json: numbered product plates that turn over to show the back of each piece, filters with a FLIP glide, a quick view with per-option stock and a bag slip, and true-scale product stills if there are no photos yet.