Pricing Page Skill

How this skill behaves (read first)

This is a generative skill, and pricing is the textbook case for gating rather than applying every best practice. The lessons offer many ways to make a pricing page stand out — badges, per-tier graphics, interactive sliders, charm pricing, anchoring, social proof. Apply them all at once and you get an overdesigned, cluttered, psychologically overwhelming page that hurts conversion and trust. So:

1. Establish context (Step 0) — pricing decisions hinge on it more than almost any other screen.
2. Apply the always-true core — the patterns correct for essentially every pricing page.
3. Surface the context-dependent decisions as a menu — present each with its trade-off and a recommendation, and let the user pick the few that fit. Stacking many of them is the failure mode.

Then hand the result to the audit skills to validate it didn't tip into clutter or dark patterns.

Scope & composition (per docs/orchestration-policy.md §9): this skill owns the pricing page itself and composes lower-scope skills rather than re-deriving them. Core children (built as part of the page): ux-cards (tier-card mechanics — shadows, padding, clickable card) and ux-buttons (the CTAs). Downstream (offer, don't auto-build): the post-click ux-checkout-payment. Inherit, don't regenerate: under an existing design system, take color/type/spacing from its tokens — only set those when designing from scratch.

Step 0 — Establish context before designing