[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D6Z08VNDVMGD5STP1WGA8M":3,"skill-same:01M6D6Z08VNDVMGD5STP1WGA8M":47},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":20,"linkOnly":21,"markdownContent":22,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M6D6Z08VNDVMGD5STP1WGA8M","saas-scaffolder",null,"oabdelmaksoud\u002FSuperClaw","oabdelmaksoud","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50699149?v=4","01M6D5CVVN778ZCDP1WHS816SP","Omar Abdelmaksoud","01M6D5CW1RHNSKCJR85GJACBFT",2,"MIT","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fproduct-team\u002Fsaas-scaffolder\u002FSKILL.md",[],[18,19],"saas","saas scaffolder","2026-11-10 10:12:30",false,"# SaaS Scaffolder\n\n**Tier:** POWERFUL  \n**Category:** Product Team  \n**Domain:** Full-Stack Development \u002F Project Bootstrapping\n\n---\n\n## Overview\n\nGenerate complete, production-ready SaaS projects from a product brief. Outputs a fully wired Next.js App Router project with authentication, database, payments, and a working dashboard — not a toy starter kit.\n\n**Stack:** Next.js 14+ App Router · TypeScript · Tailwind CSS · shadcn\u002Fui  \n**Auth:** NextAuth.js \u002F Clerk \u002F Supabase Auth  \n**Database:** NeonDB \u002F Supabase \u002F PlanetScale (Drizzle ORM)  \n**Payments:** Stripe \u002F Lemon Squeezy  \n\n---\n\n## Core Capabilities\n\n- Generate full project file tree with all boilerplate written\n- Wire auth, DB, and payments together from day one\n- Output landing page, auth flow, dashboard layout, API routes, DB schema\n- Produce environment variable templates and deployment configs\n- Generate a scaffold checklist to track completion\n\n---\n\n## When to Use\n\n- Starting a new SaaS from a product idea or brief\n- Standardizing project structure across a team\n- Rapidly prototyping to validate before committing to architecture\n- Onboarding engineers to a consistent codebase pattern\n\n---\n\n## Triggering This Skill\n\nProvide a product brief in this format:\n\n```\nProduct: [name]\nDescription: [1-3 sentences]\nAuth: nextauth | clerk | supabase\nDatabase: neondb | supabase | planetscale\nPayments: stripe | lemonsqueezy | none\nFeatures: [comma-separated list]\n```\n\n---\n\n## File Tree Output\n\n```\nmy-saas\u002F\n├── app\u002F\n│   ├── (auth)\u002F\n│   │   ├── login\u002Fpage.tsx\n│   │   ├── register\u002Fpage.tsx\n│   │   └── layout.tsx\n│   ├── (dashboard)\u002F\n│   │   ├── dashboard\u002Fpage.tsx\n│   │   ├── settings\u002Fpage.tsx\n│   │   ├── billing\u002Fpage.tsx\n│   │   └── layout.tsx\n│   ├── (marketing)\u002F\n│   │   ├── page.tsx\n│   │   ├── pricing\u002Fpage.tsx\n│   │   └── layout.tsx\n│   ├── api\u002F\n│   │   ├── auth\u002F[...nextauth]\u002Froute.ts\n│   │   ├── webhooks\u002Fstripe\u002Froute.ts\n│   │   ├── billing\u002Fcheckout\u002Froute.ts\n│   │   └── billing\u002Fportal\u002Froute.ts\n│   └── layout.tsx\n├── components\u002F\n│   ├── ui\u002F\n│   ├── auth\u002F\n│   │   ├── login-form.tsx\n│   │   └── register-form.tsx\n│   ├── dashboard\u002F\n│   │   ├── sidebar.tsx\n│   │   ├── header.tsx\n│   │   └── stats-card.tsx\n│   ├── marketing\u002F\n│   │   ├── hero.tsx\n│   │   ├── features.tsx\n│   │   ├── pricing.tsx\n│   │   └── footer.tsx\n│   └── billing\u002F\n│       ├── plan-card.tsx\n│       └── usage-meter.tsx\n├── lib\u002F\n│   ├── auth.ts\n│   ├── db.ts\n│   ├── stripe.ts\n│   ├── validations.ts\n│   └── utils.ts\n├── db\u002F\n│   ├── schema.ts\n│   └── migrations\u002F\n├── hooks\u002F\n│   ├── use-subscription.ts\n│   └── use-user.ts\n├── types\u002Findex.ts\n├── middleware.ts\n├── .env.example\n├── drizzle.config.ts\n└── next.config.ts\n```\n\n---\n\n## Key Component Patterns\n\n### Auth Config (NextAuth)\n\n```typescript\n\u002F\u002F lib\u002Fauth.ts\nimport { NextAuthOptions } from \"next-auth\"\nimport GoogleProvider from \"next-auth\u002Fproviders\u002Fgoogle\"\nimport { DrizzleAdapter } from \"@auth\u002Fdrizzle-adapter\"\nimport { db } from \".\u002Fdb\"\n\nexport const authOptions: NextAuthOptions = {\n  adapter: DrizzleAdapter(db),\n  providers: [\n    GoogleProvider({\n      clientId: process.env.GOOGLE_CLIENT_ID!,\n      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,\n    }),\n  ],\n  callbacks: {\n    session: async ({ session, user }) => ({\n      ...session,\n      user: {\n        ...session.user,\n        id: user.id,\n        subscriptionStatus: user.subscriptionStatus,\n      },\n    }),\n  },\n  pages: { signIn: \"\u002Flogin\" },\n}\n```\n\n### Database Schema (Drizzle + NeonDB)\n\n```typescript\n\u002F\u002F db\u002Fschema.ts\nimport { pgTable, text, timestamp, integer } from \"drizzle-orm\u002Fpg-core\"\n\nexport const users = pgTable(\"users\", {\n  id: text(\"id\").primaryKey().$defaultFn(() => crypto.randomUUID()),\n  name: text(\"name\"),\n  email: text(\"email\").notNull().unique(),\n  emailVerified: timestamp(\"emailVerified\"),\n  image: text(\"image\"),\n  stripeCustomerId: text(\"stripe_customer_id\").unique(),\n  stripeSubscriptionId: text(\"stripe_subscription_id\"),\n  stripePriceId: text(\"stripe_price_id\"),\n  stripeCurrentPeriodEnd: timestamp(\"stripe_current_period_end\"),\n  createdAt: timestamp(\"created_at\").defaultNow().notNull(),\n})\n\nexport const accounts = pgTable(\"accounts\", {\n  userId: text(\"user_id\").notNull().references(() => users.id, { onDelete: \"cascade\" }),\n  type: text(\"type\").notNull(),\n  provider: text(\"provider\").notNull(),\n  providerAccountId: text(\"provider_account_id\").notNull(),\n  refresh_token: text(\"refresh_token\"),\n  access_token: text(\"access_token\"),\n  expires_at: integer(\"expires_at\"),\n})\n```\n\n### Stripe Checkout Route\n\n```typescript\n\u002F\u002F app\u002Fapi\u002Fbilling\u002Fcheckout\u002Froute.ts\nimport { NextResponse } from \"next\u002Fserver\"\nimport { getServerSession } from \"next-auth\"\nimport { authOptions } from \"@\u002Flib\u002Fauth\"\nimport { stripe } from \"@\u002Flib\u002Fstripe\"\nimport { db } from \"@\u002Flib\u002Fdb\"\nimport { users } from \"@\u002Fdb\u002Fschema\"\nimport { eq } from \"drizzle-orm\"\n\nexport async function POST(req: Request) {\n  const session = await getServerSession(authOptions)\n  if (!session?.user) return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n\n  const { priceId } = await req.json()\n  const [user] = await db.select().from(users).where(eq(users.id, session.user.id))\n\n  let customerId = user.stripeCustomerId\n  if (!customerId) {\n    const customer = await stripe.customers.create({ email: session.user.email! })\n    customerId = customer.id\n    await db.update(users).set({ stripeCustomerId: customerId }).where(eq(users.id, user.id))\n  }\n\n  const checkoutSession = await stripe.checkout.sessions.create({\n    customer: customerId,\n    mode: \"subscription\",\n    payment_method_types: [\"card\"],\n    line_items: [{ price: priceId, quantity: 1 }],\n    success_url: `${process.env.NEXT_PUBLIC_APP_URL}\u002Fdashboard?upgraded=true`,\n    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}\u002Fpricing`,\n    subscription_data: { trial_period_days: 14 },\n  })\n\n  return NextResponse.json({ url: checkoutSession.url })\n}\n```\n\n### Protected Dashboard Layout\n\n```typescript\n\u002F\u002F app\u002F(dashboard)\u002Flayout.tsx\nimport { redirect } from \"next\u002Fnavigation\"\nimport { getServerSession } from \"next-auth\"\nimport { authOptions } from \"@\u002Flib\u002Fauth\"\nimport { Sidebar } from \"@\u002Fcomponents\u002Fdashboard\u002Fsidebar\"\n\nexport default async function DashboardLayout({ children }: { children: React.ReactNode }) {\n  const session = await getServerSession(authOptions)\n  if (!session) redirect(\"\u002Flogin\")\n\n  return (\n    \u003Cdiv className=\"flex h-screen\">\n      \u003CSidebar user={session.user} \u002F>\n      \u003Cmain className=\"flex-1 overflow-y-auto bg-gray-50 p-6\">{children}\u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Middleware\n\n```typescript\n\u002F\u002F middleware.ts\nimport { withAuth } from \"next-auth\u002Fmiddleware\"\nimport { NextResponse } from \"next\u002Fserver\"\n\nexport default withAuth(\n  function middleware(req) {\n    const token = req.nextauth.token\n    if (req.nextUrl.pathname.startsWith(\"\u002Fdashboard\") && !token) {\n      return NextResponse.redirect(new URL(\"\u002Flogin\", req.url))\n    }\n  },\n  { callbacks: { authorized: ({ token }) => !!token } }\n)\n\nexport const config = {\n  matcher: [\"\u002Fdashboard\u002F:path*\", \"\u002Fsettings\u002F:path*\", \"\u002Fbilling\u002F:path*\"],\n}\n```\n\n### Environment Variables Template\n\n```bash\n# .env.example\nNEXT_PUBLIC_APP_URL=http:\u002F\u002Flocalhost:3000\nDATABASE_URL=postgresql:\u002F\u002Fuser:pass@ep-xxx.us-east-1.aws.neon.tech\u002Fneondb?sslmode=require\nNEXTAUTH_SECRET=generate-with-openssl-rand-base64-32\nNEXTAUTH_URL=http:\u002F\u002Flocalhost:3000\nGOOGLE_CLIENT_ID=\nGOOGLE_CLIENT_SECRET=\nSTRIPE_SECRET_KEY=sk_test_...\nSTRIPE_WEBHOOK_SECRET=whsec_...\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...\nSTRIPE_PRO_PRICE_ID=price_...\n```\n\n---\n\n## Scaffold Checklist (25 Items)\n\n### Foundation\n- [ ] 1. Next.js initialized with TypeScript and App Router\n- [ ] 2. Tailwind CSS configured with custom theme tokens\n- [ ] 3. shadcn\u002Fui installed and configured\n- [ ] 4. ESLint + Prettier configured\n- [ ] 5. `.env.example` created with all required variables\n\n### Database\n- [ ] 6. Drizzle ORM installed and configured\n- [ ] 7. Schema written (users, accounts, sessions, verification_tokens)\n- [ ] 8. Initial migration generated and applied\n- [ ] 9. DB client singleton exported from `lib\u002Fdb.ts`\n- [ ] 10. DB connection tested in local environment\n\n### Authentication\n- [ ] 11. Auth provider installed (NextAuth \u002F Clerk \u002F Supabase)\n- [ ] 12. OAuth provider configured (Google \u002F GitHub)\n- [ ] 13. Auth API route created\n- [ ] 14. Session callback adds user ID and subscription status\n- [ ] 15. Middleware protects dashboard routes\n- [ ] 16. Login and register pages built with error states\n\n### Payments\n- [ ] 17. Stripe client initialized with TypeScript types\n- [ ] 18. Checkout session route created\n- [ ] 19. Customer portal route created\n- [ ] 20. Stripe webhook handler with signature verification\n- [ ] 21. Webhook updates user subscription status in DB idempotently\n\n### UI\n- [ ] 22. Landing page with hero, features, pricing sections\n- [ ] 23. Dashboard layout with sidebar and responsive header\n- [ ] 24. Billing page showing current plan and upgrade options\n- [ ] 25. Settings page with profile update form and success states\n\n---\n\n## Customization Points\n\n| Point | Options |\n|---|---|\n| Auth provider | nextauth, clerk, supabase-auth |\n| Database | neondb, supabase-pg, planetscale |\n| ORM | drizzle (default), prisma |\n| Payment provider | stripe, lemonsqueezy |\n| UI theme | default, zinc, slate, rose |\n| Billing model | per-seat, flat-rate, usage-based |\n\n---\n\n## Common Pitfalls\n\n- **Missing NEXTAUTH_SECRET** — causes random sign-out loops in production\n- **Webhook secret mismatch** — use `stripe listen --forward-to` locally, never hardcode raw secret\n- **Edge runtime conflicts** — Drizzle needs Node.js runtime; set `export const runtime = \"nodejs\"` on API routes\n- **Session type not extended** — add `declare module \"next-auth\"` to include custom fields\n- **Drizzle migrations in CI** — use `drizzle-kit push` for dev, `drizzle-kit migrate` for prod\n\n---\n\n## Best Practices\n\n- Always create a `lib\u002Fstripe.ts` singleton — never instantiate Stripe inline in route handlers\n- Use server actions for form mutations, not client-side fetch where avoidable\n- Keep webhook handlers idempotent — check DB state before writing\n- Add `Suspense` boundaries around dashboard async data fetches\n- Store `stripeCurrentPeriodEnd` in DB and check it server-side for all feature gating\n- Ship with rate limiting on auth routes from day one (use Upstash Redis + `@upstash\u002Fratelimit`)\n",{},"main","7b610356e36623652299fa2acb477ff821b1d920","upstream-import\u002Fclaude-skills\u002Freferences\u002Fproduct-team\u002Fsaas-scaffolder",0,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fo-abdelmaksoud\u002F","Full-Stack Engineer | AI Systems Architect | Building autonomous multi-agent systems","2026-03-08 21:12:53",{"source":7,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add oabdelmaksoud\u002FSuperClaw --skill saas-scaffolder",{"tool":39,"command":40},"bunx","bunx skills add oabdelmaksoud\u002FSuperClaw --skill saas-scaffolder",{"tool":42,"command":43},"pnpm","pnpm dlx skills add oabdelmaksoud\u002FSuperClaw --skill saas-scaffolder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fproduct-team\u002Fsaas-scaffolder\u002FSKILL.md",true,[],[48,69,83,114,140,159],{"skillNo":49,"name":50,"nameZh":6,"description":51,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":59,"publishedAt":20},"01M6D88QCPTBZVCRED0NZ1Y8K8","visa-doc-translate","Translate visa application documents (images) to English and create a bilingual PDF with original and translation","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fvisa-doc-translate\u002FSKILL.md",[54],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},"01JBSEEDCAT000000000000002","文档处理","SCENARIO","使用场景",[60,61,62,63,64,65,66,67,68],"translate","doc","visa doc translate","translation","application","create","images","PDF","documents",{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":20},"01M6D88NBM95T3TFM50CYYAP65","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[76,77,78,79,80,81,82],"verification","loop","verification loop","sessions","code","claude code sessions","system",{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":100,"publishedAt":20},"01M6D88JFZ2P996GVRHJNSZSTM","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[89,92,95],{"categoryNo":90,"categoryName":91,"taxonomyType":57,"taxonomyTypeDesc":58},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":93,"categoryName":94,"taxonomyType":57,"taxonomyTypeDesc":58},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[101,102,103,104,105,106,80,107,108,109,110,111,112,113],"tdd","workflow","tdd workflow","e2e tests","e2e","integration","development","use","test","refactoring","coverage","tests","writing",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":20},"01M6D88FTHRRSVJMXF2G7MQAK3","swiftui-patterns","SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswiftui-patterns\u002FSKILL.md",[],[121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139],"patterns","swiftui","swiftui patterns","architecture","macos","performance","state management","best practices","state","ui","Optimization","ios","architecture patterns","Composition","performance optimization","view","management","swiftui architecture","navigation",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":147,"publishedAt":20},"01M6D88D527QTQT9DKHTRFN6EA","swift-protocol-di-testing","Protocol-based dependency injection for testable Swift code — mock file system, network, and external APIs using focused protocols and Swift Testing.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-protocol-di-testing\u002FSKILL.md",[146],{"categoryNo":90,"categoryName":91,"taxonomyType":57,"taxonomyTypeDesc":58},[148,149,150,151,80,152,153,154,155,82,156,157,158],"swift protocol di testing","protocol","swift","testing","protocols","file","network","injection","dependency","swift testing","dependency injection",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":165,"publishedAt":20},"01M6D88AJW8H2QNWSW5ZY82R43","swift-concurrency-6-2","Swift 6.2 Approachable Concurrency — single-threaded by default, @concurrent for explicit background offloading, isolated conformances for main actor types.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-concurrency-6-2\u002FSKILL.md",[],[166,167,150,168,169,24],"concurrency","swift concurrency","swift concurrency 6 2","default"]