{
  "context": "This criteria evaluates how well the engineer uses Create React App's CSS import and styling capabilities to build a styled React component. The focus is on proper CSS file imports, class name usage, and integration with React components.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "CSS File Import",
      "description": "The component imports a CSS file using the standard ES6 import statement (e.g., `import './Card.css'`). This is the primary way to include CSS in Create React App.",
      "max_score": 25
    },
    {
      "name": "Separate CSS File",
      "description": "Styles are defined in a separate CSS file (Card.css) rather than inline styles or other styling approaches. This demonstrates understanding of CRA's CSS file handling.",
      "max_score": 20
    },
    {
      "name": "CSS Class Application",
      "description": "The component applies CSS classes to elements using the `className` attribute (React's way of applying classes), such as `className=\"card\"`, `className=\"card-title\"`, etc.",
      "max_score": 25
    },
    {
      "name": "CSS Selectors",
      "description": "The CSS file defines appropriate selectors (`.card`, `.card-title`, `.card-content`, `.card-footer`) that match the classes used in the component.",
      "max_score": 20
    },
    {
      "name": "Working Styles",
      "description": "The CSS rules are properly formatted and provide visible styling (colors, spacing, borders, etc.) that would actually style the component when rendered.",
      "max_score": 10
    }
  ]
}