{
  "context": "Tests whether the agent correctly translates Tailwind-based design specs into Chakra UI v3 components using only design tokens, with no hardcoded values. The agent is given a React + Tailwind component specification and must rewrite it using Chakra UI idioms and the project's token system.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "No hardcoded hex colors",
      "description": "No hex color codes (e.g., #ffffff, #1a202c) appear in the component file's style props or sx definitions",
      "max_score": 10
    },
    {
      "name": "Semantic color tokens used",
      "description": "Color props use semantic token names such as fg, fg.muted, fg.subtle, bg.muted, border.muted, or similar project token names — not raw CSS color values",
      "max_score": 10
    },
    {
      "name": "No hardcoded pixel spacing",
      "description": "No raw pixel values (e.g., '16px', '24px') appear in padding, margin, or gap style props — Chakra numeric scale tokens are used instead (e.g., '4', '6')",
      "max_score": 8
    },
    {
      "name": "Correct spacing scale mapping",
      "description": "At least one spacing value maps correctly to Chakra scale (e.g., 16px becomes '4', 8px becomes '2', 24px becomes '6')",
      "max_score": 8
    },
    {
      "name": "No hardcoded font names",
      "description": "No font family names (e.g., 'Arial', 'Helvetica', 'Atkinson Hyperlegible Next') appear directly in style props — fontFamily uses token values such as 'mono' for code blocks",
      "max_score": 8
    },
    {
      "name": "Named typography scale",
      "description": "Font size uses named scale values (xs, sm, md, lg, xl, 2xl, etc.) rather than pixel values",
      "max_score": 8
    },
    {
      "name": "Named font weight",
      "description": "Font weight uses named values (normal, medium, semibold, bold) not numeric values like 400 or 700",
      "max_score": 7
    },
    {
      "name": "Tailwind classes removed",
      "description": "No className strings containing Tailwind utility classes (e.g., className='flex', className='text-sm text-gray-500') appear in the output component",
      "max_score": 8
    },
    {
      "name": "Chakra layout components used",
      "description": "Layout uses Chakra components (Flex, HStack, VStack, Stack, Grid, SimpleGrid, Box) rather than div with Tailwind flexbox or grid className props",
      "max_score": 8
    },
    {
      "name": "Border radius token used",
      "description": "Border radius values use Chakra tokens (l1, l2, md, lg, xl, full) — no pixel values like '4px' or '6px' in borderRadius props",
      "max_score": 7
    },
    {
      "name": "Chakra imports from correct package",
      "description": "All Chakra UI components are imported from @chakra-ui/react, not from sub-paths like @chakra-ui/layout or @chakra-ui/typography",
      "max_score": 9
    },
    {
      "name": "No file extensions in local imports",
      "description": "All local import statements (using ~/ prefix or relative paths) do not include .tsx or .ts extensions",
      "max_score": 9
    }
  ]
}