Skills
.Work. You
Rest

Headless UI - Accessible Component Primitives

Community

Build accessible UIs with unstyled components.

Software Engineering#accessibility#react#vue#tailwind css#frontend development#ui components
AuthorMacPhobos
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides developers with a set of unstyled, fully accessible UI components that can be easily integrated with any design system, particularly those using Tailwind CSS, saving significant development time and ensuring accessibility standards are met.

Core Features & Use Cases

  • Component Library: Offers primitives for Menus, Listboxes, Comboboxes, Dialogs, Popovers, RadioGroups, Switches, Tabs, and Disclosures.
  • Accessibility First: Built with ARIA attributes, keyboard navigation, and screen reader support in mind.
  • Framework Agnostic: Supports both React and Vue 3 with identical APIs.
  • Use Case: A frontend developer needs to implement a complex dropdown menu with full keyboard navigation and screen reader support. Instead of building from scratch, they can use the Headless UI Menu component and style it with Tailwind CSS, ensuring accessibility and saving hours of development.

Quick Start

Use the Headless UI skill to generate a React example for an accessible dropdown menu.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Headless UI - Accessible Component Primitives
Download link: https://github.com/MacPhobos/research-mind/archive/main.zip#headless-ui-accessible-component-primitives

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.