CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-types--react

tessl install tessl/npm-types--react@19.1.0

TypeScript definitions for React, the popular JavaScript library for building user interfaces

Agent Success

Agent success rate when using this tile

80%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.48x

Baseline

Agent success rate without this tile

54%

rubric.jsonevals/scenario-4/

{
  "context": "This criteria evaluates how well the engineer uses @types/react's event handling types and patterns to implement a canvas drawing tool. The focus is exclusively on proper usage of React's MouseEvent, KeyboardEvent, TouchEvent types and their associated handlers with correct typing.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "MouseEvent typing",
      "description": "Uses React.MouseEvent<HTMLCanvasElement> or React.MouseEventHandler<HTMLCanvasElement> for mouse event handlers (onMouseDown, onMouseMove, onMouseUp)",
      "max_score": 20
    },
    {
      "name": "Mouse position tracking",
      "description": "Correctly accesses mouse coordinates using clientX/clientY properties from MouseEvent and calculates position relative to canvas using getBoundingClientRect() on event.currentTarget",
      "max_score": 15
    },
    {
      "name": "KeyboardEvent typing",
      "description": "Uses React.KeyboardEvent or React.KeyboardEventHandler with proper element typing for keyboard event handlers (onKeyDown or onKeyUp)",
      "max_score": 15
    },
    {
      "name": "Modifier key detection",
      "description": "Uses KeyboardEvent properties (ctrlKey, metaKey, shiftKey) or getModifierState() method to detect modifier keys for keyboard shortcuts",
      "max_score": 15
    },
    {
      "name": "TouchEvent typing",
      "description": "Uses React.TouchEvent<HTMLCanvasElement> or React.TouchEventHandler<HTMLCanvasElement> for touch event handlers (onTouchStart, onTouchMove, onTouchEnd)",
      "max_score": 15
    },
    {
      "name": "Touch coordinate access",
      "description": "Correctly accesses touch coordinates from TouchEvent.touches or TouchEvent.changedTouches TouchList properties",
      "max_score": 10
    },
    {
      "name": "Event methods usage",
      "description": "Uses SyntheticEvent methods like preventDefault() to control default browser behavior for touch or other events",
      "max_score": 10
    }
  ]
}

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@types/react@19.1.x
tile.json