{
  "context": "This criteria evaluates how well the engineer uses @radix-ui/react-tooltip's animation-aware CSS variables, specifically the --radix-tooltip-content-transform-origin variable, to create smooth animations that appear to emanate from the trigger element. The focus is on proper integration of the package's positioning system with CSS animations.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Component Structure",
      "description": "Uses the correct @radix-ui/react-tooltip components in proper composition: TooltipProvider wraps the application, Tooltip wraps each instance, TooltipTrigger for the button, TooltipContent for the content area, and optionally TooltipPortal.",
      "max_score": 20
    },
    {
      "name": "CSS Variable Usage",
      "description": "Uses the --radix-tooltip-content-transform-origin CSS variable in the transform-origin style property of the TooltipContent component to make animations emanate from the trigger position.",
      "max_score": 30
    },
    {
      "name": "Scale Animation",
      "description": "Implements CSS scale animation from 0.9 to 1.0 using either transform: scale() or the scale CSS property, properly coordinated with the transform-origin.",
      "max_score": 15
    },
    {
      "name": "Fade Animation",
      "description": "Implements CSS opacity animation from 0 to 1 using the opacity property, creating a fade-in effect when the tooltip opens.",
      "max_score": 10
    },
    {
      "name": "State-Based Styling",
      "description": "Uses the data-state attribute (data-state=\"closed\", data-state=\"delayed-open\", or data-state=\"instant-open\") to apply different CSS styles for open and closed states of the tooltip.",
      "max_score": 15
    },
    {
      "name": "Positioning Configuration",
      "description": "Configures the TooltipContent component with side=\"top\" prop to position the tooltip above the trigger button.",
      "max_score": 10
    }
  ]
}