Name: tessleng/ui
Rating: 92.43 (1 reviews)
Author: tessleng

Blog Docs Log in Get started

tessleng/ui

Implement frontend designs from figma using Chakra UI v3 and Storybook

1.64x

Quality

92%

Does it follow best practices?

Impact

92%

1.64x

Average score across 6 eval scenarios

Securityby

Advisory

Suggest reviewing before use

Evaluation results

91%

Migrate Legacy UI Components to Design System

Criteria

Without context

With context

No hardcoded hex colors

100%

Semantic color tokens used

30%

50%

No hardcoded pixel spacing

100%

Correct spacing scale mapping

100%

No hardcoded font names

50%

75%

Named typography scale

62%

75%

Named font weight

100%

Tailwind classes removed

100%

Chakra layout components used

100%

Border radius token used

100%

Chakra imports from correct package

100%

No file extensions in local imports

100%

40%

Plan the Components for the Pipeline Dashboard Page

Criteria

Without context

With context

Page Overview section

83%

100%

Existing Components section

62%

100%

New Components section

50%

100%

Component Tree section

100%

Implementation Order section

100%

Tier classification present

100%

Correct tier semantics

100%

Tier 1 built first

44%

100%

Semantic component names

100%

Component location specified

62%

100%

Props documented

100%

Ambiguity flagged

12%

100%

Reuse preference shown

100%

86%

55%

Add Storybook Coverage for the StatusBadge Component

Criteria

Without context

With context

satisfies Meta pattern

100%

Components/ title prefix

100%

Dark background default

100%

Box in decorator, not div

100%

Default story exported

100%

Loading story exported

Empty/null story exported

Error or edge case story exported

42%

100%

Args for prop variations

87%

100%

Story file co-located

100%

Correct storybook-react-vite import

100%

Type Story alias defined

50%

100%

85%

59%

Rating Input Form Field

Criteria

Without context

With context

useFieldContext used

100%

FormFieldWrapper used

100%

field.handleChange wired

100%

field.handleBlur wired

57%

Registered in form-hooks

File in form/ directory

100%

Stories use Form context

100%

Components/Form/ title prefix

100%

Required story exported

100%

Disabled story exported

100%

WithHelper story exported

100%

No file extensions in imports

100%

Tilde alias used

40%

95%

12%

Reusable Connection Status Indicator Component

Criteria

Without context

With context

File in src/components/

100%

BoxProps or HTMLChakraProps extended

55%

100%

...rest spread on root element

100%

No hardcoded pixel values

100%

l1 border radius token used

100%

Semantic color tokens used

100%

Named typography scale

100%

Stories co-located

100%

All 3 variant stories exported

100%

Edge case story exported

100%

Props interface exported

100%

Tilde alias in imports

No file extensions in imports

100%

Chakra from @chakra-ui/react

100%

47%

Notification Preferences Page

Criteria

Without context

With context

ensureQueryData in loader

100%

Route.useLoaderData used

100%

$api.mutationOptions used

100%

Query invalidated after mutation

100%

useTesslForm for submission

100%

SubmissionError rendered

100%

PageLayout wraps content

100%

No inline UI in page

100%

Chakra layout primitives only

100%

Feature flag in beforeLoad

44%

100%

Tilde alias used

100%

No file extensions in imports

100%

Chakra from @chakra-ui/react

100%

Evaluated: 19 days ago
Agent: Claude
Model: Claude Sonnet 4.6

Table of Contents

Migrate Legacy UI Components to Design System Plan the Components for the Pipeline Dashboard Page Add Storybook Coverage for the StatusBadge Component Rating Input Form Field Reusable Connection Status Indicator Component Notification Preferences Page