# Pricing Section

> An animated pricing section your agent builds from one pricing.json and drops into a site: plans with monthly and yearly prices, features, a recommended plan and the checkout links for each period (Stripe Payment Links, Paddle or Lemon Squeezy checkouts, or your own signup URLs). The billing switch is a real radiogroup that works with arrow keys, and switching rolls every price on a mechanical odometer whose wheels carry into each other, plan after plan. Every saving on the page, from the switch's "save up to 20%" to "You save $432 a year", is worked out from the prices, and the build refuses a phrase that types one. A seat counter multiplies the per-seat plans and rolls their totals, the choice is kept in the URL hash or localStorage, and a comparison table (one group open at a time on phones) and an FAQ sit underneath. Currency is formatted by Intl.NumberFormat in any ISO currency and locale. Two styles laid out differently: ledger, an engineering datasheet where the recommended column is pulled out of the sheet in reverse with a strip of label tape, and gallery, framed prints hung on a museum wall where the recommended one is lit by a spotlight that flickers on. The build fails with a clear message when a yearly price is not lower, a plan has no checkout URL or the recommended plan does not exist, and the check tests four widths for contrast, overflow, focus, keyboard, remembered state and reduced motion.

- Output: Video, Drop-in pricing section from pricing.json · odometer prices that carry digit into digit · computed yearly saving · seats, comparison table, FAQ · HTML, embed and React component
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/pricing-section

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the check and the clip (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg for the clip only (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- Internet access when the page is opened, for the style's Google Fonts. Without them system fonts stand in.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add pricing-section
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

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

> Use the Pricing Section skill to build our pricing section in the ledger style: our three plans in USD with monthly and yearly prices, Team and Scale per seat, our Stripe Payment Links for each period, the comparison table and five questions from support. Give me the embed and the Next.js component.