{
  "context": "Tests whether the agent builds a low-level reusable component with correct file placement, a minimal Chakra-compatible API that forwards style props, correct design token mapping, proper naming, and comprehensive stories including all variants and edge cases — without using hardcoded values.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "File in src/components/",
      "description": "The component file is placed inside `src/components/` in its own PascalCase folder (e.g. `src/components/ConnectionStatus/ConnectionStatus.tsx`) — NOT in src/routes/ or any -components/ directory",
      "max_score": 8
    },
    {
      "name": "BoxProps or HTMLChakraProps extended",
      "description": "The component's props interface extends `BoxProps` or `HTMLChakraProps` (from `@chakra-ui/react`) to allow consumers to pass Chakra style props",
      "max_score": 9
    },
    {
      "name": "...rest spread on root element",
      "description": "The component spreads `...rest` onto its root element so that all consumer-provided style props (p, bg, color, etc.) are forwarded",
      "max_score": 9
    },
    {
      "name": "No hardcoded pixel values",
      "description": "No raw pixel values (e.g. '8px', '4px', '12px') appear in any style props — Chakra spacing scale tokens are used instead (e.g. '2', '1', 'xs')",
      "max_score": 8
    },
    {
      "name": "l1 border radius token used",
      "description": "The 4px corner radius uses the project's custom `l1` Chakra token — not '4px', '0.25rem', or a generic 'sm' token",
      "max_score": 8
    },
    {
      "name": "Semantic color tokens used",
      "description": "Status colors use Chakra semantic tokens (e.g. green.500, red.500, orange.400, or similar named tokens) — no hex color codes in any style props",
      "max_score": 8
    },
    {
      "name": "Named typography scale",
      "description": "Font size uses a named scale value (e.g. 'xs') and font weight uses a named value (e.g. 'medium') — not numeric values like '12' or '500'",
      "max_score": 7
    },
    {
      "name": "Stories co-located",
      "description": "The `.stories.tsx` file is in the same directory as the component file",
      "max_score": 6
    },
    {
      "name": "All 3 variant stories exported",
      "description": "Separate stories are exported for all three status states (connected, disconnected, pending/connecting)",
      "max_score": 8
    },
    {
      "name": "Edge case story exported",
      "description": "At least one story covers an edge case (e.g. long text, overflow, or a constrained container)",
      "max_score": 7
    },
    {
      "name": "Props interface exported",
      "description": "The component's TypeScript props interface (or type) is exported from the component file",
      "max_score": 6
    },
    {
      "name": "Tilde alias in imports",
      "description": "All project-internal imports across the produced files use the `~/` alias prefix",
      "max_score": 5
    },
    {
      "name": "No file extensions in imports",
      "description": "None of the local import statements include a `.tsx` or `.ts` file extension",
      "max_score": 5
    },
    {
      "name": "Chakra from @chakra-ui/react",
      "description": "All Chakra UI components and types are imported from `@chakra-ui/react` — not from sub-package paths",
      "max_score": 6
    }
  ]
}