{
  "context": "This evaluation assesses how well the engineer uses Storybook's @storybook/components package to build a documentation display panel. The focus is exclusively on correct usage of the UI Components Library including typography components, interactive utilities, syntax highlighting, and overlay components.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Typography Components Usage",
      "description": "Uses appropriate typography components from @storybook/components for headings and text. Should use components like H1, H2, or H3 for the heading and P or similar for paragraph text, rather than native HTML elements.",
      "max_score": 20
    },
    {
      "name": "Collapsible Component Implementation",
      "description": "Correctly implements the Collapsible component from @storybook/components to create expandable/collapsible sections. Should properly handle the collapsed/expanded state and allow toggling.",
      "max_score": 25
    },
    {
      "name": "Syntax Highlighting Integration",
      "description": "Uses the SyntaxHighlighter component (or equivalent code display component) from @storybook/components to display syntax-highlighted code. Should specify the language (JavaScript) and properly render the code with highlighting.",
      "max_score": 20
    },
    {
      "name": "Tooltip with IconButton",
      "description": "Correctly implements both the IconButton component and the Tooltip component from @storybook/components. The IconButton should be wrapped with or contain a Tooltip that displays 'Copy Code' text on hover.",
      "max_score": 20
    },
    {
      "name": "Separator Component Usage",
      "description": "Uses the Separator component from @storybook/components to create a visual divider between sections (description and code sections).",
      "max_score": 15
    }
  ]
}