The page this skill built from examples/wrenfold, working in your browser. Opens in a new tab. Also: .
15.6-second example rendered by this skill from examples/wrenfold · 1280×720
Example settingswhat each example above was built from
examples/wrenfoldpage.json
- Brand
- Wrenfold
examples/sornepage.json
- Brand
- SORNE
What you get
- A self-contained collection page and a paste-in embed scoped under .sck
- Numbered product plates that turn over to show the reverse, with a label and caption that name it
- Category, option, stock and sort filters that re-lay the grid with a FLIP glide
- A quick-view sheet with options, sizes, stock per option and a bag slip on Add
- A designed phone layout: 2-up grid, sticky chip bar, filter sheet and bottom sheets
- A true-scale still renderer for ceramics and jewellery, with engraved stamps and hallmarks
- Two finished examples, light ceramics and dark jewellery, with a check and a recorder
- Open-source licenses for every part it builds on
Good fit
- A potter, goldsmith or small maker who wants the collection page to feel like a printed catalogue.
- A shop whose buyers care about the back of a piece, such as a maker's stamp, a hallmark or a lining.
- A brand that sells a few dozen products with real stock and wants every state of the page designed.
Not for
- A full shop with a real cart, checkout or payments
- Marketplaces with hundreds of products and faceted search
- Sale pages with discount badges, countdowns or crossed-out prices
- Photorealistic renders of products the renderer has no model for, such as clothing or shoes
About this skill
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.
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.
How it works
Your agent
- 1
Collect the collection
Ask for, or read from their current shop: the products and their categories, prices in one currency, sizes in the words they use, the options (glazes, metals, colours) and which options are in stock, and one or two sentences in the brand's own voice about this collection.
- 2
Write page.json
Copy the example closest in spirit and replace every value.
- 3
Photographs
With real photographs (the usual case): put them in the folder
photos.dirnames (defaultphotos/next to page.json) as<id>-<option>.webp(front) and<id>-<option>-turn.webpor<id>-turn.webp(reverse), plus the editorial photo. - 4
Build
It lists every problem at once (a missing photo of a reverse, a turn without a label or caption, a caption too long for one line, low stock without a number, back soon without a date, a sale field, an option or category that doesn't exist, a colour pair under AA contrast) and writes nothing until they are fixed.
- 5
Check
It opens the page at 390, 768, 1024 and 1440 px wide, and with reduced motion at 390 and 1440, and works it: turns a plate over by hover or the turn button, changes a swatch (front and reverse must both change), filters by a category (the right plates, gliding, not jumping, numbers unchanged, the count right), by an option and by In stock, sorts by price, opens the filter sheet on narrow screens, opens the quick view, picks a choice, adds to bag (the slip must be fully in view and the bag count go up), closes it with Escape, then tabs through the page (focus must show and turn the plate it is in).
- 6
Look at it
Open the address it prints.
- 7
Record the video (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, 15.6 seconds: rests on the header, scrolls to the plates, turns one over, changes a swatch, filters to one category and back, opens the quick view, chooses and adds to bag) andout/poster.png. - 8
Hand it over
Upload
out/index.htmlwithout/photos/, or pasteout/embed.htmlwhere the collection goes on an existing page and putphotos/beside that page.
- 1
You get
- out/preview.mp4
- out/poster.png
- out/index.html
- out/embed.html
What you need
- Node.js 18 or newer. Chrome, Chromium or Edge for the check, the recorder and the still renderer (set
CHROME_PATHif 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.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
"turn: no photo of the reverse for celadon"
Every option needs its reverse; add
<id>-celadon-turn.webp, or one<id>-turn.webpfor all options if the reverse looks the same."stock.note: low stock says how many"
Write "2 left" or "Sizes 52 and 54 only", not "Selling fast".
"this kit has no sale prices, badges or countdowns"
Remove the field. If the price really changed, change
price.
What’s in the download
- SKILL.md17.8 KB
- examples/
- examples/sorne/19.1 KB2 files
- examples/wrenfold/11.6 KB2 files
- scripts/
- scripts/kit/
- scripts/kit/build.mjs30.1 KBthe fields, their limits and the cross-field rules (photos, stock words, contrast, no sale fields).
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs25.0 KB
- scripts/kit/record.mjs6.00 KB
- scripts/kit/runtime.js20.9 KBturning over, swatches, filters with FLIP, the sheets and the recorded tour, inlined into the page.
- scripts/kit/serve.mjs2.50 KB
- scripts/kit/style.css21.9 KBthe page's style, scoped under
.sck. - scripts/stills/
- scripts/stills/objects.js28.9 KBthe ceramics and jewellery models, glazes, engraved stamps and hallmarks.
- scripts/stills/render.mjs7.97 KB
- scripts/stills/shapes.js30.9 KB
- scripts/stills/studio.html480 B
- scripts/stills/studio.js38.2 KBthe studio (sweep, softboxes, shadows) and the true-scale camera.
- scripts/build.mjs147 Bchecks page.json and writes
out/index.html,out/embed.htmlandout/photos/. - scripts/check.mjs147 Bworks the page at four widths and reduced motion and lists every problem.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs149 Bthe preview video, single stills and
--moments. - scripts/serve.mjs147 Bserves
out/on localhost to look at. - scripts/stills.mjs215 Brenders true-scale product stills from the
stillsblock (skip it with real photographs). - vendor/
- vendor/LICENSE-three.txt1.06 KB
- vendor/three.min.js428 KBthree.js, bundled; its licence is next to it.
- NOTICE.md2.12 KB
- TESTED.json524 B
27 files · 703 KB · installs to ~/.claude/skills/shop-collection-kit for Claude Code and ~/.agents/skills/shop-collection-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Collection page kit · page.json in, page and embed out · optional true-scale three.js product stills
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Page Kits · 29 skills
- Updated
- Nov 8, 2026
- Checked
- Nov 8, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Do I need product photos to use it?
Not to start. If the products are thrown ceramics or simple jewellery, scripts/stills.mjs renders true-scale stills from the same page.json. Most shops replace them with their own photographs later: a front and a reverse for each option, named by product and option, dropped into the photos folder.
Why are some pieces small on their plates?
Every photograph in a collection is shot from the same distance, so a 14 mm hoop really is about half the size of a 26 mm one. A piece too small to read is brought closer, and its plate says so, for example Shown 1.1× larger.
Can it show a sale price or a discount badge?
No. The build refuses sale, compare-at, badge and countdown fields. Low stock has to say how many are left and back soon has to give a date, so every word about price and stock is something the shop can stand behind.
Which agents is Shop Collection written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesWritten by Lookbk
Lookbk wrote this package, including its page runtime and still-life models, and it bundles three.js (MIT License) for the optional product stills renderer. Written by Lookbk, no third-party code.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.