{
  "context": "This criteria evaluates how well the engineer uses @headlessui/react's polymorphic rendering capability via the 'as' prop to render menu items as different HTML elements or custom components. The focus is on proper usage of the Menu component system with polymorphic rendering to create semantically correct navigation items.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Menu component usage",
      "description": "Uses the Menu component from @headlessui/react as the main container for the navigation menu",
      "max_score": 15
    },
    {
      "name": "MenuButton usage",
      "description": "Uses the MenuButton component to create the menu trigger button",
      "max_score": 10
    },
    {
      "name": "MenuItems usage",
      "description": "Uses the MenuItems component to wrap the list of menu options",
      "max_score": 10
    },
    {
      "name": "MenuItem for anchors",
      "description": "Uses MenuItem component with 'as' prop set to 'a' (or anchor element) for link-based navigation items (internal and external links)",
      "max_score": 25
    },
    {
      "name": "MenuItem for buttons",
      "description": "Uses MenuItem component with 'as' prop set to 'button' (or button element) for action-based items that trigger callbacks",
      "max_score": 25
    },
    {
      "name": "Polymorphic props",
      "description": "Correctly passes element-specific props (href, target, onClick) to MenuItem components based on the element type specified in the 'as' prop",
      "max_score": 15
    }
  ]
}