Does this skill support the Vue version of Headless UI?

No, this skill is specifically optimized for Headless UI v2, which is a React-only release. It follows React-specific compound component patterns.

What is the 'anchor' prop used for in this skill?

The anchor prop is used for floating elements like MenuItems or PopoverPanels to provide automatic, viewport-aware positioning relative to the trigger button.

How does this skill handle component styling?

It utilizes Tailwind CSS utility classes applied via data attributes such as data-focus, data-open, and data-selected to handle state-based styling without render props.

Is accessibility built-in to these patterns?

Yes, all components generated using this skill include automatic ARIA roles, attributes, focus management, and full keyboard navigation support.

Headless UI Design Patterns

Name: Headless UI Design Patterns
Author: agents-inc

byagents-inc

•

设计工具

Implements accessible, unstyled UI components for React using Tailwind CSS best practices and Headless UI v2 patterns.

This skill provides Claude with expert guidance on implementing Headless UI v2 components within React applications, ensuring all interfaces are fully accessible and keyboard-navigable out of the box. It enforces modern implementation patterns including compound component anatomy, data-attribute based styling for states, and built-in anchor positioning for floating elements. By automating complex behaviors like ARIA management and focus trapping, it allows developers to focus on custom visual design using Tailwind CSS while maintaining production-grade accessibility standards.

主要功能

01Data-attribute styling for focus, hover, and selection states

02Automatic ARIA accessibility and keyboard navigation handling

03CSS-powered transitions using the modern data-closed attribute pattern

04Compound component implementation for Dialogs, Menus, and Comboboxes

055 GitHub stars

06Built-in anchor positioning for floating viewport-aware elements

使用场景

01Creating custom-styled select menus and autocomplete search bars

02Building accessible modal dialogs and slide-over panels

03Developing responsive, keyboard-navigable tabs and accordion disclosures

主要功能

01Data-attribute styling for focus, hover, and selection states

02Automatic ARIA accessibility and keyboard navigation handling

03CSS-powered transitions using the modern data-closed attribute pattern

04Compound component implementation for Dialogs, Menus, and Comboboxes

055 GitHub stars

06Built-in anchor positioning for floating viewport-aware elements

使用场景

01Creating custom-styled select menus and autocomplete search bars

02Building accessible modal dialogs and slide-over panels

03Developing responsive, keyboard-navigable tabs and accordion disclosures