{
  "context": "This criteria evaluates how well the engineer uses react-swipeable to implement tap detection and distinguish it from swipe gestures. The focus is on proper usage of the onTap callback and directional swipe callbacks to create an interactive image viewer.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "useSwipeable hook usage",
      "description": "The solution imports and calls the useSwipeable hook from react-swipeable to set up gesture handling",
      "max_score": 15
    },
    {
      "name": "onTap callback implementation",
      "description": "The solution implements the onTap callback to detect tap gestures and toggle the overlay visibility state",
      "max_score": 30
    },
    {
      "name": "onSwipedLeft callback",
      "description": "The solution implements the onSwipedLeft callback to navigate to the next image in the array",
      "max_score": 15
    },
    {
      "name": "onSwipedRight callback",
      "description": "The solution implements the onSwipedRight callback to navigate to the previous image in the array",
      "max_score": 15
    },
    {
      "name": "Handler spreading",
      "description": "The solution spreads the handlers object returned by useSwipeable onto the appropriate DOM element to attach event listeners",
      "max_score": 15
    },
    {
      "name": "Gesture separation",
      "description": "The solution correctly separates tap and swipe behaviors - taps toggle overlay, swipes navigate images, and swiping does not toggle the overlay",
      "max_score": 10
    }
  ]
}