claudeship 0.2.24 → 0.2.25

package/apps/server/dist/chat/prompts/frontend/react-native.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REACT_NATIVE_PROMPT = void 0;
+exports.REACT_NATIVE_PROMPT = `## React Native Development Guide
+
+### Project Structure
+
+\`\`\`
+frontend/
+├── src/
+│   ├── screens/             # Screen components
+│   │   ├── HomeScreen.tsx
+│   │   └── ProfileScreen.tsx
+│   ├── components/          # Reusable components
+│   │   ├── ui/              # Basic UI components
+│   │   └── features/        # Feature-specific
+│   ├── navigation/          # Navigation config
+│   │   ├── RootNavigator.tsx
+│   │   └── types.ts
+│   ├── hooks/               # Custom hooks
+│   ├── lib/                 # Utilities
+│   ├── stores/              # State management
+│   └── types/               # TypeScript types
+├── android/                 # Android native code
+├── ios/                     # iOS native code
+├── index.js                 # Entry point
+├── App.tsx                  # Root component
+├── package.json
+├── metro.config.js
+└── tsconfig.json
+\`\`\`
+
+### Essential Dependencies
+
+\`\`\`json
+{
+  "dependencies": {
+    "react": "18.2.0",
+    "react-native": "0.74.0",
+    "@react-navigation/native": "^6.1.0",
+    "@react-navigation/native-stack": "^6.9.0",
+    "@react-navigation/bottom-tabs": "^6.5.0",
+    "react-native-screens": "^3.29.0",
+    "react-native-safe-area-context": "^4.8.0",
+    "react-native-gesture-handler": "^2.14.0",
+    "react-native-reanimated": "^3.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/runtime": "^7.23.0",
+    "@types/react": "^18.2.0",
+    "typescript": "^5.3.0"
+  }
+}
+\`\`\`
+
+### Navigation Setup
+
+**Root Navigator**:
+\`\`\`tsx
+// src/navigation/RootNavigator.tsx
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+const Tab = createBottomTabNavigator<TabParamList>();
+
+function TabNavigator() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+    </Tab.Navigator>
+  );
+}
+
+export function RootNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Main"
+          component={TabNavigator}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+\`\`\`
+
+**Navigation Types**:
+\`\`\`tsx
+// src/navigation/types.ts
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+export type RootStackParamList = {
+  Main: undefined;
+  Details: { id: string };
+};
+
+export type RootStackScreenProps<T extends keyof RootStackParamList> =
+  NativeStackScreenProps<RootStackParamList, T>;
+\`\`\`
+
+### Screen Component Pattern
+
+\`\`\`tsx
+// src/screens/HomeScreen.tsx
+import { StyleSheet, View, Text, FlatList } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { RootStackScreenProps } from "../navigation/types";
+
+export function HomeScreen({ navigation }: RootStackScreenProps<"Main">) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Home</Text>
+      <FlatList
+        data={items}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            onPress={() => navigation.navigate("Details", { id: item.id })}
+          >
+            <ItemCard item={item} />
+          </TouchableOpacity>
+        )}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    padding: 16,
+  },
+});
+\`\`\`
+
+### API Communication
+
+\`\`\`tsx
+// src/lib/api.ts
+import { Platform } from "react-native";
+
+// Android emulator uses 10.0.2.2 for localhost
+const getBaseUrl = () => {
+  if (__DEV__) {
+    return Platform.OS === "android"
+      ? "http://10.0.2.2:3001"
+      : "http://localhost:3001";
+  }
+  return "https://api.example.com";
+};
+
+const API_URL = getBaseUrl();
+
+export async function fetcher<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(\`\${API_URL}\${endpoint}\`, {
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+    ...options,
+  });
+
+  if (!response.ok) {
+    throw new Error(\`API Error: \${response.status}\`);
+  }
+
+  return response.json();
+}
+\`\`\`
+
+### Critical Rules
+
+1. **Use SafeAreaView** from react-native-safe-area-context
+2. **Use FlatList** for lists, not ScrollView with map
+3. **Handle Android back button** with BackHandler
+4. **Test on both platforms** - iOS Simulator and Android Emulator
+5. **Use StyleSheet.create** for performance
+6. **Handle keyboard** with KeyboardAvoidingView
+
+### Platform-Specific Code
+
+\`\`\`tsx
+import { Platform, StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  shadow: Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+    },
+    android: {
+      elevation: 4,
+    },
+  }),
+});
+\`\`\`
+
+### Package Scripts
+
+\`\`\`json
+{
+  "scripts": {
+    "dev": "react-native start",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios"
+  }
+}
+\`\`\``;
+//# sourceMappingURL=react-native.js.map

package/apps/server/dist/chat/prompts/frontend/react-native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-native.js","sourceRoot":"","sources":["../../../../src/chat/prompts/frontend/react-native.ts"],"names":[],"mappings":";;;AAIa,QAAA,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2N5B,CAAC"}

package/apps/server/dist/chat/prompts/frontend/react-vite.d.ts

@@ -0,0 +1 @@
+export declare const REACT_VITE_PROMPT = "## Frontend: React + Vite + Tailwind CSS\n\nYou are building a React application using Vite as the build tool and Tailwind CSS for styling.\n\n### Technology Stack (Frontend)\n\n| Category | Technology | Notes |\n|----------|------------|-------|\n| Build Tool | Vite | Fast HMR and build |\n| Framework | React 18+ | Functional components with hooks |\n| Language | TypeScript | Strict mode |\n| UI Components | shadcn/ui | Install: `npx shadcn@latest add <component>` |\n| Styling | Tailwind CSS | Use design tokens |\n| State | Zustand | For global state |\n| Forms | React Hook Form + Zod | For validation |\n| Icons | Lucide React | Consistent iconography |\n| Routing | React Router | Client-side routing |\n\n### Project Initialization\n\n```bash\n# Create Vite project\nnpm create vite@latest . -- --template react-ts\n\n# Install dependencies\nnpm install react-router-dom zustand lucide-react clsx tailwind-merge\nnpm install react-hook-form @hookform/resolvers zod\n\n# Setup Tailwind CSS\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\n# Initialize shadcn/ui\nnpx shadcn@latest init -d\n```\n\n### Project Structure\n\n```\nsrc/\n\u251C\u2500\u2500 components/\n\u2502   \u251C\u2500\u2500 ui/              # shadcn/ui components\n\u2502   \u2514\u2500\u2500 [feature]/       # Feature-specific components\n\u251C\u2500\u2500 pages/               # Page components\n\u251C\u2500\u2500 hooks/               # Custom React hooks\n\u251C\u2500\u2500 lib/\n\u2502   \u251C\u2500\u2500 utils.ts         # cn() helper\n\u2502   \u2514\u2500\u2500 api.ts           # API client (if backend exists)\n\u251C\u2500\u2500 store/               # Zustand stores\n\u251C\u2500\u2500 types/               # TypeScript types\n\u251C\u2500\u2500 App.tsx              # Main app with router\n\u251C\u2500\u2500 main.tsx             # Entry point\n\u2514\u2500\u2500 index.css            # Tailwind imports\n```\n\n### Vite Configuration\n\n```typescript\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport path from 'path';\n\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, './src'),\n    },\n  },\n  server: {\n    port: 3000,\n    proxy: {\n      '/api': {\n        target: 'http://localhost:3001',\n        changeOrigin: true,\n      },\n    },\n  },\n});\n```\n\n### Router Setup\n\n```typescript\n// src/App.tsx\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport { Layout } from '@/components/Layout';\nimport { HomePage } from '@/pages/HomePage';\nimport { AboutPage } from '@/pages/AboutPage';\n\nexport default function App() {\n  return (\n    <BrowserRouter>\n      <Layout>\n        <Routes>\n          <Route path=\"/\" element={<HomePage />} />\n          <Route path=\"/about\" element={<AboutPage />} />\n        </Routes>\n      </Layout>\n    </BrowserRouter>\n  );\n}\n```\n\n### State Management (Zustand)\n\n```typescript\n// src/store/useStore.ts\nimport { create } from 'zustand';\n\ninterface AppState {\n  user: User | null;\n  setUser: (user: User | null) => void;\n  isLoading: boolean;\n  setLoading: (loading: boolean) => void;\n}\n\nexport const useStore = create<AppState>((set) => ({\n  user: null,\n  setUser: (user) => set({ user }),\n  isLoading: false,\n  setLoading: (isLoading) => set({ isLoading }),\n}));\n```\n\n### API Client Pattern\n\n```typescript\n// src/lib/api.ts\nconst API_URL = import.meta.env.VITE_API_URL || '/api';\n\nclass ApiClient {\n  async get<T>(endpoint: string): Promise<T> {\n    const res = await fetch(`${API_URL}${endpoint}`);\n    if (!res.ok) throw new Error(`API Error: ${res.status}`);\n    return res.json();\n  }\n\n  async post<T>(endpoint: string, data: unknown): Promise<T> {\n    const res = await fetch(`${API_URL}${endpoint}`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(data),\n    });\n    if (!res.ok) throw new Error(`API Error: ${res.status}`);\n    return res.json();\n  }\n}\n\nexport const api = new ApiClient();\n```\n\n### UI/UX Requirements\n\n- Use semantic HTML (header, main, footer, nav, section)\n- Implement responsive design (mobile-first)\n- Use shadcn/ui Button, Card, Input, etc.\n- Add hover/focus states for interactive elements\n- Include loading spinners for async operations\n- Show toast notifications for user feedback\n\n### Header/Navbar Best Practices\n\n- **NEVER use `container` class for headers** - it creates max-width gaps on wide screens\n- Use `w-full` for full-width headers that span the entire viewport\n\n```tsx\n// GOOD: Full-width header\n<header className=\"sticky top-0 z-50 border-b bg-background\">\n  <div className=\"flex h-14 w-full items-center justify-between px-4\">\n    {/* Logo on left, Nav on right */}\n  </div>\n</header>\n```\n\n### React Best Practices\n\n- **Custom hooks** for logic reuse (`useAuth`, `useProducts`)\n- **Memoization** for expensive operations (`useMemo`, `useCallback`)\n- **Proper dependency arrays** in useEffect\n- **Loading/Error states**: Always handle loading, error, and empty states\n- **Lazy loading** for code splitting with `React.lazy()`";

package/apps/server/dist/chat/prompts/frontend/react-vite.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REACT_VITE_PROMPT = void 0;
+exports.REACT_VITE_PROMPT = `## Frontend: React + Vite + Tailwind CSS
+
+You are building a React application using Vite as the build tool and Tailwind CSS for styling.
+
+### Technology Stack (Frontend)
+
+| Category | Technology | Notes |
+|----------|------------|-------|
+| Build Tool | Vite | Fast HMR and build |
+| Framework | React 18+ | Functional components with hooks |
+| Language | TypeScript | Strict mode |
+| UI Components | shadcn/ui | Install: \`npx shadcn@latest add <component>\` |
+| Styling | Tailwind CSS | Use design tokens |
+| State | Zustand | For global state |
+| Forms | React Hook Form + Zod | For validation |
+| Icons | Lucide React | Consistent iconography |
+| Routing | React Router | Client-side routing |
+
+### Project Initialization
+
+\`\`\`bash
+# Create Vite project
+npm create vite@latest . -- --template react-ts
+
+# Install dependencies
+npm install react-router-dom zustand lucide-react clsx tailwind-merge
+npm install react-hook-form @hookform/resolvers zod
+
+# Setup Tailwind CSS
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+
+# Initialize shadcn/ui
+npx shadcn@latest init -d
+\`\`\`
+
+### Project Structure
+
+\`\`\`
+src/
+├── components/
+│   ├── ui/              # shadcn/ui components
+│   └── [feature]/       # Feature-specific components
+├── pages/               # Page components
+├── hooks/               # Custom React hooks
+├── lib/
+│   ├── utils.ts         # cn() helper
+│   └── api.ts           # API client (if backend exists)
+├── store/               # Zustand stores
+├── types/               # TypeScript types
+├── App.tsx              # Main app with router
+├── main.tsx             # Entry point
+└── index.css            # Tailwind imports
+\`\`\`
+
+### Vite Configuration
+
+\`\`\`typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+});
+\`\`\`
+
+### Router Setup
+
+\`\`\`typescript
+// src/App.tsx
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { HomePage } from '@/pages/HomePage';
+import { AboutPage } from '@/pages/AboutPage';
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Routes>
+      </Layout>
+    </BrowserRouter>
+  );
+}
+\`\`\`
+
+### State Management (Zustand)
+
+\`\`\`typescript
+// src/store/useStore.ts
+import { create } from 'zustand';
+
+interface AppState {
+  user: User | null;
+  setUser: (user: User | null) => void;
+  isLoading: boolean;
+  setLoading: (loading: boolean) => void;
+}
+
+export const useStore = create<AppState>((set) => ({
+  user: null,
+  setUser: (user) => set({ user }),
+  isLoading: false,
+  setLoading: (isLoading) => set({ isLoading }),
+}));
+\`\`\`
+
+### API Client Pattern
+
+\`\`\`typescript
+// src/lib/api.ts
+const API_URL = import.meta.env.VITE_API_URL || '/api';
+
+class ApiClient {
+  async get<T>(endpoint: string): Promise<T> {
+    const res = await fetch(\`\${API_URL}\${endpoint}\`);
+    if (!res.ok) throw new Error(\`API Error: \${res.status}\`);
+    return res.json();
+  }
+
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    const res = await fetch(\`\${API_URL}\${endpoint}\`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) throw new Error(\`API Error: \${res.status}\`);
+    return res.json();
+  }
+}
+
+export const api = new ApiClient();
+\`\`\`
+
+### UI/UX Requirements
+
+- Use semantic HTML (header, main, footer, nav, section)
+- Implement responsive design (mobile-first)
+- Use shadcn/ui Button, Card, Input, etc.
+- Add hover/focus states for interactive elements
+- Include loading spinners for async operations
+- Show toast notifications for user feedback
+
+### Header/Navbar Best Practices
+
+- **NEVER use \`container\` class for headers** - it creates max-width gaps on wide screens
+- Use \`w-full\` for full-width headers that span the entire viewport
+
+\`\`\`tsx
+// GOOD: Full-width header
+<header className="sticky top-0 z-50 border-b bg-background">
+  <div className="flex h-14 w-full items-center justify-between px-4">
+    {/* Logo on left, Nav on right */}
+  </div>
+</header>
+\`\`\`
+
+### React Best Practices
+
+- **Custom hooks** for logic reuse (\`useAuth\`, \`useProducts\`)
+- **Memoization** for expensive operations (\`useMemo\`, \`useCallback\`)
+- **Proper dependency arrays** in useEffect
+- **Loading/Error states**: Always handle loading, error, and empty states
+- **Lazy loading** for code splitting with \`React.lazy()\``;
+//# sourceMappingURL=react-vite.js.map

package/apps/server/dist/chat/prompts/frontend/react-vite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-vite.js","sourceRoot":"","sources":["../../../../src/chat/prompts/frontend/react-vite.ts"],"names":[],"mappings":";;;AAMa,QAAA,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DAsL2B,CAAC"}

package/apps/server/dist/chat/prompts/frontend/svelte.d.ts

@@ -0,0 +1 @@
+export declare const SVELTE_PROMPT = "## Frontend: SvelteKit + Tailwind CSS\n\nYou are building a SvelteKit application with Tailwind CSS.\n\n### Technology Stack (Frontend)\n\n| Category | Technology | Notes |\n|----------|------------|-------|\n| Framework | SvelteKit | File-based routing |\n| Language | TypeScript | Strict mode |\n| Styling | Tailwind CSS | Use design tokens |\n| State | Svelte stores | Built-in reactivity |\n| Forms | Superforms + Zod | For validation |\n| Icons | Lucide Svelte | Consistent iconography |\n\n### Project Initialization\n\n```bash\n# Create SvelteKit project\nnpx sv create . --template minimal --types ts\n\n# Install dependencies\nnpm install lucide-svelte clsx tailwind-merge\nnpm install sveltekit-superforms zod\n\n# Setup Tailwind CSS\nnpx svelte-add@latest tailwindcss\n```\n\n### Project Structure\n\n```\nsrc/\n\u251C\u2500\u2500 routes/\n\u2502   \u251C\u2500\u2500 +layout.svelte     # Root layout\n\u2502   \u251C\u2500\u2500 +page.svelte       # Home page\n\u2502   \u251C\u2500\u2500 +error.svelte      # Error page\n\u2502   \u251C\u2500\u2500 about/\n\u2502   \u2502   \u2514\u2500\u2500 +page.svelte\n\u2502   \u2514\u2500\u2500 api/               # API routes\n\u2502       \u2514\u2500\u2500 users/\n\u2502           \u2514\u2500\u2500 +server.ts\n\u251C\u2500\u2500 lib/\n\u2502   \u251C\u2500\u2500 components/        # Reusable components\n\u2502   \u2502   \u2514\u2500\u2500 ui/\n\u2502   \u251C\u2500\u2500 stores/            # Svelte stores\n\u2502   \u2514\u2500\u2500 utils.ts           # Utilities\n\u251C\u2500\u2500 app.html               # HTML template\n\u251C\u2500\u2500 app.css                # Global styles\n\u2514\u2500\u2500 app.d.ts               # Type declarations\n```\n\n### Component Pattern\n\n```svelte\n<!-- src/lib/components/UserCard.svelte -->\n<script lang=\"ts\">\n  import type { User } from '$lib/types';\n\n  export let user: User;\n  export let showEmail = true;\n\n  $: initials = user.name\n    .split(' ')\n    .map((n) => n[0])\n    .join('')\n    .toUpperCase();\n\n  import { createEventDispatcher } from 'svelte';\n  const dispatch = createEventDispatcher<{ select: User }>();\n\n  const handleClick = () => {\n    dispatch('select', user);\n  };\n</script>\n\n<div\n  class=\"p-4 border rounded-lg hover:border-primary cursor-pointer\"\n  on:click={handleClick}\n  on:keypress={handleClick}\n  role=\"button\"\n  tabindex=\"0\"\n>\n  <div class=\"flex items-center gap-3\">\n    <div class=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\n      {initials}\n    </div>\n    <div>\n      <h3 class=\"font-medium\">{user.name}</h3>\n      {#if showEmail}\n        <p class=\"text-sm text-muted-foreground\">{user.email}</p>\n      {/if}\n    </div>\n  </div>\n</div>\n```\n\n### Svelte Store\n\n```typescript\n// src/lib/stores/userStore.ts\nimport { writable, derived } from 'svelte/store';\nimport type { User } from '$lib/types';\n\nfunction createUserStore() {\n  const users = writable<User[]>([]);\n  const isLoading = writable(false);\n  const error = writable<string | null>(null);\n\n  const userCount = derived(users, ($users) => $users.length);\n\n  async function fetchUsers() {\n    isLoading.set(true);\n    error.set(null);\n    try {\n      const res = await fetch('/api/users');\n      if (!res.ok) throw new Error('Failed to fetch');\n      users.set(await res.json());\n    } catch (e) {\n      error.set(e instanceof Error ? e.message : 'Unknown error');\n    } finally {\n      isLoading.set(false);\n    }\n  }\n\n  return {\n    users,\n    isLoading,\n    error,\n    userCount,\n    fetchUsers,\n  };\n}\n\nexport const userStore = createUserStore();\n```\n\n### Page Load Data\n\n```typescript\n// src/routes/users/+page.server.ts\nimport type { PageServerLoad } from './$types';\nimport { db } from '$lib/server/db';\n\nexport const load: PageServerLoad = async () => {\n  const users = await db.user.findMany();\n  return { users };\n};\n```\n\n```svelte\n<!-- src/routes/users/+page.svelte -->\n<script lang=\"ts\">\n  import type { PageData } from './$types';\n  import UserCard from '$lib/components/UserCard.svelte';\n\n  export let data: PageData;\n</script>\n\n<div class=\"container mx-auto py-8\">\n  <h1 class=\"text-2xl font-bold mb-6\">Users</h1>\n  <div class=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n    {#each data.users as user (user.id)}\n      <UserCard {user} />\n    {/each}\n  </div>\n</div>\n```\n\n### API Routes\n\n```typescript\n// src/routes/api/users/+server.ts\nimport { json } from '@sveltejs/kit';\nimport type { RequestHandler } from './$types';\nimport { db } from '$lib/server/db';\n\nexport const GET: RequestHandler = async () => {\n  const users = await db.user.findMany();\n  return json(users);\n};\n\nexport const POST: RequestHandler = async ({ request }) => {\n  const body = await request.json();\n  const user = await db.user.create({ data: body });\n  return json(user, { status: 201 });\n};\n```\n\n### Form Actions\n\n```typescript\n// src/routes/contact/+page.server.ts\nimport type { Actions } from './$types';\nimport { fail } from '@sveltejs/kit';\n\nexport const actions: Actions = {\n  default: async ({ request }) => {\n    const formData = await request.formData();\n    const email = formData.get('email') as string;\n    const message = formData.get('message') as string;\n\n    if (!email || !message) {\n      return fail(400, { error: 'All fields are required' });\n    }\n\n    // Process form...\n\n    return { success: true };\n  },\n};\n```\n\n```svelte\n<!-- src/routes/contact/+page.svelte -->\n<script lang=\"ts\">\n  import type { ActionData } from './$types';\n  import { enhance } from '$app/forms';\n\n  export let form: ActionData;\n</script>\n\n<form method=\"POST\" use:enhance>\n  <input name=\"email\" type=\"email\" required />\n  <textarea name=\"message\" required />\n  <button type=\"submit\">Send</button>\n\n  {#if form?.error}\n    <p class=\"text-red-500\">{form.error}</p>\n  {/if}\n  {#if form?.success}\n    <p class=\"text-green-500\">Message sent!</p>\n  {/if}\n</form>\n```\n\n### Svelte Best Practices\n\n- **Use `$:` for reactive statements** - Svelte's reactivity is automatic\n- **Prefer stores for shared state** - Use writable/readable/derived appropriately\n- **Use `{#each}` with keys** - Always provide key for lists\n- **Server load functions** - Fetch data on server when possible\n- **Form actions** - Use SvelteKit form actions for mutations\n- **`use:enhance`** - Progressive enhancement for forms\n\n### What NOT to Do (Svelte specific)\n\n- Never use React/Vue patterns - Svelte has its own idioms\n- Never forget to export props with `export let`\n- Never mutate store values directly - use `.set()` or `.update()`\n- Never skip `$:` for reactive statements";