Whop App Development

Build apps that run inside the Whop platform – handling authentication, payments, webhooks, and UI all with best practices.

What Makes a Good Whop App (Suggestions)

Guidelines for app success (not requirements, user requests take priority):

Details: app-design-principles.md

When to Use

Empty repo / new project:

• “Build me a Whop app” → Start with app-from-scratch.md
• Guides through discovery, setup, and building from nothing

Existing Whop project:

• Jump directly to specific rules in Quick Reference below
• Adding payments → payments-checkout.md
• Adding auth → auth-verify-token.md
• SDK issues → sdk-setup.md

Companion Skills (Install First)

whop-dev focuses on Whop-specific patterns. For complete app development, install these companion skills:

npx skills add https://github.com/anthropics/skills --skill frontend-design && \
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices && \
npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices && \
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

IMPORTANT: When starting a new project or build-from-scratch flow, install companion skills FIRST before scaffolding. This enables whop-dev to hand off specialized work to expert skills.

See companion-skills.md for detailed handoff patterns.

How to Use

Starting fresh (empty repo)? → Follow Build From Scratch – guided flow from idea to deployed app.

Existing project? → Jump to Quick Reference for specific features.

Build From Scratch

For empty repos only. Go from idea to deployed Whop app:

Quick Reference

Authentication & Security (CRITICAL)

SDK Setup (CRITICAL)

Design Principles (SUGGESTIONS)

Payments (HIGH)

App Views (HIGH)

Members & CRM (HIGH)

UI & Design (MEDIUM)

API Patterns (MEDIUM)

Storage & Files (MEDIUM)

Engagement (MEDIUM)

Development (LOW)

Companion Skills (ECOSYSTEM)

App Views

Whop apps have three entry points:

Tech Stack

Required:

• @whop/sdk – Server-side API client
• @whop/react – React hooks and Frosted UI

Recommended:

• Next.js (App Router)
• TypeScript
• Tailwind CSS + Frosted UI

Flexible:

• Database: Supabase recommended, but any works
• UI: Frosted UI, Shadcn, Radix – your choice

Platforms (Advanced)

For marketplaces with connected accounts:

• Enroll connected accounts
• Collect payments
• Enable payouts

Resources

• Whop Developer Docs
• API Reference
• Frosted UI Storybook
• MCP Server: https://mcp.whop.com/mcp (Cursor) or https://mcp.whop.com/sse (Claude)

Handoff Triggers

Delegate to companion skills when encountering these patterns:

See companion-skills.md for complete handoff guide.