What problem does it solve? Pricing pages often conflate custom sales inquiries with real paid tiers, invent fake plan specs to fill a layout, or under-sell plans with only a few card bullets. This Skill provides a proven React/Tailwind layout pattern that keeps real priced tiers honest and visually distinct from the "talk to sales" catch-all. ## Core Features & Use Cases - Three-part layout: all real priced tiers as cards in one row, a dark full-width contact bar below (no specs, no table row), and a grouped feature-comparison table underneath. - Current-plan awareness: badges and disabled buttons for the user's active tier, plus real usage bars (e.g. "7/10 users") pulled from the tenant's actual plan and quota data. - Data integrity rules: never fabricate prices, limits, or a fake fourth tier — all values come from the same plan-limits config the backend enforces. - Use Case: Redesigning a SaaS app's /pricing page where Free/Pro/Max tiers exist in the backend config and logged-in users should see their current plan and usage against quotas. ## Quick Start Redesign my app's pricing page using the saas-pricing-page pattern with our real plan tiers from the backend config.
