A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.
84
{
"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--reactdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10