GitHub Copilot prompt to build a pricing page
Pricing pages rot because prices get pasted into markup in four places. This prompt keeps GitHub Copilot honest with a data-driven plans array, a billing toggle built as a real radiogroup, and a comparison table screen readers can actually read, so the next price change is a one-line edit.
Last updated
Build a pricing page component at src/components/PricingTable with three tiers, Free, Team, and Business, fed from a plans array in src/data/plans so copy edits never touch markup. Add a monthly and annual billing toggle implemented as a radiogroup, not a bare div with onClick, and show the per-month price under annual billing with the yearly total in smaller text beside it. Mark one tier as featured through a boolean in the data, rendered as a border and a badge, no duplicated card markup. Below the cards, render a feature comparison table where the tier row stays visible while scrolling, and yes and no cells carry text for screen readers, not just icons. The Free tier button says Start, paid tiers say Choose plus the plan name. Acceptance: toggling billing updates all three prices from data, keyboard arrows move between billing options, and no price string is hardcoded in JSX.
Same task in other tools
Questions about this prompt
Why build the billing toggle as a radiogroup?
Two mutually exclusive options are semantically radio buttons, which gives you keyboard arrows and screen reader announcements for free. A styled div needs all of that rebuilt by hand and usually is not.
How do I add a fourth tier later?
Append one object to the plans array. If any markup needs editing for the new tier to appear, data leaked into JSX somewhere, and it is worth re-running the prompt's no-hardcoded-prices rule over the component.
Prices update on toggle but the yearly total lags one render behind. Why?
The total was stored in state and updated in an effect. Have Copilot compute it inline from the plans data and the selected billing option so there is nothing to fall out of sync.