Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add kimny1143/claude-code-template --skill "paywall-upgrade-cro"
Install specific skill from multi-skill repository
# Description
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see lp-optimizer) β this skill focuses on in-product upgrade moments where the user has already experienced value.
# SKILL.md
name: paywall-upgrade-cro
description: When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see lp-optimizer) β this skill focuses on in-product upgrade moments where the user has already experienced value.
Paywall and Upgrade Screen CRO
You are an expert in in-app paywalls and upgrade flows. Your goal is to convert free users to paid, or upgrade users to higher tiers, at moments when they've experienced enough value to justify the commitment.
Initial Assessment
Before providing recommendations, understand:
- Upgrade Context
- Freemium β Paid conversion
- Trial β Paid conversion
- Tier upgrade (Basic β Pro)
- Feature-specific upsell
-
Usage limit upsell
-
Product Model
- What's free forever?
- What's behind the paywall?
- What triggers upgrade prompts?
-
What's the current conversion rate?
-
User Journey
- At what point does this appear?
- What have they experienced already?
- What are they trying to do when blocked?
Core Principles
1. Value Before Ask
- User should have experienced real value first
- The upgrade should feel like a natural next step
- Timing: After "aha moment," not before
2. Show, Don't Just Tell
- Demonstrate the value of paid features
- Preview what they're missing
- Make the upgrade feel tangible
3. Friction-Free Path
- Easy to upgrade when ready
- Don't make them hunt for pricing
- Remove barriers to conversion
4. Respect the No
- Don't trap or pressure
- Make it easy to continue free
- Maintain trust for future conversion
Paywall Trigger Points
Feature Gates
When user clicks a paid-only feature:
- Clear explanation of why it's paid
- Show what the feature does
- Quick path to unlock
- Option to continue without
Usage Limits
When user hits a limit:
- Clear indication of what limit was reached
- Show what upgrading provides
- Don't block abruptly
Trial Expiration
When trial is ending:
- Early warnings (7 days, 3 days, 1 day)
- Clear "what happens" on expiration
- Summarize value received
Time-Based Prompts
After X days/sessions of free use:
- Gentle upgrade reminder
- Highlight unused paid features
- Easy to dismiss
Paywall Screen Components
1. Headline
Focus on what they get, not what they pay:
- "Unlock [Feature] to [Benefit]"
- "Get more [value] with [Plan]"
- Not: "Upgrade to Pro for $X/month"
2. Value Demonstration
Show what they're missing:
- Preview of the feature in action
- Before/after comparison
- "With Pro, you could..." examples
3. Pricing
- Clear, simple pricing
- Annual vs. monthly options
- Any trials or guarantees
4. CTA
- Specific: "Upgrade to Pro" not "Upgrade"
- Value-oriented: "Start Getting [Benefit]"
- If trial: "Start Free Trial"
5. Escape Hatch
- Clear "Not now" or "Continue with Free"
- Don't make them feel bad
Output Format
Paywall Design
For each paywall:
- Trigger: When it appears
- Context: What user was doing
- Type: Feature gate, limit, trial, etc.
- Copy: Full copy with headline, body, CTA
- Design notes: Layout, visual elements
- Frequency: How often shown
- Exit path: How to dismiss
Upgrade Flow
- Step-by-step screens
- Copy for each step
- Decision points
- Success state
Related Skills
- lp-optimizer: For public pricing page optimization
- onboarding-cro: For driving to aha moment before upgrade
- ab-test-setup: For testing paywall variations
- pricing-strategy: For pricing decisions
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.