create-skit 0.1.0

package/modules/dashboard-shell/files/src/app/settings/page.tsx

@@ -0,0 +1,67 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth-session";
+
+export default async function SettingsPage() {
+  const session = await getSession();
+
+  if (!session) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <main className="dashboard">
+      <aside className="sidebar">
+        <div>
+          <p className="brand">Skit</p>
+          <h1 className="workspace-title">Settings</h1>
+          <p className="workspace-subtitle">
+            Manage your account, notifications, and workspace preferences.
+          </p>
+        </div>
+
+        <div className="sidebar-section">
+          <p className="sidebar-label">Signed in as</p>
+          <div className="pill">
+            <span className="status-dot" />
+            {session.user.email}
+          </div>
+        </div>
+
+        <div className="sidebar-spacer" />
+      </aside>
+
+      <section className="content">
+        <div className="settings-grid">
+          <article className="settings-card">
+            <p className="eyebrow">Profile</p>
+            <h2>Identity and session</h2>
+            <p>
+              Better Auth is wired in. Add avatar upload, password rotation, and audit
+              log surfaces here without changing the route structure later.
+            </p>
+          </article>
+
+          <article className="settings-card">
+            <p className="eyebrow">Billing</p>
+            <h2>Plan and seat management</h2>
+            <p>
+              This is the natural place for subscription state, invoices, and workspace
+              access management once billing moves past the starter baseline.
+            </p>
+          </article>
+
+          <article className="settings-card settings-card-wide">
+            <p className="eyebrow">Ops note</p>
+            <h2>Keep settings boring and reliable</h2>
+            <p>
+              The page is intentionally structured as stable product infrastructure rather
+              than visual filler. Add account, organization, and compliance controls here
+              as real features land.
+            </p>
+          </article>
+        </div>
+      </section>
+    </main>
+  );
+}

package/modules/dashboard-shell/module.json

@@ -0,0 +1,11 @@
+{
+  "name": "dashboard-shell",
+  "kind": "ui",
+  "description": "Dashboard-oriented app shell and example UI.",
+  "dependsOn": ["auth-core", "testing-baseline"],
+  "conflictsWith": [],
+  "replaces": [],
+  "template": {
+    "copyFiles": ["src/app/globals.css", "src/app/settings/page.tsx"]
+  }
+}

package/modules/db-pg/module.json

@@ -0,0 +1,21 @@
+{
+  "name": "db-pg",
+  "kind": "database",
+  "description": "Drizzle ORM with node-postgres.",
+  "dependsOn": ["quality-baseline"],
+  "conflictsWith": ["db-postgresjs"],
+  "replaces": [],
+  "template": {
+    "tokenReplacements": {
+      "__DATABASE_DRIVER__": "pg",
+      "__DATABASE_DEPENDENCIES__": "    \"pg\": \"8.16.x\",",
+      "__DATABASE_DEV_DEPENDENCIES__": "    \"@types/pg\": \"^8.15.5\",",
+      "__DRIZZLE_DRIVER_IMPORT__": "drizzle-orm/node-postgres",
+      "__DATABASE_CLIENT_IMPORT__": "import { Pool } from \"pg\";",
+      "__DATABASE_GLOBAL_BLOCK__": "const globalForDb = globalThis as typeof globalThis & {\n  __pandaPool?: Pool;\n};",
+      "__DATABASE_CLIENT_EXPRESSION__": "globalForDb.__pandaPool ??\n  new Pool({\n    connectionString: env.DATABASE_URL\n  })",
+      "__DATABASE_DEV_CACHE__": "  globalForDb.__pandaPool = client;",
+      "__DATABASE_DRIZZLE_EXPRESSION__": "drizzle({\n  client\n})"
+    }
+  }
+}

package/modules/db-postgresjs/module.json

@@ -0,0 +1,21 @@
+{
+  "name": "db-postgresjs",
+  "kind": "database",
+  "description": "Drizzle ORM with postgres.js.",
+  "dependsOn": ["quality-baseline"],
+  "conflictsWith": ["db-pg"],
+  "replaces": [],
+  "template": {
+    "tokenReplacements": {
+      "__DATABASE_DRIVER__": "postgres.js",
+      "__DATABASE_DEPENDENCIES__": "    \"postgres\": \"^3.4.7\",",
+      "__DATABASE_DEV_DEPENDENCIES__": "",
+      "__DRIZZLE_DRIVER_IMPORT__": "drizzle-orm/postgres-js",
+      "__DATABASE_CLIENT_IMPORT__": "import postgres from \"postgres\";",
+      "__DATABASE_GLOBAL_BLOCK__": "const globalForDb = globalThis as typeof globalThis & {\n  __pandaClient?: ReturnType<typeof postgres>;\n};",
+      "__DATABASE_CLIENT_EXPRESSION__": "globalForDb.__pandaClient ??\n  postgres(env.DATABASE_URL, {\n    prepare: false\n  })",
+      "__DATABASE_DEV_CACHE__": "  globalForDb.__pandaClient = client;",
+      "__DATABASE_DRIZZLE_EXPRESSION__": "drizzle(client)"
+    }
+  }
+}

package/modules/deploy-docker/files/.dockerignore

@@ -0,0 +1,19 @@
+.git
+.github
+.husky
+.next
+.turbo
+.tmp
+coverage
+node_modules
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+playwright-report
+test-results
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

package/modules/deploy-docker/files/Dockerfile

@@ -0,0 +1,25 @@
+FROM __DOCKER_BASE_IMAGE__ AS deps
+WORKDIR /app
+COPY package.json ./
+COPY tsconfig.json ./
+COPY next.config.ts ./
+COPY eslint.config.mjs ./
+COPY prettier.config.mjs ./
+COPY playwright.config.ts ./
+COPY vitest.config.ts ./
+COPY drizzle.config.ts ./
+COPY . .
+__DOCKER_SETUP__
+RUN __DOCKER_INSTALL_COMMAND__
+
+FROM deps AS builder
+WORKDIR /app
+RUN __DOCKER_BUILD_COMMAND__
+
+FROM __DOCKER_BASE_IMAGE__ AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app ./
+__DOCKER_SETUP__
+EXPOSE 3000
+CMD ["/bin/sh", "-c", "__DOCKER_START_COMMAND__"]

package/modules/deploy-docker/module.json

@@ -0,0 +1,11 @@
+{
+  "name": "deploy-docker",
+  "kind": "deploy",
+  "description": "Docker deployment baseline with Dockerfile and .dockerignore.",
+  "dependsOn": ["quality-baseline"],
+  "conflictsWith": [],
+  "replaces": [],
+  "template": {
+    "copyFiles": ["Dockerfile", ".dockerignore"]
+  }
+}

package/modules/email-resend/module.json

@@ -0,0 +1,21 @@
+{
+  "name": "email-resend",
+  "kind": "email",
+  "description": "Resend transactional email integration.",
+  "dependsOn": ["auth-core"],
+  "conflictsWith": [],
+  "replaces": [],
+  "template": {
+    "emailProvider": "resend",
+    "packageDependencies": [
+      "    \"resend\": \"6.0.3\","
+    ],
+    "email": {
+      "imports": [
+        "import { Resend } from \"resend\";"
+      ],
+      "setup": "let resendClient: Resend | null = null;\n\nfunction getEmailClient() {\n  if (!env.RESEND_API_KEY) {\n    throw new Error(\"RESEND_API_KEY is required for email sending.\");\n  }\n\n  resendClient ??= new Resend(env.RESEND_API_KEY);\n  return resendClient;\n}",
+      "sendImplementation": "  const resend = getEmailClient();\n\n  return resend.emails.send({\n    from: getFromAddress(),\n    to: input.to,\n    subject: input.template.subject,\n    text: input.template.text,\n    html: input.template.html\n  });"
+    }
+  }
+}

package/modules/quality-baseline/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "quality-baseline",
+  "kind": "developer-experience",
+  "description": "ESLint, Prettier, Husky, and repo quality defaults.",
+  "dependsOn": [],
+  "conflictsWith": [],
+  "replaces": []
+}

package/modules/testing-baseline/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "testing-baseline",
+  "kind": "developer-experience",
+  "description": "Vitest, Playwright, and CI testing defaults.",
+  "dependsOn": ["quality-baseline"],
+  "conflictsWith": [],
+  "replaces": []
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-skit",
+  "version": "0.1.0",
+  "description": "Opinionated SaaS starter CLI for Next.js 16.",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "create-skit": "./bin/create-skit.mjs"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "modules",
+    "presets",
+    "templates",
+    "README.md"
+  ],
+  "keywords": [
+    "nextjs",
+    "starter",
+    "saas",
+    "cli",
+    "scaffold"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jocage/skit.git",
+    "directory": "apps/cli"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/jocage/skit",
+  "bugs": {
+    "url": "https://github.com/jocage/skit/issues"
+  },
+  "scripts": {
+    "prepack": "node ../../scripts/sync-cli-package-assets.mjs"
+  }
+}

package/presets/README.md

@@ -0,0 +1,12 @@
+# Presets
+
+Presets are curated bundles of modules.
+
+Current presets:
+
+- `blank`
+- `dashboard`
+
+For now, the CLI still copies the matching verified template, but preset resolution already determines the module manifest written into generated apps.
+
+Each preset now also tracks its `overrideFiles` relative to `templates/base-web`, which makes the shared-vs-specific boundary explicit before full preset assembly is introduced.

package/presets/blank.json

@@ -0,0 +1,67 @@
+{
+  "name": "blank",
+  "base": "base-web",
+  "template": "blank",
+  "tokenReplacements": {
+    "__TEMPLATE_NAME__": "blank",
+    "__AUTH_PROVIDER_ENV_EXAMPLE__": "",
+    "__AUTH_PROVIDER_ENV_SCHEMA__": "",
+    "__AUTH_PROVIDER_ENV_VALUES__": "",
+    "__AUTH_SOCIAL_PROVIDERS_BLOCK__": "",
+    "__AUTH_SOCIAL_BUTTON_HANDLER__": "",
+    "__AUTH_SOCIAL_BUTTON__": "",
+    "__AUTH_SOCIAL_TEST_ASSERTION__": "",
+    "__AUTH_SCREEN_CLASS__": "shell auth-shell",
+    "__AUTH_PANEL_CLASS__": "auth-card",
+    "__SIGN_OUT_BUTTON_CLASS__": "subtle-button",
+    "__AUTH_FORM_CLASS__": "auth-card",
+    "__AUTH_FORM_COPY_CLASS__": "auth-copy",
+    "__AUTH_FORM_FIELDS_CLASS__": "auth-fields",
+    "__AUTH_FORM_SIGN_IN_EYEBROW__": "Welcome back",
+    "__AUTH_FORM_SIGN_IN_HEADING__": "Sign in to your workspace",
+    "__AUTH_FORM_SIGN_IN_LEDE__": "Use your email and password to continue into the starter app shell.",
+    "__AUTH_FORM_SIGN_UP_HEADING__": "Create your account",
+    "__AUTH_FORM_SIGN_UP_LEDE__": "Start from a minimal SaaS baseline with auth, billing, and strong project structure.",
+    "__AUTH_FORM_TEST_MODE__": "sign-in",
+    "__AUTH_FORM_TEST_HEADING__": "sign in to your workspace",
+    "__AUTH_FORM_TEST_LABEL__": "email",
+    "__EMAIL_TEMPLATE_TEST_IMPORT__": "createWelcomeEmailTemplate",
+    "__EMAIL_TEMPLATE_TEST_SUITE__": "createWelcomeEmailTemplate",
+    "__EMAIL_TEMPLATE_TEST_CASE__": "includes the app name in the subject",
+    "__EMAIL_TEMPLATE_TEST_FACTORY__": "createWelcomeEmailTemplate({\n      appName: \"Skit\",\n      recipientName: \"Ada\"\n    })",
+    "__EMAIL_TEMPLATE_EXPECT_SUBJECT__": "Skit",
+    "__EMAIL_TEMPLATE_EXPECT_TEXT__": "Ada",
+    "__PROTECTED_ROUTE_CONDITION__": "pathname.startsWith(\"/dashboard\") ||\n      pathname.startsWith(\"/billing\") ||\n      pathname.startsWith(\"/email\")",
+    "__PROTECTED_ROUTE_MATCHERS__": "\"/dashboard/:path*\", \"/billing/:path*\", \"/email/:path*\"",
+    "__README_STATE_COPY__": "initial minimal shell for the starter",
+    "__README_HIGHLIGHT_BULLET__": "simple polished landing screen",
+    "__README_PROTECTED_ROUTES_BULLET__": "protected `/dashboard` route and auth handler",
+    "__HOME_MAIN_CLASS__": "shell",
+    "__HOME_SECTION_CLASS__": "hero",
+    "__HOME_HEADING__": "Your SaaS starts here.",
+    "__HOME_LEDE__": "Auth, database, billing, email — pre-wired and ready. Extend the blank baseline with real product features instead of rebuilding infrastructure.",
+    "__HOME_PAGE_CONTENT__": "(\n    <>\n      <header className=\"blank-header\">\n        <span className=\"blank-logo\">__PROJECT_NAME__</span>\n        <nav className=\"blank-nav\">\n          <Link href=\"/sign-in\">Sign in</Link>\n          <Link href=\"/sign-up\" className=\"blank-nav-cta\">Get started</Link>\n        </nav>\n      </header>\n      <main className=\"shell\">\n        <section className=\"hero\">\n          <p className=\"eyebrow\">Skit</p>\n          <h1>Your SaaS starts here.</h1>\n          <p className=\"lede\">\n            Auth, database, billing, email — pre-wired and ready.\n            Extend the blank baseline with real product features.\n          </p>\n          <div className=\"hero-actions\">\n            <Link href=\"/sign-up\">Create account</Link>\n            <Link href=\"/dashboard\">Open dashboard</Link>\n          </div>\n        </section>\n      </main>\n    </>\n  )",
+    "__BILLING_REDIRECT_IMPORT__": "import { redirect } from \"next/navigation\";\n",
+    "__BILLING_SESSION_SETUP__": "",
+    "__BILLING_AUTH_GUARD__": "  if (!session) {\n    redirect(\"/sign-in\");\n  }",
+    "__BILLING_DEMO_BANNER__": "",
+    "__BILLING_PROVIDER_CARD__": "              <form\n                key={provider}\n                action=\"/api/billing/checkout\"\n                method=\"post\"\n                className=\"billing-card\"\n              >\n                <input type=\"hidden\" name=\"provider\" value={provider} />\n                <h2>{provider === \"stripe\" ? \"Stripe\" : \"Polar\"}</h2>\n                <p>\n                  {provider === \"stripe\"\n                    ? \"Create a subscription checkout session using the configured Stripe price.\"\n                    : \"Create a Polar checkout session using the configured product identifier.\"}\n                </p>\n                <button type=\"submit\" className=\"auth-button\">\n                  {provider === \"stripe\" ? \"Start Stripe checkout\" : \"Start Polar checkout\"}\n                </button>\n              </form>",
+    "__EMAIL_REDIRECT_IMPORT__": "import { redirect } from \"next/navigation\";\n",
+    "__EMAIL_SESSION_SETUP__": "",
+    "__EMAIL_AUTH_GUARD__": "  if (!session) {\n    redirect(\"/sign-in\");\n  }\n\n  const displayEmailRecipient = session.user.email;\n  const emailSendingDisabled = false;",
+    "__EMAIL_DEMO_BANNER__": "",
+    "__DASHBOARD_REDIRECT_IMPORT__": "import { redirect } from \"next/navigation\";\n",
+    "__DASHBOARD_SESSION_SETUP__": "",
+    "__DASHBOARD_AUTH_GUARD__": "  if (!session) {\n    redirect(\"/sign-in\");\n  }",
+    "__DASHBOARD_PAGE_PRELUDE__": "",
+    "__DASHBOARD_PAGE_CONTENT__": "(\n    <main className=\"shell\">\n      <section className=\"hero\">\n        <p className=\"eyebrow\">Protected area</p>\n        <h1>Hello {session.user.name ?? session.user.email}</h1>\n        <p className=\"lede\">\n          This is the first protected route in the blank starter. It proves the auth\n          flow, route guarding, and session wiring are in place.\n        </p>\n        <div className=\"hero-actions\">\n          <Link href=\"/\">Go home</Link>\n          <Link href=\"/billing\">Billing</Link>\n          <Link href=\"/email\">Email</Link>\n          <SignOutButton />\n        </div>\n      </section>\n    </main>\n  )",
+    "__HOME_E2E_TEST_NAME__": "home page renders starter links",
+    "__HOME_E2E_HEADING__": "your saas starts here",
+    "__HOME_E2E_LINK__": "create account",
+    "__AUTH_LLMS_EXTRA__": "",
+    "__BILLING_LLMS_LINE__": "Stripe / Polar billing (provider abstraction)",
+    "__EMAIL_LLMS_LINE__": "Resend transactional email"
+  },
+  "overrideFiles": [],
+  "modules": ["quality-baseline", "testing-baseline", "auth-core"]
+}

package/presets/dashboard.json

@@ -0,0 +1,67 @@
+{
+  "name": "dashboard",
+  "base": "base-web",
+  "template": "dashboard",
+  "tokenReplacements": {
+    "__TEMPLATE_NAME__": "dashboard",
+    "__AUTH_PROVIDER_ENV_EXAMPLE__": "",
+    "__AUTH_PROVIDER_ENV_SCHEMA__": "",
+    "__AUTH_PROVIDER_ENV_VALUES__": "",
+    "__AUTH_SOCIAL_PROVIDERS_BLOCK__": "",
+    "__AUTH_SOCIAL_BUTTON_HANDLER__": "",
+    "__AUTH_SOCIAL_BUTTON__": "",
+    "__AUTH_SOCIAL_TEST_ASSERTION__": "",
+    "__AUTH_SCREEN_CLASS__": "auth-screen",
+    "__AUTH_PANEL_CLASS__": "auth-panel",
+    "__SIGN_OUT_BUTTON_CLASS__": "ghost-button",
+    "__AUTH_FORM_CLASS__": "auth-panel",
+    "__AUTH_FORM_COPY_CLASS__": "",
+    "__AUTH_FORM_FIELDS_CLASS__": "auth-grid",
+    "__AUTH_FORM_SIGN_IN_EYEBROW__": "Access dashboard",
+    "__AUTH_FORM_SIGN_IN_HEADING__": "Sign in",
+    "__AUTH_FORM_SIGN_IN_LEDE__": "Use your email and password to continue into the app.",
+    "__AUTH_FORM_SIGN_UP_HEADING__": "Create your operator account",
+    "__AUTH_FORM_SIGN_UP_LEDE__": "Create an account to access the protected dashboard shell.",
+    "__AUTH_FORM_TEST_MODE__": "sign-up",
+    "__AUTH_FORM_TEST_HEADING__": "create your operator account",
+    "__AUTH_FORM_TEST_LABEL__": "password",
+    "__EMAIL_TEMPLATE_TEST_IMPORT__": "createBillingUpdatePlaceholderTemplate",
+    "__EMAIL_TEMPLATE_TEST_SUITE__": "createBillingUpdatePlaceholderTemplate",
+    "__EMAIL_TEMPLATE_TEST_CASE__": "mentions the billing provider",
+    "__EMAIL_TEMPLATE_TEST_FACTORY__": "createBillingUpdatePlaceholderTemplate({\n      appName: \"Skit\",\n      provider: \"stripe\"\n    })",
+    "__EMAIL_TEMPLATE_EXPECT_SUBJECT__": "billing",
+    "__EMAIL_TEMPLATE_EXPECT_TEXT__": "stripe",
+    "__PROTECTED_ROUTE_CONDITION__": "pathname.startsWith(\"/settings\") ||\n      pathname.startsWith(\"/billing\") ||\n      pathname.startsWith(\"/email\")",
+    "__PROTECTED_ROUTE_MATCHERS__": "\"/settings/:path*\", \"/billing/:path*\", \"/email/:path*\"",
+    "__README_STATE_COPY__": "initial dashboard-oriented shell for the starter",
+    "__README_HIGHLIGHT_BULLET__": "modern SaaS marketing page plus public demo dashboard shell",
+    "__README_PROTECTED_ROUTES_BULLET__": "public demo `/dashboard` plus protected account surfaces like `/settings`, `/billing`, and `/email`",
+    "__HOME_MAIN_CLASS__": "landing",
+    "__HOME_SECTION_CLASS__": "landing-panel",
+    "__HOME_HEADING__": "Launch faster with a modular SaaS base.",
+    "__HOME_LEDE__": "This template now ships with a public demo dashboard, Better Auth wiring, database scaffolding, and the first product surfaces already in place.",
+    "__HOME_PAGE_CONTENT__": "(\n    <main className=\"landing-page\">\n      <nav className=\"marketing-nav\">\n        <div className=\"logo\">launch<em>frame</em></div>\n        <div className=\"marketing-nav-links\">\n          <Link href=\"/sign-in\">Sign in</Link>\n          <Link href=\"/sign-up\" className=\"nav-cta\">Get started</Link>\n        </div>\n      </nav>\n\n      <div className=\"marketing-shell\">\n        <section className=\"marketing-hero\">\n          <span className=\"badge-pill\">Ship faster in 2026</span>\n          <h1>Build your SaaS <em>without the boilerplate.</em></h1>\n          <p className=\"lede\">\n            Auth, billing, email, database — all wired up and ready.\n            Stop rebuilding infrastructure and start shipping your product.\n          </p>\n          <div className=\"hero-actions\">\n            <Link href=\"/dashboard\">Explore the live demo</Link>\n            <Link href=\"/sign-up\">Start from this baseline</Link>\n            <Link href=\"/sign-in\">Sign in</Link>\n          </div>\n        </section>\n\n        <section className=\"bento-section\">\n          <p className=\"eyebrow\">Everything included</p>\n          <h2>Production-ready from day one</h2>\n          <div className=\"bento-grid\">\n            <div className=\"bento-card span-2\">\n              <span className=\"bento-icon\">🔐</span>\n              <h3>Authentication</h3>\n              <p>Email/password auth with Better Auth. Session management, protected routes, and middleware — all pre-configured.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">Better Auth</span><span className=\"bento-tag\">Server sessions</span><span className=\"bento-tag\">Edge middleware</span></div>\n            </div>\n            <div className=\"bento-card\">\n              <span className=\"bento-icon\">💳</span>\n              <h3>Billing</h3>\n              <p>Stripe and Polar checkout flows with a provider abstraction you can extend.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">Stripe</span><span className=\"bento-tag\">Polar</span></div>\n            </div>\n            <div className=\"bento-card\">\n              <span className=\"bento-icon\">🗄️</span>\n              <h3>Database</h3>\n              <p>Drizzle ORM with migrations, seeds, and a typed schema ready for your models.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">Drizzle</span><span className=\"bento-tag\">PostgreSQL</span></div>\n            </div>\n            <div className=\"bento-card span-2\">\n              <span className=\"bento-icon\">📧</span>\n              <h3>Transactional email</h3>\n              <p>Resend integration with HTML templates for welcome emails, password resets, and billing notifications.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">Resend</span><span className=\"bento-tag\">HTML templates</span></div>\n            </div>\n            <div className=\"bento-card\">\n              <span className=\"bento-icon\">🧪</span>\n              <h3>Testing</h3>\n              <p>Vitest for unit tests, Playwright for E2E. Pre-commit hooks enforce quality.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">Vitest</span><span className=\"bento-tag\">Playwright</span></div>\n            </div>\n            <div className=\"bento-card\">\n              <span className=\"bento-icon\">⚡</span>\n              <h3>Next.js 16</h3>\n              <p>App Router, React 19, server components, and the latest compiler out of the box.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">App Router</span><span className=\"bento-tag\">React 19</span></div>\n            </div>\n            <div className=\"bento-card\">\n              <span className=\"bento-icon\">🤖</span>\n              <h3>Agent-friendly</h3>\n              <p>AGENTS.md, explicit placeholders, and a flat file tree that AI coding assistants love.</p>\n              <div className=\"bento-tags\"><span className=\"bento-tag\">Cursor</span><span className=\"bento-tag\">Copilot</span></div>\n            </div>\n          </div>\n        </section>\n\n        <section className=\"pricing-section\">\n          <p className=\"eyebrow\">Pricing</p>\n          <h2>Simple, transparent pricing</h2>\n          <p className=\"lede\">Start free, scale as you grow. No hidden fees, cancel anytime.</p>\n          <div className=\"pricing-grid\">\n            <div className=\"pricing-card\">\n              <p className=\"plan-name\">Starter</p>\n              <div className=\"plan-price\"><strong>$0</strong><span>/month</span></div>\n              <p className=\"plan-desc\">For side projects and experiments.</p>\n              <ul className=\"pricing-features\">\n                <li>Up to 100 users</li>\n                <li>Basic analytics</li>\n                <li>Community support</li>\n                <li>1 project</li>\n              </ul>\n              <Link href=\"/sign-up\" className=\"pricing-cta\">Get started free</Link>\n            </div>\n            <div className=\"pricing-card featured\">\n              <p className=\"plan-name\">Pro</p>\n              <div className=\"plan-price\"><strong>$29</strong><span>/month</span></div>\n              <p className=\"plan-desc\">For growing products that need more.</p>\n              <ul className=\"pricing-features\">\n                <li>Unlimited users</li>\n                <li>Advanced analytics</li>\n                <li>Priority support</li>\n                <li>Unlimited projects</li>\n                <li>Custom domain</li>\n              </ul>\n              <Link href=\"/sign-up\" className=\"pricing-cta\">Start 14-day trial</Link>\n            </div>\n            <div className=\"pricing-card\">\n              <p className=\"plan-name\">Enterprise</p>\n              <div className=\"plan-price\"><strong>Custom</strong></div>\n              <p className=\"plan-desc\">For teams with specific needs.</p>\n              <ul className=\"pricing-features\">\n                <li>Everything in Pro</li>\n                <li>SSO &amp; SAML</li>\n                <li>Dedicated support</li>\n                <li>SLA guarantee</li>\n                <li>Custom integrations</li>\n              </ul>\n              <Link href=\"/sign-up\" className=\"pricing-cta\">Contact sales</Link>\n            </div>\n          </div>\n        </section>\n\n        <section className=\"cta-section\">\n          <h2>Ready to ship?</h2>\n          <p>Generate your project in seconds. Everything is yours to customize — no vendor lock-in, no hidden abstractions.</p>\n          <div className=\"hero-actions\">\n            <Link href=\"/dashboard\">Open live dashboard</Link>\n            <Link href=\"/sign-up\">Create account</Link>\n          </div>\n        </section>\n\n        <footer className=\"marketing-footer\">\n          <p>Built with Skit — open source SaaS starter for Next.js</p>\n        </footer>\n      </div>\n    </main>\n  )",
+    "__DASHBOARD_REDIRECT_IMPORT__": "",
+    "__DASHBOARD_SESSION_SETUP__": "  const displayUser = session?.user ?? {\n    email: \"eugene@jocage.com\",\n    name: \"Demo Workspace\"\n  };",
+    "__DASHBOARD_AUTH_GUARD__": "",
+    "__BILLING_REDIRECT_IMPORT__": "",
+    "__BILLING_SESSION_SETUP__": "  const displayBillingUser = session?.user ?? {\n    email: \"eugene@jocage.com\",\n    name: \"Demo Workspace\"\n  };",
+    "__BILLING_AUTH_GUARD__": "",
+    "__BILLING_DEMO_BANNER__": "        {!session ? (\n          <p className=\"demo-banner\">\n            Demo mode is active. Checkout buttons stay visible for product context, but\n            real billing flows should be tested after auth and provider credentials are configured.\n          </p>\n        ) : null}",
+    "__BILLING_PROVIDER_CARD__": "              <form\n                key={provider}\n                action=\"/api/billing/checkout\"\n                method=\"post\"\n                className=\"billing-card\"\n              >\n                <input type=\"hidden\" name=\"provider\" value={provider} />\n                <h2>{provider === \"stripe\" ? \"Stripe\" : \"Polar\"}</h2>\n                <p>\n                  {provider === \"stripe\"\n                    ? \"Create a subscription checkout session using the configured Stripe price.\"\n                    : \"Create a Polar checkout session using the configured product identifier.\"}\n                </p>\n                <p className=\"billing-caption\">\n                  Viewing as <strong>{displayBillingUser.name ?? displayBillingUser.email}</strong>\n                </p>\n                <button type=\"submit\" className=\"auth-button\" disabled={!session}>\n                  {!session\n                    ? provider === \"stripe\"\n                      ? \"Sign in to test Stripe\"\n                      : \"Sign in to test Polar\"\n                    : provider === \"stripe\"\n                      ? \"Start Stripe checkout\"\n                      : \"Start Polar checkout\"}\n                </button>\n              </form>",
+    "__EMAIL_REDIRECT_IMPORT__": "",
+    "__EMAIL_SESSION_SETUP__": "  const displayEmailRecipient = session?.user?.email ?? \"eugene@jocage.com\";\n  const emailSendingDisabled = !session;",
+    "__EMAIL_AUTH_GUARD__": "",
+    "__EMAIL_DEMO_BANNER__": "        {!session ? (\n          <p className=\"demo-banner\">\n            Demo mode is active. The email surface stays visible, but actual send actions\n            unlock after sign-in and provider configuration.\n          </p>\n        ) : null}",
+    "__DASHBOARD_PAGE_PRELUDE__": "const stats = [\n  { label: \"MRR\", value: \"$12.4k\", change: \"+8.2%\", tone: \"positive\" },\n  { label: \"Trials\", value: \"184\", change: \"+14.9%\", tone: \"positive\" },\n  { label: \"Activation\", value: \"62%\", change: \"+5.1%\", tone: \"positive\" },\n  { label: \"Churn\", value: \"2.1%\", change: \"Watchlist\", tone: \"warning\" }\n];\n\nconst activity = [\n  {\n    title: \"Polar and Stripe adapters are already wired\",\n    description: \"Swap providers without rewriting your app surface.\",\n    stamp: \"Now\",\n    badge: \"BL\"\n  },\n  {\n    title: \"Better Auth baseline is live\",\n    description: \"Email auth flows, protected routes, and session helpers are in place.\",\n    stamp: \"Auth\",\n    badge: \"AU\"\n  },\n  {\n    title: \"Vitest + Playwright gates are included\",\n    description: \"You start with verification, not just templates and good intentions.\",\n    stamp: \"QA\",\n    badge: \"TS\"\n  }\n];\n\nconst pipeline = [\n  { label: \"Lead capture\", value: \"1,284\", detail: \"+11% week over week\" },\n  { label: \"Qualified trials\", value: \"312\", detail: \"42 from referral channels\" },\n  { label: \"Activated workspaces\", value: \"116\", detail: \"62% activation rate\" }\n];",
+    "__DASHBOARD_PAGE_CONTENT__": "(\n    <main className=\"dashboard\">\n      <aside className=\"sidebar\">\n        <div>\n          <p className=\"brand\">Skit</p>\n          <h1 className=\"workspace-title\">Control room</h1>\n          <p className=\"workspace-subtitle\">\n            Start with a product shell that already understands auth, billing, email,\n            and deployment paths.\n          </p>\n        </div>\n\n        <div className=\"sidebar-section\">\n          <p className=\"sidebar-label\">Workspace</p>\n          <div className=\"pill\">\n            <span className=\"status-dot\" />\n            {displayUser.name ?? displayUser.email}\n          </div>\n        </div>\n\n        <nav className=\"nav\">\n          <Link href=\"/dashboard\">\n            Overview <span>01</span>\n          </Link>\n          <Link href=\"/billing\">\n            Billing <span>02</span>\n          </Link>\n          <Link href=\"/email\">\n            Email <span>03</span>\n          </Link>\n          <Link href=\"/settings\">\n            Settings <span>04</span>\n          </Link>\n          <Link href=\"/\">\n            Home <span>05</span>\n          </Link>\n        </nav>\n\n        <div className=\"sidebar-note\">\n          <strong>Starter principle</strong>\n          <p>\n            Keep the generated app sharp, predictable, and easy to extend with both\n            human and agent workflows.\n          </p>\n        </div>\n\n        {session ? (\n          <SignOutButton />\n        ) : (\n          <Link href=\"/sign-in\" className=\"ghost-button\">\n            Sign in for the full app\n          </Link>\n        )}\n      </aside>\n\n      <section className=\"content\">\n        <header className=\"header\">\n          <article className=\"hero-panel\">\n            <p className=\"eyebrow\">Dashboard starter</p>\n            <h2>Ship the first real screen on day zero.</h2>\n            <p className=\"lede\">\n              This is not a toy admin mockup. It is the first protected surface of a\n              modular SaaS app, with auth, billing, email, and database boundaries\n              already mapped out.\n            </p>\n            <div className=\"hero-actions\">\n              <Link href=\"/billing\">Open billing</Link>\n              <Link href=\"/settings\">Open settings</Link>\n              <Link href=\"/email\">Send a test email</Link>\n            </div>\n          </article>\n\n          <article className=\"insight-panel\">\n            <p className=\"eyebrow\">Why it matters</p>\n            <h3>Clean foundations beat feature theater.</h3>\n            <ul className=\"insight-list\">\n              <li>\n                <strong>Composable modules</strong>\n                <span>DB, billing, deploy target, and dashboard shell are resolved intentionally.</span>\n              </li>\n              <li>\n                <strong>AI-first repo shape</strong>\n                <span>Thin routes, clear boundaries, and generated manifests keep agent work predictable.</span>\n              </li>\n              <li>\n                <strong>Verified output</strong>\n                <span>Smoke profiles exist so the starter stays real, not aspirational.</span>\n              </li>\n            </ul>\n          </article>\n        </header>\n\n        <section className=\"stats\">\n          {stats.map((item) => (\n            <article key={item.label} className=\"card\">\n              <p>{item.label}</p>\n              <strong>{item.value}</strong>\n              <span className={`metric-trend ${item.tone}`}>{item.change}</span>\n            </article>\n          ))}\n        </section>\n\n        <section className=\"panel-grid\">\n          <article className=\"panel\">\n            <p className=\"eyebrow\">Recent activity</p>\n            <h3>What this starter already gives you</h3>\n            <div className=\"activity-list\">\n              {activity.map((item) => (\n                <div key={item.title} className=\"activity-item\">\n                  <div className=\"activity-badge\">{item.badge}</div>\n                  <div>\n                    <strong>{item.title}</strong>\n                    <p>{item.description}</p>\n                  </div>\n                  <span>{item.stamp}</span>\n                </div>\n              ))}\n            </div>\n          </article>\n\n          <aside className=\"mini-grid\">\n            <article className=\"mini-card\">\n              <p className=\"eyebrow\">Auth</p>\n              <strong>Ready when you need real accounts</strong>\n              <p>Auth exists, but the demo dashboard no longer blocks first-run product exploration.</p>\n            </article>\n            <article className=\"mini-card\">\n              <p className=\"eyebrow\">Deploy</p>\n              <strong>Vercel or Docker</strong>\n              <p>The generator keeps deploy target selection explicit instead of burying it in docs.</p>\n            </article>\n            <article className=\"mini-card\">\n              <p className=\"eyebrow\">Billing</p>\n              <strong>Provider abstraction first</strong>\n              <p>Stripe and Polar stay behind one app-facing contract from the beginning.</p>\n            </article>\n          </aside>\n        </section>\n\n        <section className=\"pipeline-panel\">\n          <div className=\"pipeline-header\">\n            <div>\n              <p className=\"eyebrow\">Growth pipeline</p>\n              <h3>Demo data that feels like a product, not a lorem ipsum card set.</h3>\n            </div>\n            <span className=\"pill\">\n              <span className=\"status-dot\" />\n              Demo mode\n            </span>\n          </div>\n          <div className=\"pipeline-grid\">\n            {pipeline.map((item) => (\n              <article key={item.label} className=\"pipeline-card\">\n                <p>{item.label}</p>\n                <strong>{item.value}</strong>\n                <span>{item.detail}</span>\n              </article>\n            ))}\n          </div>\n        </section>\n      </section>\n    </main>\n  )",
+    "__HOME_E2E_TEST_NAME__": "home page renders skit landing",
+    "__HOME_E2E_HEADING__": "build your saas",
+    "__HOME_E2E_LINK__": "explore the live demo",
+    "__AUTH_LLMS_EXTRA__": "",
+    "__BILLING_LLMS_LINE__": "Stripe / Polar billing (provider abstraction)",
+    "__EMAIL_LLMS_LINE__": "Resend transactional email"
+  },
+  "overrideFiles": [],
+  "modules": ["quality-baseline", "testing-baseline", "auth-core", "dashboard-shell"]
+}

package/templates/base-web/.env.example

@@ -0,0 +1,17 @@
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+BETTER_AUTH_URL=http://localhost:3000
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/__PROJECT_NAME__
+BETTER_AUTH_SECRET=replace-me
+__AUTH_PROVIDER_ENV_EXAMPLE__
+RESEND_API_KEY=re_xxx
+EMAIL_FROM=Panda Starter <onboarding@example.com>
+STRIPE_SECRET_KEY=sk_test_xxx
+STRIPE_PRICE_ID=price_xxx
+STRIPE_WEBHOOK_SECRET=whsec_xxx
+POLAR_ACCESS_TOKEN=polar_pat_xxx
+POLAR_ORGANIZATION_ID=org_xxx
+POLAR_PRODUCT_ID=prod_xxx
+POLAR_SERVER=sandbox
+POLAR_WEBHOOK_SECRET=polar_whsec_xxx
+BILLING_PROVIDER=__BILLING_PROVIDER__
+EMAIL_PROVIDER=__EMAIL_PROVIDER__

package/templates/base-web/.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: __CI_CACHE__
+
+      - name: Install
+        run: __CI_INSTALL_COMMAND__
+
+      - name: Lint
+        run: __CI_RUN_LINT__
+
+      - name: Typecheck
+        run: __CI_RUN_TYPECHECK__
+
+      - name: Unit tests
+        run: __CI_RUN_TEST__
+
+      - name: Build
+        run: __CI_RUN_BUILD__

package/templates/base-web/.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npm run lint-staged && npm run typecheck

package/templates/base-web/.husky/pre-push

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npm run test

package/templates/base-web/.prettierignore

@@ -0,0 +1,3 @@
+.next
+coverage
+node_modules

package/templates/base-web/README.md

@@ -0,0 +1,42 @@
+# __PROJECT_NAME__
+
+Generated with Skit using the `__TEMPLATE_NAME__` template.
+
+## Quick Start
+
+```bash
+__INSTALL_COMMAND__
+__RUN_DEV_COMMAND__
+```
+
+Generated settings:
+
+- package manager: `__PACKAGE_MANAGER_NAME__`
+- database driver: `__DATABASE_DRIVER__`
+- billing provider: `__BILLING_PROVIDER__`
+- email provider: `__EMAIL_PROVIDER__`
+- deploy target: `__DEPLOY_TARGET__`
+- demo seed data: `__SEED_DEMO_DATA__`
+
+## Current State
+
+This is the __README_STATE_COPY__.
+
+Included:
+
+- Next.js 16 app shell
+- strict TypeScript baseline
+- __README_HIGHLIGHT_BULLET__
+- flat ESLint config with strict rules
+- Prettier config
+- validated env entrypoint with Zod
+- Drizzle ORM baseline with PostgreSQL via `__DATABASE_DRIVER__`
+- migration and seed scripts
+- Better Auth baseline with email/password sign-in and sign-up
+- __README_PROTECTED_ROUTES_BULLET__
+- billing provider abstraction with `__BILLING_PROVIDER__` as the configured default
+- billing page and webhook route skeletons
+- `__EMAIL_PROVIDER__` email service layer and email template placeholders
+- protected `/email` page for test sends
+- Vitest and Playwright baseline with example tests
+- GitHub Actions CI workflow for lint, typecheck, test, and build

package/templates/base-web/drizzle.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "drizzle-kit";
+
+if (!process.env.DATABASE_URL) {
+  throw new Error("DATABASE_URL is required to use Drizzle.");
+}
+
+export default defineConfig({
+  schema: "./src/db/schema/index.ts",
+  out: "./src/db/migrations",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL
+  },
+  verbose: true,
+  strict: true
+});