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-10/

{
  "context": "This criteria evaluates how effectively the engineer uses Headless UI's Dialog component and related state management features to build a modal dialog system. The focus is on proper usage of the Dialog component's built-in state machine architecture, focus management, and accessibility features.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Dialog Component Usage",
      "description": "Uses the Dialog component from @headlessui/react as the foundation for the modal system. Must import and use Dialog (or DialogPanel, DialogTitle) components rather than building custom modal logic.",
      "max_score": 25
    },
    {
      "name": "Controlled State Pattern",
      "description": "Implements controlled Dialog components using the 'open' prop and 'onClose' callback to manage dialog visibility. Should demonstrate proper controlled component pattern with state management.",
      "max_score": 20
    },
    {
      "name": "Dialog Stacking",
      "description": "Properly implements nested dialogs or dialog stacking by managing multiple Dialog components with individual open states. Should maintain a stack data structure to track dialog order.",
      "max_score": 20
    },
    {
      "name": "Focus Management",
      "description": "Leverages Dialog's built-in focus management features including focus trapping and focus restoration. Should not implement custom focus trap logic since Dialog handles this internally.",
      "max_score": 15
    },
    {
      "name": "Context Provider Pattern",
      "description": "Creates a context provider (DialogManager) to share dialog management functions throughout the component tree. Should use React Context API to make openDialog, closeDialog functions accessible.",
      "max_score": 10
    },
    {
      "name": "Dialog Interactions",
      "description": "Properly configures Dialog to handle escape key and outside clicks using Dialog's built-in functionality. Should not implement custom event listeners for these standard dialog behaviors.",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-headlessui--react

tile.json