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 writes a Storybook stories file that follows the project's required story conventions: correct meta structure using 'satisfies', the right title prefix, the specified default backgrounds, correct use of Chakra Box in decorators, and a sufficient set of story variants covering meaningful states.",
"type": "weighted_checklist",
"checklist": [
{
"name": "satisfies Meta pattern",
"description": "The meta object uses `satisfies Meta<typeof ComponentName>` syntax — not a plain type annotation or type cast",
"max_score": 10
},
{
"name": "Components/ title prefix",
"description": "The story title begins with 'Components/' (e.g., 'Components/Feedback/AlertBanner') matching the folder structure",
"max_score": 8
},
{
"name": "Dark background default",
"description": "The story parameters include `backgrounds: { default: 'dark' }`",
"max_score": 8
},
{
"name": "Box in decorator, not div",
"description": "Story decorators use Chakra's `Box` component for layout wrapping — no raw HTML `<div>` elements in decorator JSX",
"max_score": 10
},
{
"name": "Default story exported",
"description": "A story named `Default` is exported with representative args",
"max_score": 8
},
{
"name": "Loading story exported",
"description": "A story named `Loading` (or similar loading state) is exported",
"max_score": 7
},
{
"name": "Empty/null story exported",
"description": "A story representing an empty, null, or no-data state is exported",
"max_score": 7
},
{
"name": "Error or edge case story exported",
"description": "A story representing an error state or edge case (long text, boundary values, missing data) is exported",
"max_score": 7
},
{
"name": "Args for prop variations",
"description": "Story variations use `args` to pass different props — `render` is used sparingly and only when custom JSX wrapping is required",
"max_score": 8
},
{
"name": "Story file co-located",
"description": "The .stories.tsx file is placed in the same directory as the component file it tests",
"max_score": 8
},
{
"name": "Correct storybook-react-vite import",
"description": "Meta and StoryObj types are imported from '@storybook/react-vite' (not '@storybook/react' or other variants)",
"max_score": 9
},
{
"name": "Type Story alias defined",
"description": "A `type Story = StoryObj<typeof meta>` alias is defined and used for all story exports",
"max_score": 10
}
]
}