CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rc-progress

Progress UI component for React providing customizable line and circle progress bars

Overall
score

100%

Overview
Eval results
Files

rubric.jsonevals/scenario-2/

{
  "context": "This criteria evaluates how well an engineer uses the @rc-component/progress package's Circle component to create a circular progress indicator. The focus is on correct component import, prop usage, and configuration of visual styling properties.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Circle component import",
      "description": "Correctly imports the Circle component from @rc-component/progress package using named import syntax (import { Circle } from '@rc-component/progress')",
      "max_score": 20
    },
    {
      "name": "Circle component usage",
      "description": "Uses the Circle component in the render method/return statement to display the circular progress indicator",
      "max_score": 20
    },
    {
      "name": "Percent prop configuration",
      "description": "Correctly passes the completed prop value to the Circle component's percent prop to display the progress percentage",
      "max_score": 20
    },
    {
      "name": "Stroke width configuration",
      "description": "Sets the strokeWidth prop to 8 on the Circle component to achieve the required 8-pixel stroke width",
      "max_score": 15
    },
    {
      "name": "Progress color configuration",
      "description": "Sets the strokeColor prop to '#4CAF50' (or equivalent green color) on the Circle component for the progress color",
      "max_score": 15
    },
    {
      "name": "Rail color configuration",
      "description": "Sets the railColor prop to '#E0E0E0' (or equivalent light gray color) on the Circle component for the background rail color",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-rc-progress

tile.json