⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Whop应用开发指南 - 构建Whop平台应用的最佳实践与完整教程

whop-dev by steve-cooks/skills

64 周安装量

2 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/steve-cooks/skills --skill whop-dev

开发 SaaS API

🇨🇳中文介绍

Whop 应用开发

构建在 Whop 平台内运行的应用 - 以最佳实践处理身份验证、支付、Webhook 和用户界面。

优秀 Whop 应用的特点（建议）

应用成功指南（非强制要求，用户需求优先）：

原则	描述
赋能创作者	提供定制化选项，让每个 whop 都感觉独一无二
促进发现	应用应具备某种分享功能或发布潜力，使用户能够吸引更多用户
可持续定价	在不剥削创作者或客户的前提下盈利
保持用户体验简洁	核心操作一目了然，点击次数最少

详情： app-design-principles.md

何时使用

空仓库 / 新项目：

"为我构建一个 Whop 应用" → 从 app-from-scratch.md 开始
指导从零开始的探索、设置和构建过程

现有 Whop 项目：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

配套技能（首先安装）

whop-dev 专注于 Whop 特有的模式。要完成完整的应用开发，请安装这些配套技能：

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

技能	委托给	何时使用
`frontend-design`	用户界面创建	构建组件、页面、视觉设计
`vercel-react-best-practices`	性能优化	React 优化、数据获取、打包
`supabase-postgres-best-practices`	数据库	查询、模式、索引、行级安全
`web-design-guidelines`	用户体验审查	可访问性、设计审计

重要提示：启动新项目或从零开始构建流程时，请先安装配套技能，再进行脚手架搭建。这使得 whop-dev 能够将专业工作委托给专家技能。

详细交接模式请参阅 companion-skills.md。

从头开始（空仓库）？ → 遵循"从零开始构建" - 从想法到部署应用的引导流程。

现有项目？ → 跳转到快速参考以获取特定功能。

仅适用于空仓库。 从想法到部署 Whop 应用：

步骤	指南	描述
0	companion-skills.md	首先 - 安装配套技能
1	app-from-scratch.md	规划应用类型和架构
2a	app-scaffold-b2b.md	B2B：面向管理员仅限仪表板的应用
2b	app-scaffold-b2c.md	B2C：面向会员的体验应用
3	app-database.md	添加 Supabase → `supabase-postgres-best-practices`
4	app-whop-dashboard.md	在 Whop 开发者仪表板中配置
5	app-deployment.md	部署到 Vercel
6	app-store-submission.md	提交到应用商店（可选）

身份验证与安全（关键）

规则	描述
auth-verify-token.md	必须在服务器端验证用户令牌
auth-access-check.md	在执行操作前必须检查访问级别
security-checklist.md	安全最佳实践清单
auth-headers.md	从请求头中提取令牌
auth-oauth.md	外部应用的 OAuth 认证
input-sanitization.md	XSS 预防

SDK 设置（关键）

规则	描述
sdk-setup.md	初始化 Whop SDK（必需）
sdk-iframe.md	客户端 iframe SDK

设计原则（建议）

规则	描述
app-design-principles.md	创始人关于应用成功的建议（用户需求优先）

支付（高优先级）

规则	描述
payments-checkout.md	创建结账流程
payments-webhooks.md	处理支付 Webhook
payments-transfers.md	向用户发送付款
payments-billing.md	账单门户和保存的支付方式

应用视图（高优先级）

规则	描述
views-structure.md	体验、仪表板、发现页面
views-routing.md	动态路由模式

会员与客户关系管理（高优先级）

规则	描述
api-memberships.md	会员资格和用户管理

用户界面与设计（中等优先级）

规则	描述
ui-frosted.md	毛玻璃用户界面组件
ui-dark-mode.md	深色模式处理
ui-tailwind.md	Tailwind CSS 设置

API 模式（中等优先级）

规则	描述
api-structure.md	API 路由模式
api-parallel.md	并行数据获取

存储与文件（中等优先级）

规则	描述
files-upload.md	Whop 原生文件存储

用户参与度（中等优先级）

规则	描述
notifications.md	推送通知
engagement-forums.md	论坛帖子和评论
engagement-chat.md	聊天消息

开发（低优先级）

规则	描述
dev-proxy.md	本地开发代理
dev-sandbox.md	沙盒测试

配套技能（生态系统）

规则	描述
companion-skills.md	安装并委托给专业技能

Whop 应用有三个入口点：

视图	路由	用途
体验	`/experiences/[experienceId]`	面向客户的用户界面
仪表板	`/dashboard/[companyId]`	管理员管理
发现	`/discover`	公共营销页面

@whop/sdk - 服务器端 API 客户端
@whop/react - React 钩子和毛玻璃用户界面

Next.js（App Router）
TypeScript
Tailwind CSS + 毛玻璃用户界面

数据库：推荐 Supabase，但任何数据库都可用
用户界面：毛玻璃用户界面、Shadcn、Radix - 任选其一

对于具有关联账户的市场：

Whop 开发者文档
API 参考
毛玻璃用户界面 Storybook
MCP 服务器：https://mcp.whop.com/mcp（Cursor）或 https://mcp.whop.com/sse（Claude）

遇到以下模式时，委托给配套技能：

模式	委托给
"设计"、"让它看起来好看"、"用户界面"、"组件"	→ `frontend-design`
"优化"、"性能"、"缓慢"、"打包"	→ `vercel-react-best-practices`
"数据库"、"查询"、"模式"、"索引"、"行级安全"	→ `supabase-postgres-best-practices`
"审查用户界面"、"可访问性"、"审计"	→ `web-design-guidelines`

完整交接指南请参阅 companion-skills.md。

🇺🇸English

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`

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

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:

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.

Weekly Installs

Repository

steve-cooks/skills

GitHub Stars

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubWarn SocketPass SnykWarn

Installed on

gemini-cli45

codex44

cursor43

opencode39

github-copilot39

claude-code37

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

166,500 周安装