create-loumi-app 1.0.0

package/dist/index.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import {Command}from'commander';import*as a from'@clack/prompts';import m from'chalk';import h from'path';import g from'fs-extra';import f from'ora';import {execa}from'execa';import {fileURLToPath}from'url';import z from'sort-package-json';async function E(e){a.intro(m.bgBlue.white(" create-loumi-app "));let t=await a.text({message:"Projektname?",placeholder:"my-loumi-app",initialValue:e,validate:i=>{if(!i)return "Projektname ist erforderlich";if(!/^[a-z0-9-_]+$/i.test(i))return "Nur Buchstaben, Zahlen, Bindestriche und Unterstriche erlaubt"}});if(a.isCancel(t))return a.cancel("Abgebrochen."),null;let s=await a.multiselect({message:"Welche Add-ons m\xF6chtest du? (Space zum Ausw\xE4hlen)",options:[{value:"convex",label:"Convex",hint:"Backend, DB, Real-time + TanStack Query"},{value:"better-auth",label:"Better Auth",hint:"Authentication (Email/Password, OAuth) via Convex"},{value:"sanity",label:"Sanity",hint:"Headless CMS (Portable Text) + Blog-Routes"},{value:"resend",label:"Resend",hint:"E-Mail Versand (Transactional Emails)"},{value:"seo",label:"Advanced SEO",hint:"JSON-LD, Schema.org, robots.txt, llms.txt"}],required:false});if(a.isCancel(s))return a.cancel("Abgebrochen."),null;let o=await a.confirm({message:"Dependencies installieren?",initialValue:true});if(a.isCancel(o))return a.cancel("Abgebrochen."),null;let n=await a.confirm({message:"Git Repository initialisieren?",initialValue:true});return a.isCancel(n)?(a.cancel("Abgebrochen."),null):{projectName:t,addons:s||[],installDeps:o,initGit:n}}var Q=fileURLToPath(import.meta.url),M=h.dirname(Q);function Y(e){return h.join(M,"..","template",e)}async function l(e,t){let s=Y(e);await g.copy(s,t,{overwrite:true});}async function T(e,t,s){let o=h.join(e,t),n=h.join(e,s);await g.pathExists(o)&&await g.move(o,n,{overwrite:true});}async function A(e,t,s){if(!await g.pathExists(e))return;let n=(await g.readFile(e,"utf-8")).replaceAll(t,s);await g.writeFile(e,n);}async function c(e,t){await g.pathExists(e)?await g.appendFile(e,t):await g.writeFile(e,t);}var C={react:"^19.0.0","react-dom":"^19.0.0","@tanstack/react-router":"^1.120.0","@tanstack/react-start":"^1.120.0",tailwindcss:"^4.0.0","@tailwindcss/vite":"^4.0.0",typescript:"^5.7.0",vite:"^6.0.0",wrangler:"^4.0.0","@cloudflare/workers-types":"^4.20250109.0","unenv-preset-cloudflare":"^2.0.0",convex:"^1.17.0","@convex-dev/react-query":"^0.0.7","@tanstack/react-query":"^5.62.0","@tanstack/react-router-with-query":"^1.120.0","@sanity/client":"^7.3.0","@sanity/image-url":"^1.1.0","@portabletext/react":"^3.2.0","better-auth":"1.4.9","@convex-dev/better-auth":"^0.10.10",resend:"^4.1.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"};function K(e){return C[e]}function p(e){let t={};for(let s of e)t[s]=K(s);return t}async function u(e,{dependencies:t={},devDependencies:s={},scripts:o={}}){let n=h.join(e,"package.json"),i=await g.readJson(n);i.dependencies={...i.dependencies,...t},i.devDependencies={...i.devDependencies,...s},i.scripts={...i.scripts,...o};let d=z(JSON.stringify(i,null,2));await g.writeFile(n,d+`
+`);}var X=["react","react-dom","@tanstack/react-router","@tanstack/react-start","tailwindcss","@tailwindcss/vite"],Z=["typescript","vite","wrangler","@cloudflare/workers-types","unenv-preset-cloudflare","@types/react","@types/react-dom"];async function P(e,t){await l("base",e),await T(e,"_gitignore",".gitignore");let s={name:t,version:"0.1.0",private:true,type:"module",scripts:{dev:"vinxi dev",build:"vinxi build",start:"vinxi start",preview:"wrangler dev",deploy:"vinxi build && wrangler deploy"},dependencies:{},devDependencies:{}};await g.writeJson(h.join(e,"package.json"),s,{spaces:2}),await u(e,{dependencies:p(X),devDependencies:p(Z)}),await A(h.join(e,"wrangler.jsonc"),"PROJECT_NAME",t);}var ee=["convex","@convex-dev/react-query","@tanstack/react-query","@tanstack/react-router-with-query"],te=`
+# Convex
+# Run "npx convex dev" to generate these values
+CONVEX_DEPLOYMENT=
+VITE_CONVEX_URL=
+`,ne="\n\n## Convex (Backend / Database)\n\n- **Real-time database** with automatic WebSocket subscriptions\n- Convex functions live in `convex/` directory (schema, queries, mutations)\n- Schema defined in `convex/schema.ts` using `defineSchema`, `defineTable`, `v` validators\n- Queries/mutations exported from `convex/*.ts` using `query()` and `mutation()`\n- Client integration via `@convex-dev/react-query` \u2014 bridges Convex into TanStack Query cache\n- Router uses `routerWithQueryClient` from `@tanstack/react-router-with-query`\n- SSR data loading: `context.queryClient.ensureQueryData(convexQuery(api.module.fn, args))`\n- Client-side reading: `useSuspenseQuery(convexQuery(api.module.fn, args))`\n- Mutations: `useConvexMutation(api.module.fn)` or `useMutation` from react-query\n- `_generated/` folder is auto-generated \u2014 never edit manually\n- Run `npx convex dev` to start Convex dev server and generate types\n";async function I(e){await l("addons/convex",e),await u(e,{dependencies:p(ee)}),await c(h.join(e,".env.local"),te),await c(h.join(e,"CLAUDE.md"),ne);}var se=["better-auth","@convex-dev/better-auth"],ae=`
+# Better Auth
+# Set BETTER_AUTH_SECRET on Convex: npx convex env set BETTER_AUTH_SECRET=$(openssl rand -base64 32)
+# Set SITE_URL on Convex: npx convex env set SITE_URL=http://localhost:3000
+VITE_CONVEX_SITE_URL=
+VITE_SITE_URL=http://localhost:3000
+`,oe='\n\n## Better Auth (Authentication)\n\n- Uses `@convex-dev/better-auth` \u2014 Better Auth runs INSIDE Convex (single user table, no external DB)\n- Auth tables (user, session, account) managed by the Convex component \u2014 NOT in your schema\n- Server config: `convex/auth.ts` \u2014 `authComponent.adapter(ctx)` bridges Better Auth to Convex DB\n- Client: `src/lib/auth-client.ts` \u2014 `createAuthClient` with `convexClient()` plugin\n- Server utils: `src/lib/auth-server.ts` \u2014 `getToken`, `fetchAuthQuery`, etc.\n- API route: `src/routes/api.auth.$.ts` \u2014 catch-all handler for Better Auth endpoints\n- Root route uses `beforeLoad` to inject `isAuthenticated` + `token` into route context\n- Route protection: `if (!context.isAuthenticated) throw redirect({ to: "/login" })`\n- Client-side auth state: use `Authenticated`, `Unauthenticated`, `useConvexAuth()` from `convex/react`\n- Sign-in/up: `authClient.signIn.email({ email, password })` (client-side only)\n- Sign-out: use `location.reload()` in onSuccess callback (required with `expectAuth: true`)\n- Convex env vars (set via CLI, not .env.local): `BETTER_AUTH_SECRET`, `SITE_URL`\n- Do NOT create a separate user table in your Convex schema \u2014 use triggers for app-specific user data\n';async function O(e,t){t.includes("convex")||console.log(m.yellow(`
+\u26A0  Better Auth ben\xF6tigt Convex. Convex wird automatisch mit installiert.
+`)),await l("addons/better-auth",e),await u(e,{dependencies:p(se)}),await c(h.join(e,".env.local"),ae),await c(h.join(e,"CLAUDE.md"),oe);}var re=["@sanity/client","@sanity/image-url","@portabletext/react"],ce=`
+# Sanity
+VITE_SANITY_PROJECT_ID=
+VITE_SANITY_DATASET=production
+VITE_SANITY_API_VERSION=2025-01-01
+`,le='\n\n## Sanity (Headless CMS)\n\n- Client configured in `src/lib/sanity.ts` using `@sanity/client`\n- Content fetched via GROQ queries in route loaders: `sanityClient.fetch(QUERY, params)`\n- Blog routes: `/blog` (layout), `/blog/` (list), `/blog/$slug` (detail)\n- Rich text rendered with `<PortableText value={body} />` from `@portabletext/react`\n- Images: use `urlFor(source).width(x).url()` helper from `src/lib/sanity.ts`\n- Sanity schemas in `sanity/schemaTypes/` \u2014 documents and objects\n- SEO object type available on documents (`metaTitle`, `metaDescription`, `ogImage`)\n- GROQ cheat sheet: `*[_type == "post"]{title, slug}`, `| order(publishedAt desc)`\n- Set `VITE_SANITY_PROJECT_ID` in `.env.local` before running\n';async function V(e){await l("addons/sanity",e),await u(e,{dependencies:p(re)}),await c(h.join(e,".env.local"),ce),await c(h.join(e,"CLAUDE.md"),le);}var de=["resend"],pe=`
+# Resend
+RESEND_API_KEY=
+`,ue="\n\n## Resend (Email)\n\n- Client configured in `src/lib/email.ts` using the `resend` SDK\n- `sendEmail({ to, subject, html })` helper \u2014 call from server-side code only (loaders, API routes)\n- `RESEND_API_KEY` must be set in `.env.local` (not `VITE_` prefixed \u2014 server-only)\n- Default `from` is `onboarding@resend.dev` \u2014 change to your verified domain\n- For React email templates, consider adding `@react-email/components`\n";async function L(e){await l("addons/resend",e),await u(e,{dependencies:p(de)}),await c(h.join(e,".env.local"),pe),await c(h.join(e,"CLAUDE.md"),ue);}var ge='\n\n## Advanced SEO\n\n- `seo()` helper in `src/lib/seo.ts` \u2014 generates meta + links arrays for `head()`\n  Usage: `head: () => ({ ...seo({ title: "Page", description: "..." }) })`\n- JSON-LD helpers in `src/lib/schema-org.ts`: `organizationSchema`, `webSiteSchema`, `articleSchema`, `breadcrumbSchema`\n- `public/robots.txt` \u2014 update Sitemap URL before deploying\n- `public/llms.txt` \u2014 LLM-readable site description, update with actual content\n- Always set `title` and `description` on every route via `head()`\n- Use `canonicalUrl` for pages accessible at multiple URLs\n- Use `noIndex: true` for pages that should not be indexed\n';async function j(e){await l("addons/seo",e),await c(h.join(e,"CLAUDE.md"),ge);}async function F(e){try{return await execa("git",["init"],{cwd:e}),await execa("git",["add","-A"],{cwd:e}),await execa("git",["commit","-m","Initial commit from create-loumi-app"],{cwd:e}),!0}catch{return  false}}var he=[{repo:"vercel-labs/agent-skills",skill:"vercel-react-best-practices"},{repo:"vercel-labs/agent-skills",skill:"web-design-guidelines"},{repo:"anthropics/skills",skill:"frontend-design"},{repo:"sickn33/antigravity-awesome-skills",skill:"clean-code"},{repo:"deckardger/tanstack-agent-skills",skill:"tanstack-start-best-practices"}],ve={convex:[{repo:"jezweb/claude-skills",skill:"tanstack-query"},{repo:"waynesutton/convexskills"}],sanity:[{repo:"sanity-io/agent-toolkit",skill:"sanity-best-practices"}],seo:[{repo:"coreyhaines31/marketingskills",skill:"seo-audit"}],resend:[{repo:"resend/email-best-practices",skill:"email-best-practices"}],"better-auth":[{repo:"better-auth/skills",skill:"better-auth-best-practices"}]};async function ye(e,t){try{let s=["skills","add",e.repo,"-y"];return e.skill&&s.push("-s",e.skill),await execa("npx",s,{cwd:t,stdio:"ignore"}),!0}catch{return  false}}async function J(e,t){let s=[...he];for(let i of t){let d=ve[i];d&&s.push(...d);}let o=0,n=0;for(let i of s)await ye(i,e)?o++:n++;return {installed:o,failed:n}}async function b(e){let{projectName:t,installDeps:s,initGit:o}=e,n=[...e.addons],i=h.resolve(process.cwd(),t);await g.pathExists(i)&&(await g.readdir(i)).length>0&&(console.log(m.red(`
+Error: Verzeichnis "${t}" ist nicht leer.
+`)),process.exit(1)),await g.ensureDir(i),n.includes("better-auth")&&!n.includes("convex")&&n.push("convex");let d=f("Base Template kopieren...").start();if(await P(i,t),d.succeed("Base Template erstellt"),n.includes("convex")){let r=f("Convex einrichten...").start();await I(i),r.succeed("Convex eingerichtet");}if(n.includes("better-auth")){let r=f("Better Auth einrichten...").start();await O(i,n),r.succeed("Better Auth eingerichtet");}if(n.includes("sanity")){let r=f("Sanity einrichten...").start();await V(i),r.succeed("Sanity eingerichtet");}if(n.includes("resend")){let r=f("Resend einrichten...").start();await L(i),r.succeed("Resend eingerichtet");}if(n.includes("seo")){let r=f("Advanced SEO einrichten...").start();await j(i),r.succeed("Advanced SEO eingerichtet");}let w=f("Claude Skills installieren...").start(),{installed:k,failed:S}=await J(i,n);if(S===0?w.succeed(`${k} Claude Skills installiert`):w.warn(`${k} Skills installiert, ${S} fehlgeschlagen`),s){let r=f("Dependencies installieren...").start();try{let v=we();await execa(v,["install"],{cwd:i}),r.succeed(`Dependencies installiert (${v})`);}catch{r.fail("Dependencies konnten nicht installiert werden"),console.log(m.yellow(`  F\xFChre manuell 'npm install' aus.
+`));}}if(o){let r=f("Git initialisieren...").start();await F(i)?r.succeed("Git Repository initialisiert"):r.fail("Git konnte nicht initialisiert werden");}console.log(),console.log(m.green("\u2714 Projekt erstellt!")),console.log(),console.log("  N\xE4chste Schritte:"),console.log(m.cyan(`  cd ${t}`)),s||console.log(m.cyan("  npm install")),n.includes("convex")&&console.log(m.cyan("  npx convex dev")),console.log(m.cyan("  npm run dev")),console.log(),n.includes("sanity")&&console.log(m.dim("  Vergiss nicht VITE_SANITY_PROJECT_ID in .env.local zu setzen!")),n.includes("better-auth")&&console.log(m.dim("  Better Auth Setup: npx convex env set BETTER_AUTH_SECRET=$(openssl rand -base64 32)")),n.includes("resend")&&console.log(m.dim("  Vergiss nicht RESEND_API_KEY in .env.local zu setzen!")),console.log();}function we(){let e=process.env.npm_config_user_agent;if(e){if(e.startsWith("pnpm"))return "pnpm";if(e.startsWith("yarn"))return "yarn";if(e.startsWith("bun"))return "bun"}return "npm"}var q=new Command;q.name("create-loumi-app").description("Scaffold a new Loumi web project").version("1.0.0").argument("[project-name]","Name of the project").option("--skip-install","Skip dependency installation").option("--add-ons <addons>","Comma-separated list of add-ons (convex,better-auth,sanity,resend,seo)").action(async(e,t)=>{if(e&&t.addOns!==void 0){let o=t.addOns.split(",").map(d=>d.trim().toLowerCase()).filter(Boolean),n=["convex","better-auth","sanity","resend","seo"],i=o.filter(d=>!n.includes(d));i.length>0&&(console.error(`Unknown add-ons: ${i.join(", ")}`),console.error(`Valid add-ons: ${n.join(", ")}`),process.exit(1)),await b({projectName:e,addons:o,installDeps:!t.skipInstall,initGit:true});return}let s=await E(e);s||process.exit(0),await b(s);});q.parse();

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-loumi-app",
+  "version": "1.0.0",
+  "description": "CLI tool to scaffold Loumi web projects",
+  "type": "module",
+  "bin": {
+    "create-loumi-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "keywords": [
+    "cli",
+    "scaffold",
+    "tanstack",
+    "cloudflare",
+    "loumi"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.10.0",
+    "chalk": "^5.4.1",
+    "commander": "^13.1.0",
+    "execa": "^9.5.2",
+    "fs-extra": "^11.3.0",
+    "ora": "^8.2.0",
+    "sort-package-json": "^2.14.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.13.1",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

package/template/addons/better-auth/convex/auth.config.ts

@@ -0,0 +1,6 @@
+import { getAuthConfigProvider } from "@convex-dev/better-auth/auth-config";
+import type { AuthConfig } from "convex/server";
+
+export default {
+  providers: [getAuthConfigProvider()],
+} satisfies AuthConfig;

package/template/addons/better-auth/convex/auth.ts

@@ -0,0 +1,34 @@
+import { betterAuth } from "better-auth/minimal";
+import { createClient } from "@convex-dev/better-auth";
+import { convex } from "@convex-dev/better-auth/plugins";
+import authConfig from "./auth.config";
+import { components } from "./_generated/api";
+import { query } from "./_generated/server";
+import type { GenericCtx } from "@convex-dev/better-auth";
+import type { DataModel } from "./_generated/dataModel";
+
+const siteUrl = process.env.SITE_URL!;
+
+// Better Auth component client — uses Convex as the database (single user table)
+export const authComponent = createClient<DataModel>(components.betterAuth);
+
+// Create auth instance with Convex adapter — NO external DB needed
+export const createAuth = (ctx: GenericCtx<DataModel>) => {
+  return betterAuth({
+    baseURL: siteUrl,
+    database: authComponent.adapter(ctx),
+    emailAndPassword: {
+      enabled: true,
+      requireEmailVerification: false,
+    },
+    plugins: [convex({ authConfig })],
+  });
+};
+
+// Query to get the current authenticated user
+export const getCurrentUser = query({
+  args: {},
+  handler: async (ctx) => {
+    return await authComponent.getAuthUser(ctx);
+  },
+});

package/template/addons/better-auth/convex/convex.config.ts

@@ -0,0 +1,6 @@
+import { defineApp } from "convex/server";
+import betterAuth from "@convex-dev/better-auth/convex.config";
+
+const app = defineApp();
+app.use(betterAuth);
+export default app;

package/template/addons/better-auth/convex/http.ts

@@ -0,0 +1,6 @@
+import { httpRouter } from "convex/server";
+import { authComponent, createAuth } from "./auth";
+
+const http = httpRouter();
+authComponent.registerRoutes(http, createAuth);
+export default http;

package/template/addons/better-auth/src/lib/auth-client.ts

@@ -0,0 +1,6 @@
+import { createAuthClient } from "better-auth/react";
+import { convexClient } from "@convex-dev/better-auth/client/plugins";
+
+export const authClient = createAuthClient({
+  plugins: [convexClient()],
+});

package/template/addons/better-auth/src/lib/auth-server.ts

@@ -0,0 +1,12 @@
+import { convexBetterAuthReactStart } from "@convex-dev/better-auth/react-start";
+
+export const {
+  handler,
+  getToken,
+  fetchAuthQuery,
+  fetchAuthMutation,
+  fetchAuthAction,
+} = convexBetterAuthReactStart({
+  convexUrl: import.meta.env.VITE_CONVEX_URL!,
+  convexSiteUrl: import.meta.env.VITE_CONVEX_SITE_URL!,
+});

package/template/addons/better-auth/src/router.tsx

@@ -0,0 +1,39 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { routerWithQueryClient } from "@tanstack/react-router-with-query";
+import { QueryClient } from "@tanstack/react-query";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { routeTree } from "./routeTree.gen";
+
+export function createRouter() {
+  const CONVEX_URL = import.meta.env.VITE_CONVEX_URL as string;
+  if (!CONVEX_URL) throw new Error("VITE_CONVEX_URL is not set");
+
+  const convexQueryClient = new ConvexQueryClient(CONVEX_URL, {
+    expectAuth: true,
+  });
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        queryKeyHashFn: convexQueryClient.hashFn(),
+        queryFn: convexQueryClient.queryFn(),
+      },
+    },
+  });
+  convexQueryClient.connect(queryClient);
+
+  return routerWithQueryClient(
+    createTanStackRouter({
+      routeTree,
+      defaultPreload: "intent",
+      defaultPreloadStaleTime: 0,
+      context: { queryClient, convexQueryClient },
+    }),
+    queryClient,
+  );
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}

package/template/addons/better-auth/src/routes/__root.tsx

@@ -0,0 +1,79 @@
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext,
+} from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ConvexQueryClient } from "@convex-dev/react-query";
+import appCss from "~/styles/app.css?url";
+import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
+import { NotFound } from "~/components/NotFound";
+import { authClient } from "~/lib/auth-client";
+import { getToken } from "~/lib/auth-server";
+
+const getAuth = createServerFn({ method: "GET" }).handler(async () => {
+  return await getToken();
+});
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient;
+  convexQueryClient: ConvexQueryClient;
+}>()({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "Loumi App" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+  }),
+  beforeLoad: async ({ context }) => {
+    const token = await getAuth();
+    if (token) {
+      context.convexQueryClient.serverHttpClient?.setAuth(token);
+    }
+    return { isAuthenticated: !!token, token };
+  },
+  errorComponent: (props) => (
+    <RootDocument>
+      <DefaultCatchBoundary {...props} />
+    </RootDocument>
+  ),
+  notFoundComponent: () => <NotFound />,
+  component: RootComponent,
+});
+
+function RootComponent() {
+  const { convexQueryClient, token } = Route.useRouteContext();
+
+  return (
+    <RootDocument>
+      <ConvexBetterAuthProvider
+        client={convexQueryClient.convexClient}
+        authClient={authClient}
+        initialToken={token}
+      >
+        <QueryClientProvider client={Route.useRouteContext().queryClient}>
+          <Outlet />
+        </QueryClientProvider>
+      </ConvexBetterAuthProvider>
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/addons/better-auth/src/routes/api.auth.$.ts

@@ -0,0 +1,7 @@
+import { createAPIFileRoute } from "@tanstack/react-start/api";
+import { handler } from "~/lib/auth-server";
+
+export const APIRoute = createAPIFileRoute("/api/auth/$")({
+  GET: ({ request }) => handler(request),
+  POST: ({ request }) => handler(request),
+});

package/template/addons/convex/convex/schema.ts

@@ -0,0 +1,9 @@
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
+
+export default defineSchema({
+  tasks: defineTable({
+    text: v.string(),
+    completed: v.boolean(),
+  }),
+});

package/template/addons/convex/convex/tasks.ts

@@ -0,0 +1,28 @@
+import { query, mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+export const list = query({
+  args: {},
+  handler: async (ctx) => {
+    return await ctx.db.query("tasks").collect();
+  },
+});
+
+export const create = mutation({
+  args: { text: v.string() },
+  handler: async (ctx, args) => {
+    await ctx.db.insert("tasks", {
+      text: args.text,
+      completed: false,
+    });
+  },
+});
+
+export const toggle = mutation({
+  args: { id: v.id("tasks") },
+  handler: async (ctx, args) => {
+    const task = await ctx.db.get(args.id);
+    if (!task) throw new Error("Task not found");
+    await ctx.db.patch(args.id, { completed: !task.completed });
+  },
+});

package/template/addons/convex/src/router.tsx

@@ -0,0 +1,37 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { routerWithQueryClient } from "@tanstack/react-router-with-query";
+import { QueryClient } from "@tanstack/react-query";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { routeTree } from "./routeTree.gen";
+
+export function createRouter() {
+  const CONVEX_URL = import.meta.env.VITE_CONVEX_URL as string;
+  if (!CONVEX_URL) throw new Error("VITE_CONVEX_URL is not set");
+
+  const convexQueryClient = new ConvexQueryClient(CONVEX_URL);
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        queryKeyHashFn: convexQueryClient.hashFn(),
+        queryFn: convexQueryClient.queryFn(),
+      },
+    },
+  });
+  convexQueryClient.connect(queryClient);
+
+  return routerWithQueryClient(
+    createTanStackRouter({
+      routeTree,
+      defaultPreload: "intent",
+      defaultPreloadStaleTime: 0,
+      context: { queryClient },
+    }),
+    queryClient,
+  );
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}

package/template/addons/convex/src/routes/__root.tsx

@@ -0,0 +1,61 @@
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext,
+} from "@tanstack/react-router";
+import { ConvexProvider } from "convex/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ConvexReactClient } from "convex/react";
+import appCss from "~/styles/app.css?url";
+import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
+import { NotFound } from "~/components/NotFound";
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient;
+}>()({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "Loumi App" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+  }),
+  errorComponent: (props) => (
+    <RootDocument>
+      <DefaultCatchBoundary {...props} />
+    </RootDocument>
+  ),
+  notFoundComponent: () => <NotFound />,
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  const queryClient = Route.useRouteContext({ select: (s) => s.queryClient });
+  const convexClient = (queryClient as any).__convexClient as ConvexReactClient;
+
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <ConvexProvider client={convexClient}>
+          <QueryClientProvider client={queryClient}>
+            {children}
+          </QueryClientProvider>
+        </ConvexProvider>
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/addons/convex/src/routes/index.tsx

@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { convexQuery } from "@convex-dev/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { api } from "../../convex/_generated/api";
+
+export const Route = createFileRoute("/")({
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(
+      convexQuery(api.tasks.list, {}),
+    );
+  },
+  component: Home,
+});
+
+function Home() {
+  const { data: tasks } = useSuspenseQuery(
+    convexQuery(api.tasks.list, {}),
+  );
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="text-center">
+        <h1 className="text-5xl font-bold text-white mb-4">
+          Welcome to Loumi
+        </h1>
+        <p className="text-xl text-gray-300 mb-8">
+          Built with TanStack Start, Convex & Cloudflare Workers
+        </p>
+        <div className="mt-8 text-left max-w-md mx-auto">
+          <h2 className="text-2xl font-semibold text-white mb-4">Tasks</h2>
+          {tasks.length === 0 ? (
+            <p className="text-gray-400">No tasks yet. Add one in your Convex dashboard!</p>
+          ) : (
+            <ul className="space-y-2">
+              {tasks.map((task) => (
+                <li
+                  key={task._id}
+                  className="flex items-center gap-3 p-3 bg-gray-700/50 rounded-lg"
+                >
+                  <span
+                    className={`text-white ${task.completed ? "line-through opacity-50" : ""}`}
+                  >
+                    {task.text}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/addons/resend/src/lib/email.ts

@@ -0,0 +1,33 @@
+import { Resend } from "resend";
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+interface SendEmailOptions {
+  to: string | string[];
+  subject: string;
+  html: string;
+  from?: string;
+  replyTo?: string;
+}
+
+export async function sendEmail({
+  to,
+  subject,
+  html,
+  from = "onboarding@resend.dev",
+  replyTo,
+}: SendEmailOptions) {
+  const { data, error } = await resend.emails.send({
+    from,
+    to: Array.isArray(to) ? to : [to],
+    subject,
+    html,
+    ...(replyTo && { replyTo }),
+  });
+
+  if (error) {
+    throw new Error(`Failed to send email: ${error.message}`);
+  }
+
+  return data;
+}

package/template/addons/sanity/sanity/schemaTypes/documents/post.ts

@@ -0,0 +1,44 @@
+import { defineType, defineField } from "sanity";
+
+export const post = defineType({
+  name: "post",
+  title: "Post",
+  type: "document",
+  fields: [
+    defineField({
+      name: "title",
+      title: "Title",
+      type: "string",
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: "slug",
+      title: "Slug",
+      type: "slug",
+      options: { source: "title", maxLength: 96 },
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: "publishedAt",
+      title: "Published At",
+      type: "datetime",
+    }),
+    defineField({
+      name: "excerpt",
+      title: "Excerpt",
+      type: "text",
+      rows: 3,
+    }),
+    defineField({
+      name: "body",
+      title: "Body",
+      type: "array",
+      of: [{ type: "block" }],
+    }),
+    defineField({
+      name: "seo",
+      title: "SEO",
+      type: "seo",
+    }),
+  ],
+});

package/template/addons/sanity/sanity/schemaTypes/index.ts

@@ -0,0 +1,4 @@
+import { post } from "./documents/post";
+import { seo } from "./objects/seo";
+
+export const schemaTypes = [post, seo];

package/template/addons/sanity/sanity/schemaTypes/objects/seo.ts

@@ -0,0 +1,27 @@
+import { defineType, defineField } from "sanity";
+
+export const seo = defineType({
+  name: "seo",
+  title: "SEO",
+  type: "object",
+  fields: [
+    defineField({
+      name: "metaTitle",
+      title: "Meta Title",
+      type: "string",
+      validation: (rule) => rule.max(70).warning("Should be under 70 characters"),
+    }),
+    defineField({
+      name: "metaDescription",
+      title: "Meta Description",
+      type: "text",
+      rows: 3,
+      validation: (rule) => rule.max(160).warning("Should be under 160 characters"),
+    }),
+    defineField({
+      name: "ogImage",
+      title: "Open Graph Image",
+      type: "image",
+    }),
+  ],
+});

package/template/addons/sanity/src/lib/sanity.ts

@@ -0,0 +1,16 @@
+import { createClient } from "@sanity/client";
+import imageUrlBuilder from "@sanity/image-url";
+import type { SanityImageSource } from "@sanity/image-url/lib/types/types";
+
+export const sanityClient = createClient({
+  projectId: import.meta.env.VITE_SANITY_PROJECT_ID,
+  dataset: import.meta.env.VITE_SANITY_DATASET || "production",
+  apiVersion: import.meta.env.VITE_SANITY_API_VERSION || "2025-01-01",
+  useCdn: true,
+});
+
+const builder = imageUrlBuilder(sanityClient);
+
+export function urlFor(source: SanityImageSource) {
+  return builder.image(source);
+}

package/template/addons/sanity/src/routes/blog.$slug.tsx

@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PortableText } from "@portabletext/react";
+import { sanityClient } from "~/lib/sanity";
+
+const POST_QUERY = `*[_type == "post" && slug.current == $slug][0] {
+  _id,
+  title,
+  slug,
+  publishedAt,
+  body,
+  "seo": seo {
+    metaTitle,
+    metaDescription
+  }
+}`;
+
+export const Route = createFileRoute("/blog/$slug")({
+  loader: async ({ params }) => {
+    const post = await sanityClient.fetch(POST_QUERY, { slug: params.slug });
+    if (!post) throw new Error("Post not found");
+    return { post };
+  },
+  head: ({ loaderData }) => {
+    const { post } = loaderData;
+    return {
+      meta: [
+        { title: post.seo?.metaTitle || post.title },
+        ...(post.seo?.metaDescription
+          ? [{ name: "description", content: post.seo.metaDescription }]
+          : []),
+      ],
+    };
+  },
+  component: BlogPost,
+});
+
+function BlogPost() {
+  const { post } = Route.useLoaderData();
+
+  return (
+    <article className="prose prose-invert max-w-none">
+      <h1 className="text-4xl font-bold text-white mb-2">{post.title}</h1>
+      {post.publishedAt && (
+        <time className="text-sm text-gray-500 block mb-8">
+          {new Date(post.publishedAt).toLocaleDateString()}
+        </time>
+      )}
+      <div className="text-gray-300">
+        <PortableText value={post.body} />
+      </div>
+    </article>
+  );
+}

package/template/addons/sanity/src/routes/blog.index.tsx

@@ -0,0 +1,52 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { sanityClient } from "~/lib/sanity";
+
+const POSTS_QUERY = `*[_type == "post"] | order(publishedAt desc) {
+  _id,
+  title,
+  slug,
+  publishedAt,
+  excerpt
+}`;
+
+export const Route = createFileRoute("/blog/")({
+  loader: async () => {
+    const posts = await sanityClient.fetch(POSTS_QUERY);
+    return { posts };
+  },
+  component: BlogIndex,
+});
+
+function BlogIndex() {
+  const { posts } = Route.useLoaderData();
+
+  return (
+    <div className="space-y-8">
+      {posts.length === 0 ? (
+        <p className="text-gray-400">No posts yet. Create one in your Sanity Studio!</p>
+      ) : (
+        posts.map((post: any) => (
+          <article key={post._id} className="border-b border-gray-800 pb-8">
+            <Link
+              to="/blog/$slug"
+              params={{ slug: post.slug.current }}
+              className="group"
+            >
+              <h2 className="text-2xl font-semibold text-white group-hover:text-blue-400 transition-colors">
+                {post.title}
+              </h2>
+            </Link>
+            {post.publishedAt && (
+              <time className="text-sm text-gray-500 mt-1 block">
+                {new Date(post.publishedAt).toLocaleDateString()}
+              </time>
+            )}
+            {post.excerpt && (
+              <p className="text-gray-300 mt-3">{post.excerpt}</p>
+            )}
+          </article>
+        ))
+      )}
+    </div>
+  );
+}

package/template/addons/sanity/src/routes/blog.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/blog")({
+  component: BlogLayout,
+});
+
+function BlogLayout() {
+  return (
+    <div className="min-h-screen bg-gray-900">
+      <header className="border-b border-gray-800">
+        <div className="max-w-4xl mx-auto px-4 py-6">
+          <a href="/" className="text-gray-400 hover:text-white transition-colors">
+            &larr; Home
+          </a>
+          <h1 className="text-3xl font-bold text-white mt-2">Blog</h1>
+        </div>
+      </header>
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/template/addons/seo/public/llms.txt

@@ -0,0 +1,13 @@
+# PROJECT_NAME
+
+> A website built with Loumi — TanStack Start, Tailwind CSS & Cloudflare Workers.
+
+## About
+
+This website was scaffolded with create-loumi-app.
+For more information, visit the homepage.
+
+## Links
+
+- Homepage: /
+- Blog: /blog

package/template/addons/seo/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://example.com/sitemap.xml

package/template/addons/seo/src/lib/schema-org.ts

@@ -0,0 +1,90 @@
+interface OrganizationSchema {
+  name: string;
+  url: string;
+  logo?: string;
+}
+
+interface WebSiteSchema {
+  name: string;
+  url: string;
+  description?: string;
+}
+
+interface ArticleSchema {
+  title: string;
+  description?: string;
+  url: string;
+  datePublished: string;
+  dateModified?: string;
+  authorName?: string;
+  image?: string;
+}
+
+interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+function jsonLdScript(data: Record<string, any>): string {
+  return `<script type="application/ld+json">${JSON.stringify(data)}</script>`;
+}
+
+export function organizationSchema({ name, url, logo }: OrganizationSchema): string {
+  return jsonLdScript({
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name,
+    url,
+    ...(logo && { logo }),
+  });
+}
+
+export function webSiteSchema({ name, url, description }: WebSiteSchema): string {
+  return jsonLdScript({
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name,
+    url,
+    ...(description && { description }),
+  });
+}
+
+export function articleSchema({
+  title,
+  description,
+  url,
+  datePublished,
+  dateModified,
+  authorName,
+  image,
+}: ArticleSchema): string {
+  return jsonLdScript({
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: title,
+    url,
+    datePublished,
+    ...(dateModified && { dateModified }),
+    ...(description && { description }),
+    ...(image && { image }),
+    ...(authorName && {
+      author: {
+        "@type": "Person",
+        name: authorName,
+      },
+    }),
+  });
+}
+
+export function breadcrumbSchema(items: BreadcrumbItem[]): string {
+  return jsonLdScript({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  });
+}

package/template/addons/seo/src/lib/seo.ts

@@ -0,0 +1,56 @@
+interface SeoOptions {
+  title: string;
+  description?: string;
+  ogImage?: string;
+  ogType?: string;
+  twitterCard?: "summary" | "summary_large_image";
+  canonicalUrl?: string;
+  noIndex?: boolean;
+}
+
+export function seo({
+  title,
+  description,
+  ogImage,
+  ogType = "website",
+  twitterCard = "summary_large_image",
+  canonicalUrl,
+  noIndex = false,
+}: SeoOptions) {
+  const meta: Array<Record<string, string>> = [{ title }];
+
+  if (description) {
+    meta.push({ name: "description", content: description });
+  }
+
+  if (noIndex) {
+    meta.push({ name: "robots", content: "noindex, nofollow" });
+  }
+
+  // Open Graph
+  meta.push({ property: "og:title", content: title });
+  if (description) {
+    meta.push({ property: "og:description", content: description });
+  }
+  meta.push({ property: "og:type", content: ogType });
+  if (ogImage) {
+    meta.push({ property: "og:image", content: ogImage });
+  }
+
+  // Twitter
+  meta.push({ name: "twitter:card", content: twitterCard });
+  meta.push({ name: "twitter:title", content: title });
+  if (description) {
+    meta.push({ name: "twitter:description", content: description });
+  }
+  if (ogImage) {
+    meta.push({ name: "twitter:image", content: ogImage });
+  }
+
+  const links: Array<Record<string, string>> = [];
+  if (canonicalUrl) {
+    links.push({ rel: "canonical", href: canonicalUrl });
+  }
+
+  return { meta, links };
+}

package/template/base/CLAUDE.md

@@ -0,0 +1,41 @@
+# Project Guide
+
+## Stack
+
+- **Framework:** TanStack Start (React, file-based routing)
+- **Router:** TanStack Router (`src/routes/` directory, `createFileRoute`)
+- **Styling:** Tailwind CSS v4 (Vite plugin, `@import "tailwindcss"`, `@theme` for tokens)
+- **Hosting:** Cloudflare Workers (Wrangler, `wrangler.jsonc`)
+- **Build:** Vite + Vinxi (`app.config.ts`)
+- **Language:** TypeScript (strict mode)
+
+## Project Structure
+
+```
+src/
+├── routes/          # File-based routes (TanStack Router)
+│   ├── __root.tsx   # Root layout (HTML shell, head, styles)
+│   └── index.tsx    # Home page (/)
+├── components/      # Shared components
+├── styles/
+│   └── app.css      # Tailwind entry point
+└── router.tsx       # Router configuration
+```
+
+## Conventions
+
+- Path alias: `~/` maps to `src/`
+- Routes use TanStack Router conventions: `createFileRoute`, `createRootRoute`
+- Route data loading uses `loader` function (server-side)
+- Head/meta tags use the `head()` route option
+- CSS uses Tailwind v4 — no `tailwind.config.js`, use `@theme` in CSS instead
+- Environment variables prefixed with `VITE_` are exposed to the client
+
+## Commands
+
+```bash
+pnpm dev        # Start dev server (Vinxi)
+pnpm build      # Production build
+pnpm preview    # Preview with Wrangler (local Cloudflare)
+pnpm deploy     # Build + deploy to Cloudflare Workers
+```

package/template/base/_gitignore

@@ -0,0 +1,14 @@
+node_modules/
+dist/
+.output/
+.vinxi/
+.wrangler/
+.env
+.env.local
+.env.*.local
+*.log
+.DS_Store
+.convex/
+
+# AI
+CLAUDE.md

package/template/base/app.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "@tanstack/react-start/config";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  vite: {
+    plugins: () => [tailwindcss()],
+  },
+});

package/template/base/src/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,47 @@
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from "@tanstack/react-router";
+import type { ErrorComponentProps } from "@tanstack/react-router";
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter();
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  });
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-900 p-4">
+      <div className="text-center">
+        <ErrorComponent error={error} />
+        <div className="mt-6 flex gap-4 justify-center">
+          <button
+            onClick={() => router.invalidate()}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Try Again
+          </button>
+          {isRoot ? (
+            <a
+              href="/"
+              className="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors"
+            >
+              Home
+            </a>
+          ) : (
+            <Link
+              to="/"
+              className="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors"
+            >
+              Home
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/base/src/components/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from "@tanstack/react-router";
+
+export function NotFound() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-900">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-white mb-4">404</h1>
+        <p className="text-xl text-gray-300 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Go Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/template/base/src/router.tsx

@@ -0,0 +1,16 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+export function createRouter() {
+  return createTanStackRouter({
+    routeTree,
+    defaultPreload: "intent",
+    defaultPreloadStaleTime: 0,
+  });
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}

package/template/base/src/routes/__root.tsx

@@ -0,0 +1,49 @@
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from "@tanstack/react-router";
+import appCss from "~/styles/app.css?url";
+import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
+import { NotFound } from "~/components/NotFound";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "Loumi App" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+  }),
+  errorComponent: (props) => (
+    <RootDocument>
+      <DefaultCatchBoundary {...props} />
+    </RootDocument>
+  ),
+  notFoundComponent: () => <NotFound />,
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/base/src/routes/index.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  component: Home,
+});
+
+function Home() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="text-center">
+        <h1 className="text-5xl font-bold text-white mb-4">
+          Welcome to Loumi
+        </h1>
+        <p className="text-xl text-gray-300 mb-8">
+          Built with TanStack Start, Tailwind CSS & Cloudflare Workers
+        </p>
+        <a
+          href="https://tanstack.com/start"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Get Started
+        </a>
+      </div>
+    </div>
+  );
+}

package/template/base/src/styles/app.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --color-primary: #3b82f6;
+  --color-primary-dark: #2563eb;
+}

package/template/base/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "outDir": "dist"
+  },
+  "include": ["src", "app.config.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/template/base/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "PROJECT_NAME",
+  "compatibility_date": "2025-01-01",
+  "main": ".output/worker/_worker.js",
+  "assets": {
+    "directory": ".output/worker/assets"
+  }
+}