{
  "context": "This evaluation assesses how well the engineer uses React's Fragment component to return multiple sibling elements from a component without adding extra wrapper DOM nodes. The focus is on proper Fragment usage, correct syntax, and understanding when and why to use Fragments.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Uses Fragment component",
      "description": "Component imports and uses React.Fragment or uses the Fragment shorthand syntax (<></>) to return multiple elements",
      "max_score": 35
    },
    {
      "name": "Avoids extra wrappers",
      "description": "Solution does not use unnecessary wrapper elements like <div> or <span> around the content, properly leveraging Fragment's ability to avoid adding DOM nodes",
      "max_score": 30
    },
    {
      "name": "Correct JSX syntax",
      "description": "Fragment is syntactically correct in JSX: either <React.Fragment>children</React.Fragment>, <Fragment>children</Fragment> (with proper import statement from 'react'), or the shorthand <>children</> syntax",
      "max_score": 25
    },
    {
      "name": "Returns correct structure",
      "description": "Component returns exactly three sibling elements (one heading and two paragraphs) grouped within the Fragment as specified in requirements",
      "max_score": 10
    }
  ]
}