{
  "context": "Tests whether the agent builds a page component following the project's data loading, mutation, layout, and access-control patterns: ensureQueryData in loader, Route.useLoaderData(), $api.mutationOptions, query invalidation, useTesslForm, SubmissionError, PageLayout wrapper, no inline UI, and feature flag gating.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "ensureQueryData in loader",
      "description": "The route loader calls `queryClient.ensureQueryData(...)` to pre-fetch data — not `fetchQuery`, `prefetchQuery`, or a hook inside the component",
      "max_score": 9
    },
    {
      "name": "Route.useLoaderData used",
      "description": "The page component reads its pre-fetched data via `Route.useLoaderData()` — not by calling a query hook directly inside the component body",
      "max_score": 8
    },
    {
      "name": "$api.mutationOptions used",
      "description": "The mutation is created using `$api.mutationOptions(...)` passed to `useMutation()` — not a plain `fetch()` call or a different mutation pattern",
      "max_score": 9
    },
    {
      "name": "Query invalidated after mutation",
      "description": "After a successful mutation, `queryClient.invalidateQueries(...)` is called to refresh the relevant cached data",
      "max_score": 8
    },
    {
      "name": "useTesslForm for submission",
      "description": "The form is created with `useTesslForm(...)` — not a plain `useForm` from react-hook-form, tanstack form, or a custom useState pattern",
      "max_score": 9
    },
    {
      "name": "SubmissionError rendered",
      "description": "The JSX includes `<form.SubmissionError />` (or equivalent) to surface API submission errors to the user",
      "max_score": 8
    },
    {
      "name": "PageLayout wraps content",
      "description": "The page component's return JSX has `<PageLayout>` as the outermost wrapper around all page content",
      "max_score": 9
    },
    {
      "name": "No inline UI in page",
      "description": "The page component does NOT contain inline styled UI (e.g. no `<Button>`, `<Badge>`, `<Text>` with styling, or `<Box>` with visual style props directly in the page JSX) — it only uses layout primitives and imported composite components",
      "max_score": 9
    },
    {
      "name": "Chakra layout primitives only",
      "description": "Page layout uses Chakra layout components (VStack, HStack, SimpleGrid, or Stack) — no custom CSS, no style objects, no className layout",
      "max_score": 7
    },
    {
      "name": "Feature flag in beforeLoad",
      "description": "The route definition includes a `beforeLoad` hook that calls `assertFeatureFlagEnabled(context, ...)` to gate access",
      "max_score": 9
    },
    {
      "name": "Tilde alias used",
      "description": "All project-internal imports use the `~/` prefix — no relative `../../` paths",
      "max_score": 5
    },
    {
      "name": "No file extensions in imports",
      "description": "None of the local import statements include a `.tsx` or `.ts` extension",
      "max_score": 5
    },
    {
      "name": "Chakra from @chakra-ui/react",
      "description": "All Chakra UI components are imported from `@chakra-ui/react` — not from sub-paths like `@chakra-ui/layout`",
      "max_score": 5
    }
  ]
}