CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-react-native

A framework for building native apps using React

Overall
score

100%

Evaluation100%

1.06x

Agent success when using this tile

Overview
Eval results
Files

rubric.jsonevals/scenario-1/

{
  "context": "This criteria evaluates how effectively the engineer uses React Native's StyleSheet API and Flexbox layout system to build a styled product card component. The focus is on proper usage of StyleSheet.create for defining styles and appropriate flexbox properties for layout.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "StyleSheet.create usage",
      "description": "Uses StyleSheet.create() from react-native to define all component styles instead of inline styles. All style objects should be created using StyleSheet.create() and referenced by style props.",
      "max_score": 20
    },
    {
      "name": "Flexbox layout",
      "description": "Uses flexbox properties (flexDirection, alignItems, justifyContent) to arrange elements vertically within the card. The container should use flexDirection: 'column' or equivalent to stack elements.",
      "max_score": 20
    },
    {
      "name": "Typography and spacing",
      "description": "Applies fontSize and color properties in styles to differentiate text elements (larger font for price, smaller font with gray color for description, appropriate spacing using marginVertical or similar).",
      "max_score": 15
    },
    {
      "name": "View component",
      "description": "Uses the View component from react-native as the main container for the card and for layout structure. The card should be wrapped in a View component with appropriate styles applied.",
      "max_score": 10
    },
    {
      "name": "Text component",
      "description": "Uses the Text component from react-native for all text content (product name, price, description, status). All text elements should be properly wrapped in Text components.",
      "max_score": 10
    },
    {
      "name": "Image component",
      "description": "Uses the Image component from react-native to display the product image with the imageUrl prop. The Image component should have a source prop that uses the imageUrl.",
      "max_score": 10
    },
    {
      "name": "Style properties",
      "description": "Applies appropriate style properties for the card including padding, borderRadius, borderWidth, borderColor as specified in requirements. Styles should match the specification (16px padding, 8px border radius, 1px border).",
      "max_score": 10
    },
    {
      "name": "Conditional styling",
      "description": "Implements conditional styling for the stock status (green for in stock, red for out of stock) using the inStock prop. Should use conditional logic to apply different color styles based on the boolean value.",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native@1000.0.0

tile.json