{
  "context": "This criteria evaluates how well the engineer uses @headlessui/react to implement state freezing during transition animations, ensuring content remains visible during closing animations to prevent visual flicker.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Disclosure Component Usage",
      "description": "Uses the Disclosure component (or Dialog/Popover) from @headlessui/react to create the toggleable details panel with proper parent-child component structure",
      "max_score": 20
    },
    {
      "name": "Transition Component Integration",
      "description": "Uses the Transition component from @headlessui/react to animate the panel opening and closing with appropriate enter and leave durations",
      "max_score": 25
    },
    {
      "name": "State Freezing Implementation",
      "description": "Properly implements state freezing by ensuring the display value (product details) remains visible during the closing transition, preventing content from disappearing before the animation completes. This can be achieved through render props exposing the transition state or by using Transition's unmount behavior",
      "max_score": 35
    },
    {
      "name": "Transition Timing Configuration",
      "description": "Correctly configures transition durations matching the spec requirements (300ms enter, 200ms leave) using Transition props like 'enter', 'enterFrom', 'enterTo', 'leave', 'leaveFrom', 'leaveTo' or equivalent duration props",
      "max_score": 20
    }
  ]
}