CtrlK
BlogDocsLog inGet started
Tessl Logo

tessleng/ui

Implement frontend designs from figma using Chakra UI v3 and Storybook

92

1.64x
Quality

92%

Does it follow best practices?

Impact

92%

1.64x

Average score across 6 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-2/

{
  "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
    }
  ]
}

evals

README.md

tile.json