CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-headlessui--react

A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.

84

1.25x
Overview
Eval results
Files

rubric.jsonevals/scenario-1/

{
  "context": "This criteria evaluates how well the engineer uses @headlessui/react's orientation support feature to build a navigation menu with proper keyboard navigation that adapts based on horizontal or vertical layout.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Uses Listbox Component",
      "description": "Solution uses the Listbox component from @headlessui/react as the foundation for the navigation menu",
      "max_score": 25
    },
    {
      "name": "Orientation Prop Usage",
      "description": "Solution correctly passes the orientation prop ('horizontal' or 'vertical') to the Listbox component",
      "max_score": 30
    },
    {
      "name": "Arrow Key Navigation",
      "description": "Implementation properly supports orientation-specific arrow key navigation (Up/Down for vertical, Left/Right for horizontal) through Headless UI's built-in keyboard handling",
      "max_score": 25
    },
    {
      "name": "Home/End Key Support",
      "description": "Implementation leverages Listbox's built-in Home and End key navigation functionality",
      "max_score": 10
    },
    {
      "name": "ListboxOption Components",
      "description": "Solution uses ListboxOption components for individual menu items to get automatic keyboard navigation and focus management",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-headlessui--react

tile.json