{"id":"18b88b65-604f-44ba-9fff-e1098854d92f","shortId":"GrSg5W","kind":"skill","title":"pricing-page","tagline":"A standalone pricing page — header, plan tiers, feature comparison table,\nand an FAQ. Use when the brief asks for \"pricing\", \"plans\",\n\"subscription tiers\", or a \"compare plans\" page.","description":"# Pricing Page Skill\n\nProduce a single-screen pricing page that respects the active DESIGN.md.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Use only its colors, type\n tokens, and component patterns.\n2. **Classify** the product from the brief and pick a tier shape:\n - 3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.\n - 4-tier when the brief says \"scale\" or \"enterprise plus\".\n - 2-tier when it says \"individual / business\" or \"personal / pro\".\n3. **Sections**, in order:\n 1. **Hero** — page title (e.g. \"Pricing\"), one-line subhead, optional\n monthly/annual toggle.\n 2. **Plan cards** — one card per tier. Each card: tier name, price (use the\n display font + larger scale for the number), 1-line positioning, 4–6\n bullet features, primary CTA. Mark the recommended tier with the DS\n accent border or a small badge.\n 3. **Comparison table** — feature rows × tier columns, ✓ / — / value cells.\n Group features into 2–3 logical sections (Core, Collaboration,\n Support, Security…). Sticky header.\n 4. **FAQ** — 4–6 collapsible Q&A items. Use `

` for the\n collapse — no JS.\n 5. **Footer CTA** — single line + button, accent band sparingly.\n4. **Write** one self-contained HTML document:\n - `` through ``, CSS in one inline `