The page this skill built from examples/fenn, working in your browser. Opens in a new tab. Also: .
16-second example rendered by this skill from examples/fenn · 1280×720
What you get
- An index page with the plate, Index/Grid switch and discipline filter
- One case page per project with credits and previous/next
- A paste-in embed of the index
- Your pictures as WebP at 5 widths
- Checks at 4 widths, including the plate on every row
- A recorder for a frame-exact preview video
- Two finished examples, light and dark
- Open-source licenses for every part it builds on
Good fit
- A type foundry or graphic designer who wants clients to read the whole studio in one list.
- An architectural photographer whose pictures should stay hidden until someone points at a project.
- A small studio that needs case pages with credits and next and previous without a CMS.
Not for
- A blog or journal
- A shop with prices and a cart
- Scroll-driven storytelling pages
- A one-screen hero with no project list
About this skill
A work index for a designer, studio or photographer, built from one work.json. Projects are set as a typographic list, with the number, client, discipline, year and a one-line outcome. Point at a row and that project's picture or short loop slides out of it as a numbered plate. The plate hangs under the row, or stands on it when there is no room below. It follows the pointer on a spring, never covers the line being read, and riffles to the next picture as you move down the list. An Index and Grid switch moves every item with FLIP, and a filter by discipline shows live counts. Each project gets a case page with credits and previous and next. On phones, the row's thumbnail opens the plate inline.
Example request
Build my work index from work.json: a typographic list of projects where each row's picture slides out as a plate that hangs under the row and never covers it, with Index and Grid views, a discipline filter, and one case page per project with credits and next/previous.
How it works
Your agent
- 1
Collect the work
For each project: a title, the client, the discipline, the year, one line on what changed (with a number if there is one: "licensed by 140 studios in year one", not "Branding"), one picture or a short loop with a poster, its alt text, and for the case page an opening sentence, a few paragraphs if there are any, and the credits (who did what).
- 2
Write work.json
Copy
examples/fenn/work.json(orexamples/halm/work.json) next to the pictures and change it. - 3
Build
Every problem is listed at once, with the field and the limit.
- 4
Check
One line per size and page, with what was measured, for example
✓ 1440x900 index.html: 86 text pairs, lowest contrast 1.23× its minimum; plate: 8 rows hovered (4 below, 4 above). - 5
Look at it
Open the address it prints.
- 6
Put it on the site
Upload
out/as it is (index.html, work/, media/). - 7
Record a preview (optional)
The video follows a fixed script, the same frame for frame on any machine: the page, a scroll to the list, the pointer visits two rows (the plate hangs from each and riffles between them), Grid and back, a filter and back.
- 1
You get
- out/embed.html
- out/index.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge. The build uses it to resize the pictures, the check and the recorder use it to open the pages (the scripts find it; set
CHROME_PATHif they don't). - The person's pictures: JPG, PNG, WebP or AVIF, one per project, at least 1600 px wide for a sharp case page. A loop is an MP4 or WebM under 4 MB with a poster picture.
- ffmpeg, only for the preview video.
- Internet access when the site is opened, for its Google Fonts.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The build says a picture is not found.
Paths in work.json are relative to work.json itself, not to where you run the command. Put the pictures next to it, or write
../photos/x.jpg.The build says the projects are not newest first.
Reorder them by year, or add
"order": "manual"if the order is deliberate (a best-first list).The plate shrinks on a short screen.
That is the rule working: it may not cover its row or rise over the controls, so on a window too short for the whole picture it scales to the room it has, down to 30 %. On a normal screen it is full size.
What’s in the download
- SKILL.md12.9 KB
- examples/
- examples/art/60.6 KB4 files
- examples/fenn/8.50 KB1 file
- examples/halm/7.58 KB1 file
- kit/
- kit/index.css16.8 KBthe whole design, scoped to
.wi: bar, statement, controls, the two row systems, the plate, Grid view, case pages, tablet and phone rules. - kit/runtime.js25.7 KBthe browser runtime, inlined into every index page: the plate (placement, spring, reveal, riffle, the text it sits over), Index/Grid and filter FLIP, the inline plate on phones, keyboard focus, and the recording clock with its fixed script.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs19.7 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs16.4 KB
- scripts/kit/record.mjs8.07 KB
- scripts/kit/schema.mjs9.68 KBevery field, its limits and the colour rules; lists every problem at once.
- scripts/kit/serve.mjs2.50 KB
- scripts/build.mjs138 Bwork.json to
out/index.html,out/work/<slug>.html(one per project),out/embed.htmlandout/media/(every picture as WebP at 160, 480, 960, 1600 and 2400 px). - scripts/check.mjs138 Bserves the site and checks the index and two case pages at 390, 768, 1024 and 1440 px, and with reduced motion at 390 and 1440.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs140 Bthe preview video, stills of the index or of a case page, and
--moments(when nothing on the page is moving). - scripts/serve.mjs138 Bserves
out/on localhost to look at. - NOTICE.md1.34 KB
- TESTED.json389 B
22 files · 199 KB · installs to ~/.claude/skills/portfolio-index-kit for Claude Code and ~/.agents/skills/portfolio-index-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Page kit · work.json → index + case pages · ledger or caption rows
- 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
Can the preview ever cover the project name I am pointing at?
No. The plate hangs under the row or stands on it, never on it, and never rises over the controls. The check hovers every row on screen at 4 widths and fails if the plate overlaps its own row.
What happens on phones, where there is no hover?
Each row's thumbnail becomes a button. Tapping it opens the plate inline under the row text, full width, with a link to the case page. One plate is open at a time.
Can I use short videos instead of still pictures?
Yes. Give a project a loop: an MP4 or WebM under 4 MB with a poster picture. It plays muted only while its plate or case page is shown, and shows the poster under reduced motion.
Which agents is Work Index 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 with its own runtime and no third-party libraries; the fonts load from Google Fonts under the SIL Open Font License 1.1. 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.