skills.rest
bobmatnyc
bobmatnycCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

headlessui

Provide unstyled, accessible UI components for React and Vue.

68|19|Updated Nov 21, 2025
Search Tags:#accessibility#react#vue#tailwind css#unstyled components#ui primitives#headlessui
One-click install
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill headlessui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: headlessui
Source: https://github.com/bobmatnyc/claude-mpm-skills/tree/main/toolchains/ui/components/headlessui
Command: npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill headlessui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides developers with a robust set of unstyled, accessible UI components that can be easily integrated into custom design systems, saving significant development time and ensuring high standards of accessibility.

Core Features & Use Cases

  • Component Library: Offers pre-built, accessible primitives like Menus, Dialogs, Comboboxes, Tabs, and more.
  • Unstyled & Accessible: Components are fully unstyled, allowing complete design freedom, while ensuring full keyboard navigation and ARIA compliance.
  • Use Case: Building a custom design system for a React application where accessibility is paramount and a unique visual style is required, integrating seamlessly with Tailwind CSS.

Quick Start

Use the headlessui skill to create a React Menu component with edit and delete options.

Frequently Asked Questions about headlessui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React components without importing a heavy UI library?▼

Accessible React components can be built using unstyled UI primitives that provide full ARIA compliance and keyboard navigation, allowing you to apply custom styles without overriding blooted framework defaults.

Can I use unstyled UI primitives with Tailwind CSS to build a custom design system?▼

Yes, unstyled UI primitives integrate seamlessly with Tailwind CSS to build custom design systems, providing the necessary accessible behavior while Tailwind classes handle all visual styling.

What is the best way to ensure ARIA patterns and keyboard navigation in Vue applications?▼

The best way to ensure ARIA patterns and keyboard navigation in Vue applications is to use unstyled, accessible UI primitives that handle complex interactions like menus and dialogs out of the box.

Do I need to manage state manually when creating accessible dialogs and menus in React?▼

No, you do not need to manage state manually because these unstyled UI components support advanced patterns like controlled components and portal rendering to handle dialog state and focus management.

Does this approach to accessible components work for both React and Vue?▼

Yes, this approach to accessible components works for both React and Vue, offering unstyled primitives like Comboboxes and Tabs that ensure consistent ARIA compliance across both frameworks.

Why should I use unstyled components instead of pre-styled UI component libraries?▼

Unstyled components give you complete design freedom for custom design systems while ensuring high accessibility standards, whereas pre-styled libraries often require fighting rigid visual defaults.

Related Skills

Explore More Design & Creative Skills→
hashintelhashintel
1.6k

ark-ui

Provide headless React primitives for accessible, customizable UI components.

Official
Intermediate
STAR03-byteSTAR03-byte
1

ckm:ui-styling

Create accessible React interfaces with shadcn/ui and Tailwind CSS.

Community
Intermediate
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
boludo00boludo00
80

shadcn-ui

Implement shadcn/ui accessible components using Radix UI primitives for React.

Community
Intermediate