skills.rest
abdulazeezoj
abdulazeezojCOMMUNITY
Explore all skills by this author →
Website𝕏@abdulazeezojGitHub

base-ui

Build accessible React interactions using @base-ui/react unstyled primitives.

Updated Sep 13, 2026
Search Tags:#accessibility#frontend#react#components#tailwind#base-ui#ui primitives
One-click install
npx skills add https://github.com/abdulazeezoj/monovella-poc --skill base-ui-abdulazeezoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: base-ui
Source: https://github.com/abdulazeezoj/monovella-poc/tree/main/.agents/skills/base-ui
Command: npx skills add https://github.com/abdulazeezoj/monovella-poc --skill base-ui-abdulazeezoj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui/react, and includes references (resource) components.

What problem does it solve? Implementing dialogs, popovers, selects, and other interactive React components from scratch often breaks keyboard navigation, focus management, and ARIA semantics. This Skill guides the correct selection, composition, and styling of Base UI primitives so interactions stay accessible without hand-rolled state logic. ## Core Features & Use Cases - Primitive Selection: Chooses the smallest semantic primitive for the task, such as Dialog for modals, AlertDialog for confirmations, Popover for anchored content, and Tooltip for hints. - Design System Integration: Applies project styles through className, render, slot, and state/data-attribute APIs without imposing a generic theme, with Tailwind v3/v4 syntax translation. - Accessibility Verification: Enforces keyboard-only testing, focus return, programmatic label/description association, and correct modal versus non-modal overlay behavior. - Use Case: When adding a confirmation dialog to a React app, the Skill selects AlertDialog, wires controlled open state correctly, preserves the host design system styling, and verifies Escape dismissal and focus return. ## Quick Start Use the base-ui skill to implement an accessible dropdown menu component with Base UI primitives styled to match my project.

Frequently Asked Questions about base-ui

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

FAQPage Schema
How do I build an accessible dialog in React with Base UI?▼

Use the Dialog primitive for modal tasks and AlertDialog for consequential confirmations. Compose its compound parts, pass open state and change handler together when the parent owns state, and verify keyboard dismissal and focus return.

How do I style Base UI components with Tailwind CSS?▼

Base UI is unstyled, so apply project styles through className, render, slot, and state/data-attribute APIs. Official examples target Tailwind v4; translate unsupported syntax when the project uses Tailwind v3.

Does Base UI work with controlled component state?▼

Yes, Base UI primitives support both controlled and uncontrolled modes. When the surrounding feature owns state, pass the value or open state together with its change handler; otherwise let the primitive manage its own state.

Base UI vs Radix UI, which should I use for React primitives?▼

Both provide unstyled accessible primitives, but this Skill targets @base-ui/react specifically. Check the installed package version in package.json and follow the captured upstream documentation index for exact component APIs.

Why does my Base UI popover break keyboard navigation?▼

Keyboard issues usually come from overwriting the primitive's handlers, refs, or accessibility props with custom logic. Use Base UI's mergeProps or supported render APIs to compose trigger props instead of replacing them, and avoid custom focus traps.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
lucasfdigitallucasfdigital

webapp-testing

Execute Playwright web application tests with screenshots and accessibility checks.

Community
Advanced
rodrigobranasrodrigobranas
1

bencium-innovative-ux-designer

Generate distinctive, production-grade frontend interfaces with accessible UI components.

Community
Advanced
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate