The page this skill built from examples/larchmere, working in your browser. Opens in a new tab. Also: .
16.6-second example rendered by this skill from examples/larchmere · 1280×720
Example settingswhat each example above was built from
examples/larchmerepricing.json
- Currency
- $
- Headline
- Pay for the studio you run, _not the one you might._
examples/northvanepricing.json
- Currency
- $
- Headline
- Forecasts by the call. _Pay for what you ask._
What you get
- A self-contained HTML page and a paste-in embed scoped under one class
- 2 to 4 plans on a price scale with rolling prices and a monthly/yearly radio switch
- A recommended plan designed as its own object, with a stated reason
- A comparison that opens from the cards, marks what is new and can hide what is the same
- An optional usage calculator, linear or logarithmic, that lights the cheapest plan
- Phone layouts with folded plans and a sticky switch, plus reduced motion
- A check at 4 widths and a 1920x1080 preview recorder
- Open-source licenses for every part it builds on
Good fit
- A SaaS product with two to four plans that wants yearly savings shown as real money, not a percentage badge.
- An API or usage-billed service that needs a calculator telling each buyer which plan costs least at their size.
- A studio or service business that wants its recommended package to look chosen for a reason buyers can check.
Not for
- Shops selling single products with a checkout
- Pricing that changes per customer with no list prices
- More than 4 plans or long feature matrices across many products
- Pages that want decorative motion with no prices in it
About this skill
A pricing section built around one shared price scale: every plan hangs from its real price on a ruled axis by a leader line. Flip the monthly/yearly switch and each price rolls digit by digit while its dot slides along the scale and a hatched stretch shows the money kept, with the arithmetic printed under every price. The recommended plan is a different object, not a badge: filled in the accent, wider, raised into the scale, with a reason a buyer can believe. A comparison opens out of the cards on the same columns and marks what is new at each plan, an optional usage calculator re-lights the cheapest plan as you slide and names the crossover, and a strip of questions closes it. Two looks, folded plans on phones, reduced motion and a paste-in embed.
Example request
Build our pricing section with our three plans, monthly and yearly prices, a feature comparison and a seat calculator
How it works
Your agent
- 1
Collect the plans
Ask for, or read from their current page: plan names, prices, what each plan adds, links, the recommended plan with a reason a buyer would believe (who it suits, not "most popular" unless they have the number).
- 2
Write pricing.json
Copy the example closest in spirit and replace every value.
- 3
Build
It lists every problem at once (a missing field, a line too long for its place, a saving claim one plan doesn't meet, a yearly price above the monthly one, a table row with the wrong number of values, a palette pair under AA contrast) and writes nothing until they are fixed.
- 4
Check
It opens the page at 390, 768, 1024 and 1440 px wide, and with reduced motion at 390 and 1440, and works it: switches billing by click and by arrow keys and reads every digit column, opens the comparison from a card and checks it scrolled there and marked the plan, toggles "Only what changes", drags the calculator through its stops (each
aria-valuetextmust name the cheapest plan and nothing may move the layout), opens a folded plan and a question, then tabs through the page. - 5
Look at it
Open the address it prints.
- 6
Record the video (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, 16.6 seconds: rests on the plans, switches to yearly, opens the comparison from the recommended card, shows only what changes, slides the calculator across the next crossover, opens a question) andout/poster.png. - 7
Hand it over
Either upload
out/index.htmlas the page, or pasteout/embed.htmlwhere the pricing goes on an existing page: it carries its font links, a style sheet scoped under.pk, the markup and the script, and it adapts to the width of the column it is pasted into (container queries), not the window.
- 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 and the recorder (set
CHROME_PATHif it is somewhere unusual), and ffmpeg for the video. - From the person: their plans (names, who each is for, monthly prices and the monthly figure when billed yearly, or a custom line), what each adds, their sign-up links, which plan they recommend and why, and if they want them, a feature table, the usage formula behind their prices and their questions.
Last checked Nov 8, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
"billing.saving says 2 months free but Studio is …"
A yearly price doesn't match the claim. Fix the price or change the words; never ship a claim one plan doesn't meet.
"palette: save … on card is 3.9:1"
An overriding colour is too light or dark; darken it on light themes, lighten it on dark ones.
A price runs into the edge of its card
Four plans with five-digit prices are too wide at 1024 px; use three plans, or a unit like "/ seat" with smaller numbers.
What’s in the download
- SKILL.md13.7 KB
- examples/
- examples/larchmere/4.00 KB1 file
- examples/northvane/4.28 KB1 file
- scripts/
- scripts/kit/
- scripts/kit/build.mjs28.4 KBthe fields, their limits and the cross-field rules (saving claims, contrast).
- scripts/kit/cdp.mjs4.92 KB
- scripts/kit/check.mjs20.0 KB
- scripts/kit/record.mjs5.95 KB
- scripts/kit/runtime.js37.0 KBthe motion and the interactions, inlined into the page.
- scripts/kit/serve.mjs2.49 KB
- scripts/kit/style.css22.4 KBthe section's style, scoped under
.pk, with container queries. - scripts/build.mjs139 Bchecks pricing.json and writes
out/index.htmlandout/embed.html. - scripts/check.mjs139 Bworks the page at four widths and reduced motion and lists every problem.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs141 Bthe preview video, single stills and
--moments. - scripts/serve.mjs139 Bserves
out/on localhost to look at. - NOTICE.md1.44 KB
- TESTED.json435 B
17 files · 149 KB · installs to ~/.claude/skills/pricing-kit for Claude Code and ~/.agents/skills/pricing-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Pricing section system · page + embed · 1080p preview
- 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 I use my own colours and fonts?
You pick a light or dark palette and an editorial or technical type pairing, and can override any of ten colours. The build refuses colours that fall under AA contrast, and the check measures the page at 4 widths.
What if a plan has no fixed price?
Give it a custom line such as Let's talk instead of prices. It sits past a break at the end of the scale, shows Quote in the calculator, and keeps its own button and feature list.
Can I paste it into an existing site?
Yes. The build writes embed.html with the font links, a style sheet scoped under one class, the markup and the script. It adapts to the width of the column you paste it into, not the window.
Which agents is Pricing Kit 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 no third-party code library; its fonts (Newsreader, Public Sans, IBM Plex Sans, IBM Plex Sans Condensed and IBM Plex Mono) 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.