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):
| Principle |
Description |
| Empower Creators |
Give customization so each whop feels unique |
| Drive Discovery |
Make the app have some kind of sharing feature or posting potential to allow users to attrach more users |
| Price Sustainably |
Make money without gouging creators or customers |
| Keep UX Simple |
Core action obvious, minimal clicks |
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
| Skill |
Delegates To |
When |
frontend-design |
UI creation |
Building components, pages, visual design |
vercel-react-best-practices |
Performance |
React optimization, data fetching, bundles |
supabase-postgres-best-practices |
Database |
Queries, schema, indexes, RLS |
web-design-guidelines |
UX review |
Accessibility, design auditing |
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:
| Step |
Guide |
Description |
| 0 |
companion-skills.md |
FIRST - Install companion skills |
| 1 |
app-from-scratch.md |
Plan your app type and architecture |
| 2a |
app-scaffold-b2b.md |
B2B: Dashboard-only apps for admins |
| 2b |
app-scaffold-b2c.md |
B2C: Experience apps for members |
| 3 |
app-database.md |
Add Supabase → supabase-postgres-best-practices |
| 4 |
app-whop-dashboard.md |
Configure in Whop Developer Dashboard |
| 5 |
app-deployment.md |
Deploy to Vercel |
| 6 |
app-store-submission.md |
Submit to App Store (optional) |
Quick Reference
Authentication & Security (CRITICAL)
| Rule |
Description |
| auth-verify-token.md |
MUST verify user tokens server-side |
| auth-access-check.md |
MUST check access levels before operations |
| security-checklist.md |
Security best practices checklist |
| auth-headers.md |
Extract tokens from headers |
| auth-oauth.md |
OAuth for external apps |
| input-sanitization.md |
XSS prevention |
SDK Setup (CRITICAL)
| Rule |
Description |
| sdk-setup.md |
Initialize Whop SDK (required) |
| sdk-iframe.md |
Client-side iframe SDK |
Design Principles (SUGGESTIONS)
| Rule |
Description |
| app-design-principles.md |
Founder's suggestions for app success (user requests take priority) |
Payments (HIGH)
| Rule |
Description |
| payments-checkout.md |
Create checkout flows |
| payments-webhooks.md |
Handle payment webhooks |
| payments-transfers.md |
Send payouts to users |
| payments-billing.md |
Billing portal & saved methods |
App Views (HIGH)
| Rule |
Description |
| views-structure.md |
Experience, Dashboard, Discover pages |
| views-routing.md |
Dynamic routing patterns |
Members & CRM (HIGH)
| Rule |
Description |
| api-memberships.md |
Memberships & user management |
UI & Design (MEDIUM)
| Rule |
Description |
| ui-frosted.md |
Frosted UI components |
| ui-dark-mode.md |
Dark mode handling |
| ui-tailwind.md |
Tailwind CSS setup |
API Patterns (MEDIUM)
| Rule |
Description |
| api-structure.md |
API route patterns |
| api-parallel.md |
Parallel data fetching |
Storage & Files (MEDIUM)
| Rule |
Description |
| files-upload.md |
Whop native file storage |
Engagement (MEDIUM)
| Rule |
Description |
| notifications.md |
Push notifications |
| engagement-forums.md |
Forum posts & comments |
| engagement-chat.md |
Chat messages |
Development (LOW)
| Rule |
Description |
| dev-proxy.md |
Local development proxy |
| dev-sandbox.md |
Sandbox testing |
Companion Skills (ECOSYSTEM)
| Rule |
Description |
| companion-skills.md |
Install & delegate to specialized skills |
App Views
Whop apps have three entry points:
| View |
Route |
Purpose |
| Experience |
/experiences/[experienceId] |
Customer-facing UI |
| Dashboard |
/dashboard/[companyId] |
Admin management |
| Discover |
/discover |
Public marketing page |
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:
Resources
Handoff Triggers
Delegate to companion skills when encountering these patterns:
| Pattern |
Hand Off To |
| "design", "make it look good", "UI", "component" |
→ frontend-design |
| "optimize", "performance", "slow", "bundle" |
→ vercel-react-best-practices |
| "database", "query", "schema", "index", "RLS" |
→ supabase-postgres-best-practices |
| "review UI", "accessibility", "audit" |
→ web-design-guidelines |
See companion-skills.md for complete handoff guide.
1---2name: whop-dev3description: Build Next.js apps for the Whop platform. For empty repos, guides users from idea to deployed app through discovery and setup. For existing projects, provides best practices for authentication, payments, webhooks, and UI. Triggers on "build me a Whop app", @whop/sdk, verifyUserToken, checkAccess, checkout flows, webhook handling, Experience/Dashboard pages, Frosted UI. Delegates to companion skills (frontend-design, vercel-react-best-practices, supabase-postgres-best-practices, web-design-guidelines) for design, performance, and database.4---56# Whop App Development78Build apps that run inside the Whop platform - handling authentication, payments, webhooks, and UI all with best practices.910## What Makes a Good Whop App (Suggestions)1112Guidelines for app success (not requirements, user requests take priority):1314| Principle | Description |15|-----------|-------------|16| **Empower Creators** | Give customization so each whop feels unique |17| **Drive Discovery** | Make the app have some kind of sharing feature or posting potential to allow users to attrach more users|18| **Price Sustainably** | Make money without gouging creators or customers |19| **Keep UX Simple** | Core action obvious, minimal clicks |2021**Details:** [app-design-principles.md](rules/app-design-principles.md)2223## When to Use2425**Empty repo / new project:**26- "Build me a Whop app" → Start with [app-from-scratch.md](rules/app-from-scratch.md)27- Guides through discovery, setup, and building from nothing2829**Existing Whop project:**30- Jump directly to specific rules in Quick Reference below31- Adding payments → [payments-checkout.md](rules/payments-checkout.md)32- Adding auth → [auth-verify-token.md](rules/auth-verify-token.md)33- SDK issues → [sdk-setup.md](rules/sdk-setup.md)3435## Companion Skills (Install First)3637whop-dev focuses on Whop-specific patterns. For complete app development, **install these companion skills**:3839```bash40npx skills add https://github.com/anthropics/skills --skill frontend-design && \41npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices && \42npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices && \43npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines44```4546| Skill | Delegates To | When |47|-------|--------------|------|48| `frontend-design` | UI creation | Building components, pages, visual design |49| `vercel-react-best-practices` | Performance | React optimization, data fetching, bundles |50| `supabase-postgres-best-practices` | Database | Queries, schema, indexes, RLS |51| `web-design-guidelines` | UX review | Accessibility, design auditing |5253**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.5455See [companion-skills.md](rules/companion-skills.md) for detailed handoff patterns.5657## How to Use5859**Starting fresh (empty repo)?** → Follow [Build From Scratch](#build-from-scratch) - guided flow from idea to deployed app.6061**Existing project?** → Jump to [Quick Reference](#quick-reference) for specific features.6263---6465## Build From Scratch6667**For empty repos only.** Go from idea to deployed Whop app:6869| Step | Guide | Description |70|------|-------|-------------|71| 0 | [companion-skills.md](rules/companion-skills.md) | **FIRST** - Install companion skills |72| 1 | [app-from-scratch.md](rules/app-from-scratch.md) | Plan your app type and architecture |73| 2a | [app-scaffold-b2b.md](rules/app-scaffold-b2b.md) | B2B: Dashboard-only apps for admins |74| 2b | [app-scaffold-b2c.md](rules/app-scaffold-b2c.md) | B2C: Experience apps for members |75| 3 | [app-database.md](rules/app-database.md) | Add Supabase → `supabase-postgres-best-practices` |76| 4 | [app-whop-dashboard.md](rules/app-whop-dashboard.md) | Configure in Whop Developer Dashboard |77| 5 | [app-deployment.md](rules/app-deployment.md) | Deploy to Vercel |78| 6 | [app-store-submission.md](rules/app-store-submission.md) | Submit to App Store (optional) |7980---8182## Quick Reference8384### Authentication & Security (CRITICAL)8586| Rule | Description |87|------|-------------|88| [auth-verify-token.md](rules/auth-verify-token.md) | MUST verify user tokens server-side |89| [auth-access-check.md](rules/auth-access-check.md) | MUST check access levels before operations |90| [security-checklist.md](rules/security-checklist.md) | Security best practices checklist |91| [auth-headers.md](rules/auth-headers.md) | Extract tokens from headers |92| [auth-oauth.md](rules/auth-oauth.md) | OAuth for external apps |93| [input-sanitization.md](rules/input-sanitization.md) | XSS prevention |9495### SDK Setup (CRITICAL)9697| Rule | Description |98|------|-------------|99| [sdk-setup.md](rules/sdk-setup.md) | Initialize Whop SDK (required) |100| [sdk-iframe.md](rules/sdk-iframe.md) | Client-side iframe SDK |101102### Design Principles (SUGGESTIONS)103104| Rule | Description |105|------|-------------|106| [app-design-principles.md](rules/app-design-principles.md) | Founder's suggestions for app success (user requests take priority) |107108### Payments (HIGH)109110| Rule | Description |111|------|-------------|112| [payments-checkout.md](rules/payments-checkout.md) | Create checkout flows |113| [payments-webhooks.md](rules/payments-webhooks.md) | Handle payment webhooks |114| [payments-transfers.md](rules/payments-transfers.md) | Send payouts to users |115| [payments-billing.md](rules/payments-billing.md) | Billing portal & saved methods |116117### App Views (HIGH)118119| Rule | Description |120|------|-------------|121| [views-structure.md](rules/views-structure.md) | Experience, Dashboard, Discover pages |122| [views-routing.md](rules/views-routing.md) | Dynamic routing patterns |123124### Members & CRM (HIGH)125126| Rule | Description |127|------|-------------|128| [api-memberships.md](rules/api-memberships.md) | Memberships & user management |129130### UI & Design (MEDIUM)131132| Rule | Description |133|------|-------------|134| [ui-frosted.md](rules/ui-frosted.md) | Frosted UI components |135| [ui-dark-mode.md](rules/ui-dark-mode.md) | Dark mode handling |136| [ui-tailwind.md](rules/ui-tailwind.md) | Tailwind CSS setup |137138### API Patterns (MEDIUM)139140| Rule | Description |141|------|-------------|142| [api-structure.md](rules/api-structure.md) | API route patterns |143| [api-parallel.md](rules/api-parallel.md) | Parallel data fetching |144145### Storage & Files (MEDIUM)146147| Rule | Description |148|------|-------------|149| [files-upload.md](rules/files-upload.md) | Whop native file storage |150151### Engagement (MEDIUM)152153| Rule | Description |154|------|-------------|155| [notifications.md](rules/notifications.md) | Push notifications |156| [engagement-forums.md](rules/engagement-forums.md) | Forum posts & comments |157| [engagement-chat.md](rules/engagement-chat.md) | Chat messages |158159### Development (LOW)160161| Rule | Description |162|------|-------------|163| [dev-proxy.md](rules/dev-proxy.md) | Local development proxy |164| [dev-sandbox.md](rules/dev-sandbox.md) | Sandbox testing |165166### Companion Skills (ECOSYSTEM)167168| Rule | Description |169|------|-------------|170| [companion-skills.md](rules/companion-skills.md) | Install & delegate to specialized skills |171172---173174## App Views175176Whop apps have three entry points:177178| View | Route | Purpose |179|------|-------|---------|180| Experience | `/experiences/[experienceId]` | Customer-facing UI |181| Dashboard | `/dashboard/[companyId]` | Admin management |182| Discover | `/discover` | Public marketing page |183184## Tech Stack185186**Required:**187- `@whop/sdk` - Server-side API client188- `@whop/react` - React hooks and Frosted UI189190**Recommended:**191- Next.js (App Router)192- TypeScript193- Tailwind CSS + Frosted UI194195**Flexible:**196- Database: Supabase recommended, but any works197- UI: Frosted UI, Shadcn, Radix - your choice198199## Platforms (Advanced)200201For marketplaces with connected accounts:202- [Enroll connected accounts](https://docs.whop.com/developer/platforms/enroll-connected-accounts)203- [Collect payments](https://docs.whop.com/developer/platforms/collect-payments-for-connected-accounts)204- [Enable payouts](https://docs.whop.com/developer/platforms/render-payout-portal)205206## Resources207208- [Whop Developer Docs](https://docs.whop.com/developer/getting-started)209- [API Reference](https://docs.whop.com/developer/api/getting-started)210- [Frosted UI Storybook](https://storybook.whop.com/)211- MCP Server: `https://mcp.whop.com/mcp` (Cursor) or `https://mcp.whop.com/sse` (Claude)212213## Handoff Triggers214215Delegate to companion skills when encountering these patterns:216217| Pattern | Hand Off To |218|---------|-------------|219| "design", "make it look good", "UI", "component" | → `frontend-design` |220| "optimize", "performance", "slow", "bundle" | → `vercel-react-best-practices` |221| "database", "query", "schema", "index", "RLS" | → `supabase-postgres-best-practices` |222| "review UI", "accessibility", "audit" | → `web-design-guidelines` |223224See [companion-skills.md](rules/companion-skills.md) for complete handoff guide.
steve-cooks