name: whop-dev
description: 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.
metadata:
tags: whop, nextjs, payments, sdk, frosted-ui, authentication
author: Steve | https://whop.com/@stevecooks | https://x.com/steve_cook
version: "1.2.2"

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.