{
  "context": "This criteria evaluates how well an engineer uses React Native StyleSheet APIs and follows mobile development best practices as enforced by @kunalgolani/eslint-config's React Native rules. The focus is on proper style definition patterns, color management, and avoiding common React Native anti-patterns.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "StyleSheet.create() usage",
      "description": "All component styles are defined using StyleSheet.create() rather than plain JavaScript objects. No inline style objects appear in JSX (e.g., style={{...}}). The StyleSheet is created once outside the component function.",
      "max_score": 35
    },
    {
      "name": "Color literal elimination",
      "description": "No color strings (hex codes, rgb, color names) appear directly in the StyleSheet or component code. All colors are extracted as named constants (e.g., const ONLINE_COLOR = '#00ff00') defined at the module level or in a separate constants object.",
      "max_score": 25
    },
    {
      "name": "Component structure",
      "description": "The component is properly exported as a named export (export function ProfileCard). It uses React Native core components (View, Text, Image) correctly. The component accepts and destructures the required props: imageUri, name, bio, and isOnline.",
      "max_score": 20
    },
    {
      "name": "Status indicator implementation",
      "description": "The online status indicator is implemented as a visual element (e.g., a View component styled as a dot) that conditionally changes color based on the isOnline prop. The color selection correctly uses the predefined color constants rather than inline strings.",
      "max_score": 20
    }
  ]
}