{
  "context": "This criteria evaluates how effectively the engineer uses CSS Modules to create locally scoped styles for a React component, specifically focusing on the proper usage of .module.css naming convention and CSS Module import/application patterns.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "CSS Module file creation",
      "description": "Creates a CSS file with the .module.css naming convention (e.g., UserProfile.module.css) to enable CSS Modules functionality",
      "max_score": 20
    },
    {
      "name": "CSS Module import",
      "description": "Imports the CSS Module correctly using the 'import styles from' pattern (e.g., import styles from './UserProfile.module.css')",
      "max_score": 15
    },
    {
      "name": "Scoped class application",
      "description": "Applies CSS Module classes to JSX elements using the styles object (e.g., className={styles.container}, className={styles.avatar})",
      "max_score": 25
    },
    {
      "name": "Multiple scoped classes",
      "description": "Uses multiple distinct CSS Module classes for different component elements (container, avatar, name, role, status indicator)",
      "max_score": 15
    },
    {
      "name": "Dynamic class application",
      "description": "Implements conditional styling using CSS Modules for the status indicator (e.g., styles.statusActive, styles.statusAway, styles.statusOffline)",
      "max_score": 15
    },
    {
      "name": "Style definitions",
      "description": "Defines all required styles in the CSS Module file (card container, avatar, status indicators with colors, name, role)",
      "max_score": 10
    }
  ]
}