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-7/

{
  "context": "This criteria evaluates how well the engineer uses React Native's transform system to implement a 3D card flip component. The focus is on proper usage of transform properties including rotateY for rotation, perspective for 3D depth, and backfaceVisibility for controlling face visibility.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Transform property usage",
      "description": "Uses the 'transform' style property correctly on View components to apply 3D transformations",
      "max_score": 15
    },
    {
      "name": "Y-axis rotation (rotateY)",
      "description": "Uses 'rotateY' transform to rotate the card 180 degrees for the flip effect (e.g., rotateY: '180deg')",
      "max_score": 25
    },
    {
      "name": "Perspective transform",
      "description": "Applies 'perspective' transform to create depth and 3D visual effect (e.g., perspective: 1000)",
      "max_score": 20
    },
    {
      "name": "Back face rotation",
      "description": "Applies initial 180-degree rotateY transform to the back face so it displays correctly when flipped",
      "max_score": 20
    },
    {
      "name": "Backface visibility",
      "description": "Uses 'backfaceVisibility: hidden' style property to hide the back side of each face when not visible",
      "max_score": 20
    }
  ]
}

Install with Tessl CLI

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

tile.json