frontend

Frontend Scaffolding

Generates React components for CRUD operations on an entity.

Quick Scaffold

python .claude/skills/frontend/scripts/scaffold.py <EntityName>

# Examples:
python .claude/skills/frontend/scripts/scaffold.py Campaign
python .claude/skills/frontend/scripts/scaffold.py BlogPost --dry-run

Prerequisites: Run data_model scaffold first to create oRPC routes.

Generated Files

Post-Scaffold Steps

1. Add route to sidebar (if needed)
2. Customize table columns
3. Add form fields to create dialog
4. Run pnpm lint

Patterns

Grouped Query Hook

All CRUD operations in one hook:

const { list, create, update, remove } = useCampaign();

// List data
const { data, isLoading } = list;

// Mutations
await create.mutateAsync({ workspaceSlug, name });
await update.mutateAsync({ workspaceSlug, id, name });
await remove.mutateAsync({ workspaceSlug, id });

oRPC Direct Usage

For one-off queries, use oRPC directly:

import { orpc } from "@/lib/orpc-client";

// In component
const { data } = useQuery(
  orpc.campaign.list.queryOptions({
    input: { workspaceSlug },
  })
);

// Direct call (in handlers, loaders)
const result = await orpc.campaign.create.call({
  workspaceSlug,
  name: "New Campaign",
});

// Query key for invalidation
queryClient.invalidateQueries({
  queryKey: orpc.campaign.list.key({ input: { workspaceSlug } }),
});

TanStack Router Pattern

import { createFileRoute } from "@tanstack/react-router";
import * as z from "zod";

const searchSchema = z.object({
  status: z.enum(["active", "paused"]).optional(),
  page: z.coerce.number().positive().optional(),
});

export const Route = createFileRoute(
  "/_authenticated/workspaces/$workspaceSlug/campaign",
)({
  validateSearch: searchSchema,
  pendingComponent: WorkspaceLoading,
  component: CampaignPage,
});

Reference Files