Agent-Skills.md

Agent Skills: Whop App Development

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.

whopnextjspaymentssdkfrosted-uiauthentication
UncategorizedID: steve-cooks/skills/whop-dev

Repository

steve-cooks/skills
steve-cooksLicense: MIT
22

Install this agent skill to your local

pnpm dlx add-skill https://github.com/steve-cooks/skills/tree/HEAD/skills/whop-dev

Skill Files

Browse the full folder contents for whop-dev.

Download Skill

Loading file tree…

skills/whop-dev/SKILL.md

Skill Metadata

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.

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:

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.