Nano Banana Pro
Agent skill for nano-banana-pro
This document provides context and guidelines for GitHub Copilot when working with the SvelteKit Starter Project.
Sign in to like and favorite skills
This document provides context and guidelines for GitHub Copilot when working with the SvelteKit Starter Project.
This is a SvelteKit 5 Starter Template designed for fast-tracking modern web application development with authentication, database integration, and a complete UI component system.
src/lib/server/db/schema.ts(auth)/: Authentication flows (sign-in, email verification)/: Public home page+page.svelte, +page.server.ts, +layout.sveltehooks.server.ts$state, $derived, $effect)sveltekit-superforms + Zodapp.d.ts type definitionskebab-case.svelte (e.g., artist-create-form.svelte)PascalCase interfaces/typesUPPER_SNAKE_CASE exportssnake_case (Drizzle schema)// SvelteKit imports import { goto } from '$app/navigation'; import { page } from '$app/stores'; // Standard SvelteKit store // Better-Auth imports import { auth } from '$lib/auth'; // Library imports import * as Card from '$lib/components/ui/card/index.js'; import { Button } from '$lib/components/ui/button'; import { Input } from '$lib/components/ui/input'; // Database imports import { db } from '$lib/server/db/'; import { user, session } from '$lib/server/db/schema'; // Form handling import { superForm } from 'sveltekit-superforms'; import { zodClient } from 'sveltekit-superforms/adapters'; import { emailSchema } from '$lib/zod-schemas';
<script lang="ts"> // Imports import { Button } from '$lib/components/ui/button'; // Props using Svelte 5 syntax interface Props { title: string; optional?: boolean; } let { title, optional = false }: Props = $props(); // State using Svelte 5 runes let isLoading = $state(false); // Derived values let displayTitle = $derived(title.toUpperCase()); // Functions/event handlers function handleClick() { isLoading = true; // ... logic } </script> <!-- Markup with Tailwind classes and OKLCH colors --> <div class="bg-background text-foreground"> <Button onclick={handleClick} disabled={isLoading}> {displayTitle} </Button> </div> <style> /* Minimal custom styles - prefer Tailwind utilities */ </style>
event.locals.userdrizzle-kit// Use superforms with Zod validation import { superForm } from 'sveltekit-superforms'; import { zodClient } from 'sveltekit-superforms/adapters'; import { emailSchema } from '$lib/zod-schemas'; // In component let { form, errors, enhance } = superForm(data.form, { validators: zodClient(emailSchema) });
// Sign in with email (triggers OTP) const response = await auth.api.signInEmail({ body: { email } }); // Verify OTP const response = await auth.api.verifyEmail({ body: { email, otp } });
Use Drizzle with proper error handling and type safety
import { db } from '$lib/server/db/'; import { user } from '$lib/server/db/schema'; import { eq } from 'drizzle-orm'; // Query with type safety const foundUser = await db.select().from(user).where(eq(user.email, email)).limit(1); // Insert with validation const newUser = await db .insert(user) .values({ email: email.toLowerCase(), name: displayName, emailVerified: false }) .returning();
# Database (PostgreSQL) DATABASE_URL="postgres://user:password@host:port/db-name" # App Configuration BETTER_AUTH_SECRET="The Secret Code" BETTER_AUTH_URL="http://localhost:5173" # Base URL of your app # Brevo (formerly Sendinblue) Email Configuration BREVO_SMTP_HOST="smtp-relay.brevo.com" BREVO_SMTP_PORT="587" BREVO_SMTP_USER="your-brevo-smtp-login" BREVO_SMTP_PASSWORD="your-brevo-smtp-password" BREVO_FROM_EMAIL="[email protected]"
pnpm dev - Start development serverpnpm build - Build for productionpnpm preview - Preview production buildpnpm db:generate - Generate Drizzle migrationspnpm db:push - Push schema to databasepnpm db:migrate - Run database migrationspnpm db:studio - Open Drizzle Studiopnpm lint - Run ESLint and Prettierpnpm format - Format code with Prettiersrc/ ├── lib/ │ ├── components/ │ │ ├── auth/ # Auth-specific components │ │ └── ui/ # shadcn-svelte UI components │ ├── server/db/ # Database schema and client │ ├── auth.ts # Better-Auth configuration │ ├── client.ts # Database client setup │ ├── utils.ts # Utility functions │ └── zod-schemas.ts # Validation schemas ├── routes/ │ ├── (auth)/ # Authentication routes │ ├── +layout.svelte # Root layout │ ├── +layout.server.ts # Server layout logic │ └── +page.svelte # Home page ├── app.d.ts # TypeScript app definitions ├── app.html # HTML template └── hooks.server.ts # Server hooks (session handling)
$state, $derived, $effect), not legacy reactivityinterface Props with destructuring assignment$lib/zod-schemasevent.locals.user for auth statelet:, export let)pnpm db:push for development schema changespnpm db:generate to create migration filespnpm db:studio for visual data inspectionhooks.server.tsevent.localspnpm db:studio for visual data inspectionpnpm db:push for development schema updates/drizzle directorysrc/lib/auth.tshooks.server.tslayout.cssThe project uses a modern OKLCH-based color system with green/teal theming:
/* Example color usage */ :root { --background: oklch(0.9711 0.0074 80.7211); --primary: oklch(0.5234 0.1347 144.1672); /* ... other variables ... */ } .dark { --background: oklch(0.2683 0.0279 150.7681); --primary: oklch(0.6731 0.1624 144.2083); /* ... dark theme variables ... */ }
Use CSS custom properties via Tailwind:
bg-background, text-primary, etc.
This is a starter template designed to be cloned and customized. When helping with development:
When implementing new features, follow the established patterns for database schema, authentication flows, and component structure. The starter is designed to be production-ready while remaining flexible for customization.