The page this skill built from examples/quaywise, working in your browser. Opens in a new tab. Also: .
8-second example rendered by this skill from examples/quaywise · 1280×720
What you get
- A build that turns proof.json into a self-contained page and a paste-in embed
- Optical balance for 4 to 12 logos, with one shared baseline per row and a debug view
- Figures with notes that give basis, source and as-of date, and a build that refuses unsourced numbers
- Three layouts and two finished looks, light ledger and dark signal
- Hover, focus and tap reveals with a link to each customer's case
- A check at 390, 768, 1024 and 1440 px that re-measures the balance and contrast
- A frame-by-frame recorder for the preview video and stills
- Open-source licenses for every part it builds on
Good fit
- A B2B product page that wants its customer logos to look considered rather than like a grey strip.
- A team with real operating figures and a ledger, report or meter that each number comes from.
- A launch page whose hero needs a short, honest band of proof directly beneath it.
Not for
- Reviews, star ratings and quotes (use a testimonial section)
- Pricing tables and plan comparisons
- Logos you only have as PNG or JPG files
- Numbers you cannot source or date
About this skill
A Page Kits package for the band under a hero that says who uses the product and what it has done. Every customer logo is measured from its own SVG, by ink box, aspect and ink density, and sized to the same visual weight, then set on one baseline per row. Every figure uses tabular numerals and links to a numbered note that gives its basis, its source and its as-of date. The build refuses a figure without a source, a date in the future, a plus sign or "up to". Each logo opens on hover, focus or tap to one line on what that customer uses the product for. Three layouts, two looks, an entrance that plays once, an optional slow marquee that pauses, and a check that re-measures the balance.
Example request
Build the trusted-by band under our hero: our customers' SVG logos balanced to the same visual weight on one baseline, each opening to what they use us for, and three figures in tabular numerals with notes giving the source and as-of date of each.
How it works
Your agent
- 1
Collect the content
Words such as "Eight" are fine in the copy.
- 2
Write proof.json
Start from the example closest to what you need and change it.
- 3
Build
The build lists every problem at once and writes nothing until they are fixed: a figure without a note, a note without a source, an as-of date in the future, "+", "up to", "over" or "more than" next to a number, a digit in the copy with no marker, a logo that is not a clean SVG.
- 4
Check
Each line reports the contrast, the number of marks and rows, the weight spread and how far any mark sits off its baseline, for example
8 marks in 2 rows, weight spread 1.003x (max 1.1), baseline off by 0.03px. - 5
Look at it
Open the address it prints.
- 6
Put it on the site
Paste
out/proof-embed.htmlunder your hero. - 7
Record a preview (optional)
--momentsprints the stretches where nothing on the band is changing; take stills and posters from inside them.
- 1
You get
- out/proof-embed.html
- out/index.html
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_PATHif not). - ffmpeg for the video only (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg, or setFFMPEG_PATH). - Internet access when the page is opened, for the look's fonts (pinned on jsDelivr with an integrity hash). Without it system fonts stand in.
- The customers' logos as SVG files with a viewBox and the type converted to outlines (no live
<text>, no embedded bitmaps). A PNG cannot be measured or recoloured. - The real numbers and where they come from. For each figure: the value, what it measures, the source (a ledger, a report, a meter) and the date it is true as of. If a number has no source, leave it out; the build will not take it.
- Permission to show each customer's logo.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The build lists problems and writes nothing.
Fix them all and build again; it reports everything at once.
"stats[1] has no source".
Give the figure a note with its basis, source and as-of date, or remove it. There is no switch to turn this off.
"marks[0].use has a number with no source".
Add a
[n]marker that points at a note, or say it without the digit.
What’s in the download
- SKILL.md14.7 KB
- examples/
- examples/gridmere/27.8 KB7 files
- examples/quaywise/50.2 KB10 files
- kit/
- kit/balance.js4.97 KBthe optical balance. Measures each SVG's ink box, aspect, density and baseline on a canvas, and works out one shared weight and every mark's size. Used by the page and, a second time, by the check.
- kit/proof.css13.7 KBthe whole design, scoped to
.pb. The three layouts, the two looks, the tablet and phone rules, the debug view and the demo page around the band. - kit/runtime.js20.5 KBthe browser runtime, inlined into every build. Places the marks on their baselines, picks the column count, fits the figures, opens marks (cell, caption line or phone drawer), plays the entrance once, runs the marquee, and the recording clock.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs10.3 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs19.3 KB
- scripts/kit/record.mjs6.98 KB
- scripts/kit/schema.mjs12.3 KBevery field, its limits, the honesty rules for numbers and the colour rules; lists every problem at once.
- scripts/kit/serve.mjs2.50 KB
- scripts/build.mjs142 Bproof.json to
out/index.html(a short hero with the band under it) andout/proof-embed.html(the band to paste in). - scripts/check.mjs142 Bserves the page and checks it at 390, 768, 1024 and 1440 px, with reduced motion at 390 and 1440, including the balance and the baseline.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs144 Bthe preview video, stills, the debug still (
--debug) and--moments. - scripts/serve.mjs142 Bserves
out/on localhost to look at. - NOTICE.md1.57 KB
- TESTED.json561 B
34 files · 195 KB · installs to ~/.claude/skills/proof-band-kit for Claude Code and ~/.agents/skills/proof-band-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Customer logos balanced by ink weight and figures with sourced notes, built under a hero from one JSON config
- 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
How are the logos made to look the same size?
Each SVG is drawn on a canvas and measured for its real ink box and ink density. Every logo is then sized so ink width times height times the square root of density is the same, and the check fails if any two differ by more than 10 %.
Can I show a number without a source?
No. Every figure needs a note with its basis, its source and its as-of date, and the build stops if one is missing, the date is in the future, or the value says plus or up to.
Does the logo row scroll on its own?
Only if you set marquee on the row layout. It moves at 12 to 32 px a second, stops on hover, focus or the Pause button, and does not start at all under reduced motion.
Which agents is Proof Band 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, vendors no third-party code, and loads the Newsreader, Geist, Geist Mono, Inter Tight and JetBrains Mono fonts from jsDelivr 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.