create-pilotprojects-app 0.2.0 → 0.3.0

package/README.md

@@ -55,18 +55,18 @@ The CLI is interactive — it asks a few questions then scaffolds, installs depe
 
 ## Interactive prompts
 
-| Prompt                         | Options             | Default           |
-| ------------------------------ | ------------------- | ----------------- |
-| Project name                   | Any lowercase slug  | —                 |
-| Package scope                  | `@<name>`           | `@<project-name>` |
-| Apps to scaffold               | Web / Mobile / Both | Both              |
-| Environments                   | development / uat / production *(local always included)* | production |
-| Include design system?         | Yes / No            | Yes               |
-| Include Sentry?                | Yes / No            | Yes               |
-| Include Resend (email)?        | Yes / No            | Yes               |
-| Include PostHog?               | Yes / No            | No                |
-| Google Analytics? _(web only)_ | Yes / No            | No                |
-| Package manager                | pnpm / npm / yarn   | pnpm              |
+| Prompt                         | Options                                                  | Default           |
+| ------------------------------ | -------------------------------------------------------- | ----------------- |
+| Project name                   | Any lowercase slug                                       | —                 |
+| Package scope                  | `@<name>`                                                | `@<project-name>` |
+| Apps to scaffold               | Web / Mobile / Both                                      | Both              |
+| Environments                   | development / uat / production _(local always included)_ | production        |
+| Include design system?         | Yes / No                                                 | Yes               |
+| Include Sentry?                | Yes / No                                                 | Yes               |
+| Include Resend (email)?        | Yes / No                                                 | Yes               |
+| Include PostHog?               | Yes / No                                                 | No                |
+| Google Analytics? _(web only)_ | Yes / No                                                 | No                |
+| Package manager                | pnpm / npm / yarn                                        | pnpm              |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pilotprojects-app",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CLI to scaffold the Pilotprojects monorepo boilerplate",
   "keywords": [
     "create",

package/templates/.prettierrc.cjs

@@ -0,0 +1,10 @@
+/** @type {import("prettier").Config} */
+// Template files reference {{PLACEHOLDER}} modules that can't be resolved.
+// Disabling prettier-plugin-tailwindcss here prevents class-sort config loading errors.
+module.exports = {
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "all",
+  printWidth: 100,
+};

package/templates/apps/mobile/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [require.resolve("{{PACKAGE_SCOPE}}/config/eslint/react-native")],
+  // react-native ships Flow-typed source; eslint-plugin-import can't parse it
+  rules: { "import/namespace": "off" },
+};

package/templates/apps/mobile/app/(auth)/login.tsx

@@ -1,9 +1,17 @@
+import { Button } from "{{PACKAGE_SCOPE}}/ui/native/button";
+import { Input } from "{{PACKAGE_SCOPE}}/ui/native/input";
 import { useState } from "react";
-import { View, Text, KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity } from "react-native";
+import {
+  View,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
 
 import { supabase } from "@/lib/supabase";
-import { Button } from "{{PACKAGE_SCOPE}}/ui/native/button";
-import { Input } from "{{PACKAGE_SCOPE}}/ui/native/input";
 
 export default function LoginScreen() {
   const [email, setEmail] = useState("");
@@ -26,16 +34,13 @@ export default function LoginScreen() {
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       className="flex-1 bg-background"
     >
-      <ScrollView
-        contentContainerStyle={{ flexGrow: 1 }}
-        keyboardShouldPersistTaps="handled"
-      >
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
         <View className="flex-1 items-center justify-center px-6 py-16">
           <View className="mb-10 items-center gap-2">
             <View className="h-16 w-16 items-center justify-center rounded-2xl bg-primary">
               <Text className="text-2xl font-bold text-primary-foreground">A</Text>
             </View>
-            <Text className="text-2xl font-bold text-foreground">{{PROJECT_NAME}}</Text>
+            <Text className="text-2xl font-bold text-foreground">{{ PROJECT_NAME }}</Text>
             <Text className="text-sm text-muted-foreground">Sign in to continue</Text>
           </View>
 
@@ -74,7 +79,7 @@ export default function LoginScreen() {
           </View>
 
           <View className="mt-8 flex-row items-center gap-1">
-            <Text className="text-sm text-muted-foreground">Don't have an account?</Text>
+            <Text className="text-sm text-muted-foreground">{"Don't have an account?"}</Text>
             <TouchableOpacity>
               <Text className="text-sm font-medium text-primary">Sign up</Text>
             </TouchableOpacity>
@@ -84,3 +89,7 @@ export default function LoginScreen() {
     </KeyboardAvoidingView>
   );
 }
+
+const styles = StyleSheet.create({
+  scrollContent: { flexGrow: 1 },
+});

package/templates/apps/mobile/app/(tabs)/index.tsx

@@ -1,7 +1,7 @@
+import { Card, CardHeader, CardTitle, CardContent } from "{{PACKAGE_SCOPE}}/ui/native/card";
 import { View, Text, ScrollView } from "react-native";
 
 import { trpc } from "@/lib/trpc/client";
-import { Card, CardHeader, CardTitle, CardContent } from "{{PACKAGE_SCOPE}}/ui/native/card";
 
 export default function HomeScreen() {
   const { data: user, isLoading } = trpc.user.me.useQuery();
@@ -18,9 +18,7 @@ export default function HomeScreen() {
               <CardTitle>Welcome back</CardTitle>
             </CardHeader>
             <CardContent>
-              <Text className="text-muted-foreground">
-                {user?.displayName ?? user?.email}
-              </Text>
+              <Text className="text-muted-foreground">{user?.displayName ?? user?.email}</Text>
             </CardContent>
           </Card>
         )}

package/templates/apps/mobile/app/_layout.tsx

@@ -1,9 +1,9 @@
 import "../global.css";
 
-import { useEffect, useState } from "react";
-import { Stack, useRouter, useSegments } from "expo-router";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as Sentry from "@sentry/react-native";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Stack, useRouter, useSegments } from "expo-router";
+import { useEffect, useState } from "react";
 
 import { supabase } from "@/lib/supabase";
 import { trpc, makeTRPCClient } from "@/lib/trpc/client";
@@ -25,7 +25,9 @@ function AuthGate({ children }: { children: React.ReactNode }) {
   const segments = useSegments();
 
   useEffect(() => {
-    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
       const inAuthGroup = segments[0] === "(auth)";
 
       if (!session && !inAuthGroup) {
@@ -36,7 +38,7 @@ function AuthGate({ children }: { children: React.ReactNode }) {
     });
 
     return () => subscription.unsubscribe();
-  }, [segments]);
+  }, [segments, router]);
 
   return <>{children}</>;
 }

package/templates/apps/mobile/lib/supabase.ts

@@ -1,5 +1,5 @@
-import { createClient } from "@supabase/supabase-js";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { createClient } from "@supabase/supabase-js";
 
 export const supabase = createClient(
   process.env.EXPO_PUBLIC_SUPABASE_URL!,

package/templates/apps/mobile/lib/trpc/client.ts

@@ -1,9 +1,8 @@
-import { createTRPCReact } from "@trpc/react-query";
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/api";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
 import superjson from "superjson";
 
-import type { AppRouter } from "{{PACKAGE_SCOPE}}/api";
-
 import { supabase } from "../supabase";
 
 // Used for hooks: trpc.user.me.useQuery() etc.
@@ -20,9 +19,7 @@ export function makeTRPCClient() {
           const {
             data: { session },
           } = await supabase.auth.getSession();
-          return session?.access_token
-            ? { Authorization: `Bearer ${session.access_token}` }
-            : {};
+          return session?.access_token ? { Authorization: `Bearer ${session.access_token}` } : {};
         },
       }),
     ],

package/templates/apps/mobile/nativewind-env.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="nativewind/types" />
+/// <reference types="react-native-css-interop/types" />
+
+// Ensure className is always available on core RN components regardless of
+// whether the react-native-css-interop reference resolves in pnpm's isolated store.
+import "react-native";
+declare module "react-native" {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+}
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
+
+// Allow CSS file imports (processed by NativeWind/Metro at build time)
+declare module "*.css" {}

package/templates/apps/mobile/package.json

@@ -39,9 +39,10 @@
     "zod": "^3.23.0"
   },
   "devDependencies": {
+    "{{PACKAGE_SCOPE}}/config": "workspace:*",
     "@babel/core": "^7.24.0",
     "@types/react": "~18.3.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.5.0"
   }

package/templates/apps/mobile/tailwind.config.ts

@@ -0,0 +1,55 @@
+import type { Config } from "tailwindcss";
+
+// Mobile uses hex values directly — react-native-css-interop@0.1.x cannot resolve
+// hsl(var(--token)) at runtime on native. The preset's CSS-variable-based colors
+// are overridden here with equivalent hex values that NativeWind can generate static styles from.
+export default {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  presets: [require("nativewind/preset")],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "../../packages/ui/src/native/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "#ffffff",
+        foreground: "#0f172a",
+        primary: {
+          DEFAULT: "#3b82f6",
+          foreground: "#f8fafc",
+        },
+        secondary: {
+          DEFAULT: "#f1f5f9",
+          foreground: "#1e293b",
+        },
+        destructive: {
+          DEFAULT: "#ef4444",
+          foreground: "#f8fafc",
+        },
+        muted: {
+          DEFAULT: "#f1f5f9",
+          foreground: "#64748b",
+        },
+        accent: {
+          DEFAULT: "#f1f5f9",
+          foreground: "#1e293b",
+        },
+        card: {
+          DEFAULT: "#ffffff",
+          foreground: "#0f172a",
+        },
+        border: "#e2e8f0",
+        input: "#e2e8f0",
+        ring: "#3b82f6",
+      },
+      borderRadius: {
+        sm: "4px",
+        md: "6px",
+        lg: "8px",
+        xl: "12px",
+      },
+    },
+  },
+} satisfies Config;

package/templates/apps/web/.eslintrc.cjs

@@ -0,0 +1,2 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = { extends: [require.resolve("{{PACKAGE_SCOPE}}/config/eslint/base")] };

package/templates/apps/web/app/(auth)/login/page.tsx

@@ -1,12 +1,17 @@
 "use client";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
 import { createBrowserClient } from "{{PACKAGE_SCOPE}}/auth/client";
 import { Button } from "{{PACKAGE_SCOPE}}/ui/web/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "{{PACKAGE_SCOPE}}/ui/web/card";
 import { Input } from "{{PACKAGE_SCOPE}}/ui/web/input";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{PACKAGE_SCOPE}}/ui/web/card";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -39,7 +44,7 @@ export default function LoginPage() {
         <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-lg font-bold text-primary-foreground">
           A
         </div>
-        <span className="text-xl font-semibold text-foreground">{{PROJECT_NAME}}</span>
+        <span className="text-xl font-semibold text-foreground">{{ PROJECT_NAME }}</span>
       </div>
 
       <Card className="w-full max-w-sm shadow-md">

package/templates/apps/web/app/(dashboard)/dashboard/page.tsx

@@ -1,6 +1,7 @@
-import { api } from "@/lib/trpc/server";
 import { Card, CardContent, CardHeader, CardTitle } from "{{PACKAGE_SCOPE}}/ui/web/card";
 
+import { api } from "@/lib/trpc/server";
+
 export default async function DashboardPage() {
   const user = await api.user.me();
 
@@ -11,9 +12,7 @@ export default async function DashboardPage() {
           <CardTitle>Welcome back</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">
-            {user.displayName ?? user.email}
-          </p>
+          <p className="text-muted-foreground">{user.displayName ?? user.email}</p>
         </CardContent>
       </Card>
     </main>

package/templates/apps/web/app/(dashboard)/layout.tsx

@@ -1,12 +1,13 @@
-import { redirect } from "next/navigation";
-import { cookies } from "next/headers";
-
 import { createServerClient } from "{{PACKAGE_SCOPE}}/auth/server";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const cookieStore = await cookies();
   const supabase = createServerClient(cookieStore);
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
   if (!user) redirect("/login");
 

package/templates/apps/web/app/api/trpc/[trpc]/route.ts

@@ -1,14 +1,15 @@
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import { cookies } from "next/headers";
-
 import { appRouter } from "{{PACKAGE_SCOPE}}/api";
-import { db } from "{{PACKAGE_SCOPE}}/db";
 import { createServerClient } from "{{PACKAGE_SCOPE}}/auth/server";
+import { db } from "{{PACKAGE_SCOPE}}/db";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import { cookies } from "next/headers";
 
 async function createContext() {
   const cookieStore = await cookies();
   const supabase = createServerClient(cookieStore);
-  const { data: { session } } = await supabase.auth.getSession();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
 
   return {
     db,

package/templates/apps/web/lib/trpc/client.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { createTRPCReact } from "@trpc/react-query";
-
 import type { AppRouter } from "{{PACKAGE_SCOPE}}/api";
+import { createTRPCReact } from "@trpc/react-query";
 
 export const trpc = createTRPCReact<AppRouter>();

package/templates/apps/web/lib/trpc/server.ts

@@ -1,16 +1,16 @@
-import { createCallerFactory } from "@trpc/server";
-import { cookies } from "next/headers";
-
-import { appRouter } from "{{PACKAGE_SCOPE}}/api";
-import { db } from "{{PACKAGE_SCOPE}}/db";
+import { appRouter, createCallerFactory } from "{{PACKAGE_SCOPE}}/api";
 import { createServerClient } from "{{PACKAGE_SCOPE}}/auth/server";
+import { db } from "{{PACKAGE_SCOPE}}/db";
+import { cookies } from "next/headers";
 
 const createCaller = createCallerFactory(appRouter);
 
 export const api = createCaller(async () => {
   const cookieStore = await cookies();
   const supabase = createServerClient(cookieStore);
-  const { data: { session } } = await supabase.auth.getSession();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
 
   return {
     db,

package/templates/apps/web/package.json

@@ -4,41 +4,49 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "next dev --turbo",
-    "lint": "next lint",
+    "dev": "next dev",
+    "lint": "eslint app lib --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
     "start": "next start"
   },
   "dependencies": {
     "{{PACKAGE_SCOPE}}/api": "workspace:*",
     "{{PACKAGE_SCOPE}}/auth": "workspace:*",
+    "{{PACKAGE_SCOPE}}/email": "workspace:*",
     "{{PACKAGE_SCOPE}}/ui": "workspace:*",
     "{{PACKAGE_SCOPE}}/validators": "workspace:*",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@sentry/nextjs": "^8.30.0",
     "@supabase/supabase-js": "^2.45.0",
     "@supabase/ssr": "^0.5.0",
     "@tanstack/react-query": "^5.56.0",
     "@trpc/client": "^11.0.0",
     "@trpc/react-query": "^11.0.0",
     "@trpc/server": "^11.0.0",
-    "@sentry/nextjs": "^8.30.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "next": "15.0.0",
+    "next-themes": "^0.3.0",
     "posthog-js": "^1.161.0",
     "posthog-node": "^4.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "superjson": "^2.2.0",
+    "tailwind-merge": "^2.5.0",
     "zod": "^3.23.0",
     "@next/third-parties": "^14.2.0"
   },
   "devDependencies": {
+    "{{PACKAGE_SCOPE}}/config": "workspace:*",
+    "{{PACKAGE_SCOPE}}/db": "workspace:*",
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0",
-    "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.0",
+    "eslint": "^8",
     "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.0"
   }
 }

package/templates/packages/api/.eslintrc.cjs

@@ -0,0 +1,2 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = { extends: [require.resolve("{{PACKAGE_SCOPE}}/config/eslint/base")] };

package/templates/packages/api/src/index.ts

@@ -1,9 +1,11 @@
 export { appRouter } from "./root";
+export { createCallerFactory } from "./trpc";
 export type { AppRouter } from "./root";
 export type { TRPCContext, AuthedContext } from "./trpc";
 
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+
 import type { AppRouter } from "./root";
 
-export type RouterInputs  = inferRouterInputs<AppRouter>;
+export type RouterInputs = inferRouterInputs<AppRouter>;
 export type RouterOutputs = inferRouterOutputs<AppRouter>;

package/templates/packages/api/src/trpc.ts

@@ -29,8 +29,9 @@ const t = initTRPC.context<TRPCContext>().create({
   },
 });
 
-export const createTRPCRouter  = t.router;
-export const publicProcedure   = t.procedure;
+export const createTRPCRouter = t.router;
+export const createCallerFactory = t.createCallerFactory;
+export const publicProcedure = t.procedure;
 
 const enforceAuth = t.middleware(({ ctx, next }) => {
   if (!ctx.session || !ctx.user) {

package/templates/packages/auth/.eslintrc.cjs

@@ -0,0 +1,2 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = { extends: [require.resolve("{{PACKAGE_SCOPE}}/config/eslint/base")] };

package/templates/packages/auth/src/middleware.ts

@@ -2,23 +2,19 @@ import { createServerClient, type CookieOptions } from "@supabase/ssr";
 import { NextResponse, type NextRequest } from "next/server";
 
 export async function updateSession(request: NextRequest) {
-  let response = NextResponse.next({ request });
+  const response = NextResponse.next({ request });
 
-  const supabase = createServerClient(
-    process.env.SUPABASE_URL!,
-    process.env.SUPABASE_ANON_KEY!,
-    {
-      cookies: {
-        getAll: () => request.cookies.getAll(),
-        setAll: (cookiesToSet: { name: string; value: string; options: CookieOptions }[]) => {
-          cookiesToSet.forEach(({ name, value, options }) => {
-            request.cookies.set(name, value);
-            response.cookies.set(name, value, options);
-          });
-        },
+  const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
+    cookies: {
+      getAll: () => request.cookies.getAll(),
+      setAll: (cookiesToSet: { name: string; value: string; options: CookieOptions }[]) => {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          request.cookies.set(name, value);
+          response.cookies.set(name, value, options);
+        });
       },
     },
-  );
+  });
 
   await supabase.auth.getUser();
   return response;

package/templates/packages/ui/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [require.resolve("{{PACKAGE_SCOPE}}/config/eslint/base")],
+  // react-native ships Flow-typed source; eslint-plugin-import can't parse it
+  rules: { "import/namespace": "off" },
+};

package/templates/packages/ui/src/native/button.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Pressable, Text, type PressableProps } from "react-native";
+import { type PressableProps } from "react-native";
 
 import { cn } from "../lib/utils";
 
+import { StyledPressable, StyledText } from "./styled";
+
 interface ButtonProps extends PressableProps {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost";
   size?: "default" | "sm" | "lg";
@@ -21,37 +23,37 @@ function Button({
   ...props
 }: ButtonProps) {
   return (
-    <Pressable
+    <StyledPressable
       disabled={disabled}
       className={cn(
         "flex-row items-center justify-center rounded-md",
-        variant === "default"     && "bg-primary",
+        variant === "default" && "bg-primary",
         variant === "destructive" && "bg-destructive",
-        variant === "outline"     && "border border-input bg-background",
-        variant === "secondary"   && "bg-secondary",
-        variant === "ghost"       && "bg-transparent",
+        variant === "outline" && "border-input bg-background border",
+        variant === "secondary" && "bg-secondary",
+        variant === "ghost" && "bg-transparent",
         size === "default" && "h-10 px-4",
-        size === "sm"      && "h-9 px-3",
-        size === "lg"      && "h-11 px-8",
+        size === "sm" && "h-9 px-3",
+        size === "lg" && "h-11 px-8",
         disabled && "opacity-50",
         className,
       )}
       {...props}
     >
-      <Text
+      <StyledText
         className={cn(
           "text-sm font-medium",
-          variant === "default"     && "text-primary-foreground",
+          variant === "default" && "text-primary-foreground",
           variant === "destructive" && "text-destructive-foreground",
-          variant === "outline"     && "text-foreground",
-          variant === "secondary"   && "text-secondary-foreground",
-          variant === "ghost"       && "text-foreground",
+          variant === "outline" && "text-foreground",
+          variant === "secondary" && "text-secondary-foreground",
+          variant === "ghost" && "text-foreground",
           textClassName,
         )}
       >
         {children}
-      </Text>
-    </Pressable>
+      </StyledText>
+    </StyledPressable>
   );
 }
 

package/templates/packages/ui/src/native/card.tsx

@@ -1,41 +1,49 @@
 import * as React from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { type ViewProps } from "react-native";
 
 import { cn } from "../lib/utils";
 
+import { StyledView, StyledText } from "./styled";
+
 function Card({ className, ...props }: ViewProps & { className?: string }) {
   return (
-    <View
-      className={cn("rounded-lg border border-border bg-card p-4 shadow-sm", className)}
+    <StyledView
+      className={cn("border-border bg-card rounded-lg border p-4 shadow-sm", className)}
       {...props}
     />
   );
 }
 
 function CardHeader({ className, ...props }: ViewProps & { className?: string }) {
-  return <View className={cn("mb-3 flex-col gap-1", className)} {...props} />;
+  return <StyledView className={cn("mb-3 flex-col gap-1", className)} {...props} />;
 }
 
 function CardTitle({ children, className }: { children: React.ReactNode; className?: string }) {
   return (
-    <Text className={cn("text-xl font-semibold text-card-foreground", className)}>
+    <StyledText className={cn("text-card-foreground text-xl font-semibold", className)}>
       {children}
-    </Text>
+    </StyledText>
   );
 }
 
-function CardDescription({ children, className }: { children: React.ReactNode; className?: string }) {
+function CardDescription({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <Text className={cn("text-sm text-muted-foreground", className)}>{children}</Text>
+    <StyledText className={cn("text-muted-foreground text-sm", className)}>{children}</StyledText>
   );
 }
 
 function CardContent({ className, ...props }: ViewProps & { className?: string }) {
-  return <View className={cn("mt-2", className)} {...props} />;
+  return <StyledView className={cn("mt-2", className)} {...props} />;
 }
 
 function CardFooter({ className, ...props }: ViewProps & { className?: string }) {
-  return <View className={cn("mt-4 flex-row items-center", className)} {...props} />;
+  return <StyledView className={cn("mt-4 flex-row items-center", className)} {...props} />;
 }
 
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/templates/packages/ui/src/native/input.tsx

@@ -1,24 +1,26 @@
 import * as React from "react";
-import { TextInput, type TextInputProps } from "react-native";
+import { type TextInputProps } from "react-native";
 
 import { cn } from "../lib/utils";
 
+import { StyledTextInput } from "./styled";
+
 interface InputProps extends TextInputProps {
   className?: string;
 }
 
 function Input({ className, ...props }: InputProps) {
   return (
-    <TextInput
+    <StyledTextInput
       className={cn(
-        "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground",
+        "border-input bg-background text-foreground placeholder:text-muted-foreground h-10 w-full rounded-md border px-3 py-2 text-sm",
         props.editable === false && "opacity-50",
         className,
       )}
       placeholderTextColor="#64748b"
       {...props}
     />
-  );
+  ) as React.ReactElement;
 }
 
 export { Input };

package/templates/packages/ui/src/native/nativewind-env.d.ts

@@ -0,0 +1,28 @@
+// Augment React Native props with className for NativeWind/react-native-css-interop.
+// This mirrors what react-native-css-interop/types adds, scoped to this package
+// so it is always in scope regardless of which tsconfig compiles these files.
+import "react-native";
+
+declare module "react-native" {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+}

package/templates/packages/ui/src/native/styled.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  TextInput,
+  ScrollView,
+  type ViewProps,
+  type TextProps,
+  type PressableProps,
+  type TextInputProps,
+  type ScrollViewProps,
+} from "react-native";
+
+// NativeWind adds className at runtime via css-interop, but the stock React Native
+// types don't declare it. Cast here once so every native UI component can use className
+// without per-site suppressions.
+type WithClassName<T> = T & { className?: string };
+
+export const StyledView = View as React.ComponentType<WithClassName<ViewProps>>;
+export const StyledText = Text as React.ComponentType<WithClassName<TextProps>>;
+export const StyledPressable = Pressable as React.ComponentType<WithClassName<PressableProps>>;
+export const StyledTextInput = TextInput as React.ComponentType<WithClassName<TextInputProps>>;
+export const StyledScrollView = ScrollView as React.ComponentType<WithClassName<ScrollViewProps>>;

package/templates/packages/ui/src/web/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "../lib/utils";
 
@@ -9,18 +9,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:     "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:     "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:   "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:       "hover:bg-accent hover:text-accent-foreground",
-        link:        "text-primary underline-offset-4 hover:underline",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm:      "h-9 rounded-md px-3",
-        lg:      "h-11 rounded-md px-8",
-        icon:    "h-10 w-10",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
@@ -31,8 +31,7 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 

package/templates/packages/ui/src/web/input.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { cn } from "../lib/utils";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => (

package/templates/packages/ui/tsconfig.json

@@ -4,5 +4,6 @@
     "jsx": "react-jsx",
     "lib": ["ES2022", "dom"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "files": ["src/native/nativewind-env.d.ts"]
 }

package/templates/packages/validators/.eslintrc.cjs

@@ -0,0 +1,2 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = { extends: [require.resolve("{{PACKAGE_SCOPE}}/config/eslint/base")] };