How it works

1. You ask

   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.

2. Your agent

   1. 1

      Collect the prices and links

      From the person, or from their current pricing page.

   2. 2

      Write pricing.json

      The other fields: id (the section's anchor, default pricing), kicker, headline (up to 84 characters; one word in _underscores_ gets the style's accent), intro, billing.default (monthly or yearly), billing.persist (hash, storage, both or none), compare ({ "title", "groups": [ { "name", "rows": [ { "label", "values": [one per plan] } ] } ] }, where true and false become a tick and a dash), faq ({ "title", "items": [ { "q", "a" } ] }), footnote (taxes, currency), and copy to reword any phrase the section prints around the numbers (the list is COPY in scripts/kit/schema.mjs; {pct}, {amount}, {n}, {unit} and {units} are filled in).

   3. 3

      Build

      It lists every problem at once and writes nothing until they're fixed.

   4. 4

      Check

      It opens the page at 390, 768, 1024 and 1440 px wide and with reduced motion at 390 and 1440, and fails on: script errors; sideways scrolling; text under 16 px on a phone or 14 px elsewhere; text, prices included, under WCAG AA contrast (monthly and yearly); text cut off or off the screen; a digit wheel resting between two digits; a keyboard focus that can't be seen; a switch whose click or arrow keys don't change the period and move the focus; prices, totals, savings, screen-reader text or button links that don't match the prices and URLs in pricing.json after a switch or a seat change; a choice not remembered after a reload; a table group or a question that doesn't open and close; and, with reduced motion, prices that roll instead of changing at once.

   5. 5

      Look at it

      Open the address it prints.

   6. 6

      Record the clip (optional)

      Writes out/preview.mp4 (1920×1080, 30 fps, about 22 seconds) and out/poster.png.

   7. 7

      Put it on the site

      Tell the person the switch works with a keyboard and a screen reader, which period it opens on and where the choice is remembered, and that every saving on the page is computed from their prices.

3. You get

   • out/index.html
   • out/embed.html
   • out/preview.mp4
   • out/poster.png
   • out/react/PricingSection.tsx
   • out/react/pricing-section.css