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

{
  "context": "This evaluation assesses how well the engineer uses the @rc-component/progress package to implement a circular progress indicator with conic gradient colors. The focus is on proper usage of the Circle component with gradient configuration.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Circle component import",
      "description": "Correctly imports the Circle component from '@rc-component/progress' package",
      "max_score": 10
    },
    {
      "name": "Circle component usage",
      "description": "Uses the Circle component in the GradientProgress component (not Line or custom SVG)",
      "max_score": 15
    },
    {
      "name": "Conic gradient configuration",
      "description": "Configures strokeColor with an object containing 'conic: true' property to enable conic gradient mode",
      "max_score": 30
    },
    {
      "name": "Color stops definition",
      "description": "Defines color stops in strokeColor object with keys '0%', '99%', and '100%' mapped to 'green', 'red', and 'blue' respectively",
      "max_score": 25
    },
    {
      "name": "Percent prop binding",
      "description": "Passes the percent prop from GradientProgress to the Circle component's percent prop",
      "max_score": 10
    },
    {
      "name": "Stroke width configuration",
      "description": "Sets strokeWidth prop to 10 on the Circle component",
      "max_score": 5
    },
    {
      "name": "Rail color configuration",
      "description": "Sets railColor prop to '#D9D9D9' on the Circle component, or relies on the default value which is '#D9D9D9'",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-rc-progress

tile.json