Full-stack React Router 7 app with React Server Components, Drizzle ORM, Conform forms, and DaisyUI. Includes auth, organizations, and SSR patterns.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 75/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Build full-stack React Router 7 applications with React Server Components, Drizzle ORM, Conform forms, and DaisyUI styling.
Required environment variables:
Each route folder contains:
Root shells:
Existing domains: `auth`, `organization`, `invitation`, `profile`
1. **Route files are server by default** - Do data fetching in `route.tsx`
2. **Client components opt-in** - Use `"use client"` in `client.tsx`
3. **Pass server data via props** - Never expose DB clients to client
4. **Use createHandle pattern** - Expose server-only components to parent shells
5. **Route middleware** - Export `unstable_middleware` from server routes for protection
6. **Caching** - Call `cacheRoute()` at top of server components for CDN caching
Define in `src/actions/<domain>/actions.ts`:
```typescript
"use server"
import { z } from "zod/v4"
import { parseWithZod } from "@conform-to/zod/v4"
export async function actionName(
prev: SubmissionResult | undefined,
formData: FormData
): Promise<SubmissionResult> {
// Parse with schema
const submission = parseWithZod(formData, { schema })
// Validation failure
if (submission.status !== "success") {
return submission.reply()
}
// Require authentication
const user = await requireUser()
// Perform side effects
await doSomething(submission.value)
// Redirect or return success
return submission.reply({ resetForm: true })
}
```
Use in route `client.tsx`:
```typescript
"use client"
import { useActionState } from "react"
import { useForm } from "@/components/form"
import { Form, Input, FormErrors, FormSuccessMessage } from "@/components/form"
import { actionName } from "@/actions/domain/actions"
import { schema } from "@/actions/domain/schema"
export function MyForm() {
const [lastResult, action, pending] = useActionState(actionName, undefined)
const [form, fields] = useForm({ action, lastResult, schema })
return (
<Form action={action} form={form}>
<Input field={fields.email} label="Email" />
<FormErrors form={form} />
<FormSuccessMessage lastResult={lastResult}>
Success!
</FormSuccessMessage>
<button disabled={pending}>Submit</button>
</Form>
)
}
```
Create in `src/actions/<domain>/schema.ts`:
```typescript
import { z } from "zod/v4"
export const mySchema = z.object({
email: z.string().email("Invalid email"),
name: z.string().min(1, "Required")
})
```
1. **Define tables** in `src/db/schema.ts`
2. **Get DB instance** via `getDb()` - never create new pools
3. **Separate reads/writes** - queries in `queries/*`, mutations in `mutations/*`
4. **Keep transactions in server actions** or route loaders
5. **Generate migrations** with `pnpm db:generate`
6. **Run migrations** with `pnpm db:migrate`
Example query:
```typescript
// src/db/queries/user.ts
import { getDb } from "@/db"
import { users } from "@/db/schema"
import { eq } from "drizzle-orm"
export async function getUserById(id: string) {
const db = getDb()
return await db.query.users.findFirst({
where: eq(users.id, id)
})
}
```
Use semantic component classes:
```typescript
// Container
<div className="max-w-screen-xl mx-auto px-4">
// Responsive menu
<ul className="menu sm:menu-horizontal">
// Drawer
<div className="drawer lg:drawer-open">
```
Use semantic colors: `primary`, `secondary`, `accent`, `base-100`, `base-200`, `base-300`
1. **Create route folder** in `src/routes/...` with `route.tsx` (server) and `client.tsx` (client)
2. **Add data access** in `src/db/queries/*` or `mutations/*` using `getDb()`
3. **Create actions** in `src/actions/<domain>/` with `schema.ts` and `actions.ts`
4. **Build form** in `client.tsx` using `useActionState`, `useForm`, and Form components
5. **Add authentication** with `unstable_middleware` in route and `requireUser()` in actions
6. **Enable caching** with `cacheRoute()` in server route if appropriate
7. **Style with DaisyUI** using component classes and semantic colors
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/react-router-7-rsc-dashboard-template/raw