skills.rest
24kchengYe
24kchengYeCOMMUNITY
Explore all skills by this author →
GitHub

fullstack-webapp

Guides phased development of Next.js SaaS applications from scaffolding to deployment and monetization.

542|28|Updated Mar 7, 2026
Search Tags:#vercel#Supabase#NextJS#fullstack#Deployment#Web development#saaS
One-click install
npx skills add https://github.com/24kchengYe/human-skill-tree --skill fullstack-webapp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-webapp
Source: https://github.com/24kchengYe/human-skill-tree/tree/main/skills/04-fullstack-webapp
Command: npx skills add https://github.com/24kchengYe/human-skill-tree --skill fullstack-webapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solo developers and indie hackers often get stuck turning an app idea into a deployed, monetized product because they lack a clear build order and production-tested architecture decisions. This Skill provides a phase-by-phase coaching workflow covering scaffolding, AI integration, auth, payments, i18n, deployment, and China accessibility.

Core Features & Use Cases

  • Phase-Based Development Plan: Enforces a 10-phase order (scaffolding → MVP → UI polish → Supabase persistence → auth → payments → i18n → deployment → Cloudflare China access → launch), with a deployable product after each phase.
  • Production Code Patterns: Provides working code for Vercel AI SDK streaming with OpenRouter, Supabase SSR auth with three client types, LemonSqueezy webhook verification, localStorage-to-cloud sync, and geo-detection middleware.
  • Pitfall Diagnosis: Documents real failure modes such as OpenRouter Responses API incompatibility, missing middleware session refresh, Cloudflare SSL misconfiguration, and Resend free-tier email limits.
  • Use Case: A solo developer wants to build an AI writing tool with subscriptions. The Skill walks them from create-next-app on day one to a deployed app with Google OAuth, LemonSqueezy payments, and a Cloudflare-proxied domain accessible in China within two weeks.

Quick Start

Ask the AI to act as a full-stack coach and create a phased build plan for your Next.js app idea, starting with project scaffolding and a first Vercel deployment.

Frequently Asked Questions about fullstack-webapp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build and deploy a Next.js SaaS app from scratch?▼

Follow a phase-based order: scaffold with create-next-app, build one MVP user flow with localStorage, then add Supabase persistence, auth, payments, and i18n in separate phases. Deploy to Vercel after every phase using npx vercel --prod rather than waiting until the end.

How do I add AI chat to a Next.js app with OpenRouter?▼

Use the Vercel AI SDK with createOpenAI configured with your OpenRouter key and baseURL, setting compatibility to "compatible". Call openai.chatModel(id) instead of openai(id), because the default Responses API is not supported by OpenRouter.

How do I make my Vercel site accessible in China without ICP filing?▼

Add a subdomain in Vercel, then create a Cloudflare CNAME record pointing to cname.vercel-dns.com with the proxy enabled. Set Cloudflare SSL/TLS mode to Full (strict), since Flexible causes infinite redirect loops.

Why does Supabase auth break on page refresh in Next.js?▼

Auth breaks when middleware does not refresh the session cookie. Implement an updateSession function in middleware that calls supabase.auth.getUser() and writes refreshed cookies to the response on every request.

How do I verify LemonSqueezy webhook signatures?▼

Compute an HMAC-SHA256 digest of the raw request body using your webhook secret and compare it to the x-signature header. Reject requests with a 401 status when the signatures do not match before processing any order events.

When should I use localStorage versus Supabase for user data?▼

Use localStorage for the MVP phase since it requires no backend, accounts, or database setup. Migrate to Supabase with a dual-write strategy once you add authentication, syncing data on login, logout, and periodic intervals.

Related Skills

Explore More Software Engineering Skills→
sparktech-aisparktech-ai
1

pm-prd

Generate Product Requirements Documents and user flow diagrams with phased implementation plans.

Official
Intermediate
NITRR-OfficialNITRR-Official
4

executing-marketing-campaigns

Automate marketing campaign planning, content creation, social media, email, and analytics.

Official
Advanced
skyasu2skyasu2
2

security-audit-workflow

Automate pre-deployment security audits for Next.js/Supabase CI pipelines.

Community
Advanced
kevindreekevindree

doubt-driven-development

Review decisions for risky assumptions using adversarial fresh-context analysis.

Community
Advanced