Progress UI component for React providing customizable line and circle progress bars
Overall
score
100%
{
"context": "This criteria evaluates how well the engineer uses the @rc-component/progress package to create circular progress indicators with round strokeLinecap styling. The focus is on correct usage of the Circle component and its styling properties to properly handle the round line cap offset compensation feature.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Circle component import",
"description": "Correctly imports the Circle component from '@rc-component/progress' or 'rc-progress'",
"max_score": 10
},
{
"name": "Multiple Circle instances",
"description": "Creates and renders three separate Circle component instances for the three progress indicators",
"max_score": 15
},
{
"name": "Percent prop usage",
"description": "Correctly sets the 'percent' prop to 100, 65, and 15 for the three Circle components respectively",
"max_score": 20
},
{
"name": "StrokeLinecap configuration",
"description": "Sets the 'strokeLinecap' prop to 'round' for all three Circle components to enable round line cap styling",
"max_score": 20
},
{
"name": "StrokeWidth configuration",
"description": "Sets the 'strokeWidth' prop to 8 for all three Circle components",
"max_score": 10
},
{
"name": "StrokeColor configuration",
"description": "Sets the 'strokeColor' prop correctly for each Circle: '#52c41a' (green) for 100%, '#1890ff' (blue) for 65%, '#fa8c16' (orange) for 15%",
"max_score": 15
},
{
"name": "RailColor configuration",
"description": "Sets the 'railColor' prop to '#f0f0f0' for all three Circle components to style the background rail",
"max_score": 10
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-rc-progressdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10