Pricing Page

You are a frontend developer building a dynamic pricing page. The user wants to create an interactive pricing page with multiple plans, comparison features, and the ability to toggle between billing periods.

What to check first

• Verify you have React installed: npm list react
• Check if you're using a CSS framework (Tailwind, Bootstrap) or plain CSS
• Confirm your project structure has a components/ directory for the PricingPage component

Steps

1. Create a new component file PricingPage.jsx in your components/ directory
2. Define a plans array with objects containing id, name, price, billingPeriod, description, and features properties
3. Add state using useState to track the selected billing period (monthly/annual)
4. Create a toggleBillingPeriod() function that updates the billing period state
5. Build a plan card component that renders each plan's details with a map function
6. Add a feature comparison grid showing which features each plan includes
7. Implement a "Get Started" button on each plan card that could trigger a checkout flow
8. Style the component with responsive grid layout (2-3 columns) and highlight the recommended plan with different background color

Code

import React, { useState } from 'react';

export default function PricingPage() {
  const [billingPeriod, setBillingPeriod] = useState('monthly');

  const plans = [
    {
      id: 'starter',
      name: 'Starter',
      monthlyPrice: 29,
      annualPrice: 290,
      description: 'Perfect for individuals',
      recommended: false,
      features: [
        'Up to 5 projects',
        '5 GB storage',
        'Email support',
        'Basic analytics',
        'Community access'
      ],
      cta: 'Get Started'
    },
    {
      id: 'professional',
      name: 'Professional',
      monthlyPrice: 79,
      annualPrice: 790,
      description: 'Ideal for growing teams',
      recommended: true,
      features: [
        'Unlimited projects',
        '500 GB storage',
        'Priority email & chat support',
        'Advanced analytics',
        'API access',
        'Custom integrations',
        'Team collaboration tools'
      ],
      cta: 'Start Free Trial'
    },
    {
      id: 'enterprise',
      name: 'Enterprise',
      monthlyPrice: 299,
      annualPrice: 2990,
      description: 'For large organizations',
      recommended: false,
      features: [
        'Unlimited everything',
        'Unlimited storage',
        '24/7 phone & dedicated support',
        'Custom analytics & reports',
        'Advanced API & webhooks',
        'SSO & advanced security',
        'Custom contract terms',
        'On-premise option'

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change