Implement frontend designs from figma using Chakra UI v3 and Storybook
92
92%
Does it follow best practices?
Impact
92%
1.64xAverage score across 6 eval scenarios
Advisory
Suggest reviewing before use
{
"context": "Tests whether the agent produces a properly structured component plan document that correctly classifies components into three tiers, includes all required plan sections, recommends a correct build order, and follows naming and reuse conventions when breaking down a Figma-like design specification.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Page Overview section",
"description": "The plan output includes a section called 'Page Overview' (or equivalent) describing the page's purpose",
"max_score": 6
},
{
"name": "Existing Components section",
"description": "The plan includes a section listing existing components to reuse, formatted as a table with Component, Location, Usage in Design, and Modifications Needed columns",
"max_score": 8
},
{
"name": "New Components section",
"description": "The plan includes a section listing new components to build, grouped by tier",
"max_score": 8
},
{
"name": "Component Tree section",
"description": "The plan includes a visual component hierarchy tree showing how components nest",
"max_score": 8
},
{
"name": "Implementation Order section",
"description": "The plan includes an Implementation Order section recommending a build sequence",
"max_score": 8
},
{
"name": "Tier classification present",
"description": "Each new component is assigned a tier (1, 2, or 3) in the plan",
"max_score": 9
},
{
"name": "Correct tier semantics",
"description": "Tier 1 components are described as reusable low-level primitives, Tier 2 as composite/section components, Tier 3 as the page-level route component",
"max_score": 8
},
{
"name": "Tier 1 built first",
"description": "The implementation order places all Tier 1 components before Tier 2 components, and Tier 2 before Tier 3",
"max_score": 9
},
{
"name": "Semantic component names",
"description": "New component names describe what they represent (e.g., PipelineStatusCard) rather than their appearance (e.g., GrayCardWithBorder)",
"max_score": 7
},
{
"name": "Component location specified",
"description": "Each new component includes a file path location (either src/components/ for reusable, or src/routes/.../-components/ for route-specific)",
"max_score": 8
},
{
"name": "Props documented",
"description": "Each new component in the plan lists at least 2 key props with name, type, and purpose",
"max_score": 7
},
{
"name": "Ambiguity flagged",
"description": "The plan calls out at least one unclear interaction state, responsive behavior, or design edge case for clarification",
"max_score": 8
},
{
"name": "Reuse preference shown",
"description": "At least one existing component is identified for reuse or extension rather than being rebuilt from scratch",
"max_score": 6
}
]
}