Progress UI component for React providing customizable line and circle progress bars
100
Pending
Does it follow best practices?
Impact
100%
1.04xAverage score across 10 eval scenarios
Pending
The risk profile of this skill
{
"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
}
]
}docs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10