react-modernization
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
saas-mvp-launcher
Use when planning or building a SaaS MVP from scratch. Provides a structured roadmap covering tech stack, architecture, auth, payments, and launch checklist.
Full skill instructions
This skill guides you through building a production-ready SaaS MVP in the shortest time possible. It covers everything from idea validation and tech stack selection to authentication, payments, database design, deployment, and launch — using modern, battle-tested tools.
Before writing any code, validate the idea:
Validation checklist:
- [ ] Can you describe the problem in one sentence?
- [ ] Who is the exact customer? (not "everyone")
- [ ] What do they pay for today to solve this?
- [ ] Have you talked to 5+ potential customers?
- [ ] Will they pay $X/month for your solution?
Rule: If you can't get 3 people to pre-pay or sign a letter of intent, don't build yet.
Recommended modern SaaS stack (2026):
| Layer | Choice | Why |
|---|---|---|
| Frontend | Next.js 15 + TypeScript | Full-stack, great DX, Vercel deploy |
| Styling | Tailwind CSS + shadcn/ui | Fast, accessible, customizable |
| Backend | Next.js API Routes or tRPC | Type-safe, co-located |
| Database | PostgreSQL via Supabase | Reliable, scalable, free tier |
| ORM | Prisma or Drizzle | Type-safe queries, migrations |
| Auth | Clerk or NextAuth.js | Social login, session management |
| Payments | Stripe | Industry standard, great docs |
| Resend + React Email | Modern, developer-friendly | |
| Deployment | Vercel (frontend) + Railway (backend) | Zero-config, fast CI/CD |
| Monitoring | Sentry + PostHog | Error tracking + analytics |
my-saas/
├── app/ # Next.js App Router
│ ├── (auth)/ # Auth routes (login, signup)
│ ├── (dashboard)/ # Protected app routes
│ ├── (marketing)/ # Public landing pages
│ └── api/ # API routes
├── components/
│ ├── ui/ # shadcn/ui components
│ └── [feature]/ # Feature-specific components
├── lib/
│ ├── db.ts # Database client (Prisma/Drizzle)
│ ├── stripe.ts # Stripe client
│ └── email.ts # Email client (Resend)
├── prisma/
│ └── schema.prisma # Database schema
├── .env.local # Environment variables
└── middleware.ts # Auth middleware
model User {
id String @id @default(cuid())
email String @unique
name String?
createdAt DateTime @default(now())
subscription Subscription?
workspaces WorkspaceMember[]
}
model Workspace {
id String @id @default(cuid())
name String
slug String @unique
plan Plan @default(FREE)
members WorkspaceMember[]
createdAt DateTime @default(now())
}
model Subscription {
id String @id @default(cuid())
userId String @unique
user User @relation(fields: [userId], references: [id])
stripeCustomerId String @unique
stripePriceId String
stripeSubId String @unique
status String # active, canceled, past_due
currentPeriodEnd DateTime
}
enum Plan {
FREE
PRO
ENTERPRISE
}
// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
const isPublicRoute = createRouteMatcher([
'/',
'/pricing',
'/blog(.*)',
'/sign-in(.*)',
'/sign-up(.*)',
'/api/webhooks(.*)',
]);
export default clerkMiddleware((auth, req) => {
if (!isPublicRoute(req)) {
auth().protect();
}
});
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};
// lib/stripe.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2025-01-27.acacia',
});
// Create checkout session
export async function createCheckoutSession(userId: string, priceId: string) {
return stripe.checkout.sessions.create({
mode: 'subscription',
payment_method_types: ['card'],
line_items: [{ price: priceId, quantity: 1 }],
success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?success=true`,
cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
metadata: { userId },
});
}
Technical:
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
You are a workflow automation expert specializing in creating efficient CI/CD pipelines, GitHub Actions workflows, and automated development processes. Design and implement automation that reduces man
Manage track lifecycle: archive, restore, delete, rename, and cleanup
Write efficient C code with proper memory management, pointer
Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync
Automate Mezmo tasks via Rube MCP (Composio). Always search tools first for current schemas.
Quick reference for fp-ts types. Use when user asks which type to use, needs Option/Either/Task decision help, or wants fp-ts imports.
Lightweight Google Calendar integration with standalone OAuth authentication. No MCP server required.
Master enterprise-grade Scala development with functional programming, distributed systems, and big data processing. Expert in Apache Pekko, Akka, Spark, ZIO/Cats Effect, and reactive architectures.
You are a Python project architecture expert specializing in scaffolding production-ready Python applications. Generate complete project structures with modern tooling (uv, FastAPI, Django), type hint
Automate Onedesk tasks via Rube MCP (Composio). Always search tools first for current schemas.
Automate Google Calendar tasks via Rube MCP (Composio). Always search tools first for current schemas.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience