skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

ask-base-ui

Implements accessible overlay UI components using base-ui unstyled React primitives.

1|Updated Aug 17, 2026
Search Tags:#accessibility#React#design system#tailwind#dialog#base-ui#headless components
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-base-ui-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-base-ui
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-base-ui
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-base-ui-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui-components/react.

What problem does it solve? Building dialogs, sheets, popovers, menus, and selects from scratch requires reimplementing accessibility, focus management, and keyboard navigation every time. This Skill provides a library guide for base-ui, which supplies unstyled, WAI-ARIA-compliant primitives so you compose overlay UI with your own design system instead of fighting raw DOM behavior. ## Core Features & Use Cases - Primitives Reference: Covers Dialog, Sheet/Drawer, Popover, Menu, Select, Combobox, Tabs, Accordion, Tooltip, Hover Card, Toast, Switch, Slider, and Date Picker from @base-ui-components/react. - Design System Wrapper Pattern: Shows how to wrap raw primitives into your own components/ui/* components with Tailwind styling, data-attribute animations, and forwarded refs. - Complete Examples: Includes full Dialog, Select, and mobile Sheet/Drawer implementations plus key props tables and troubleshooting guidance. - Use Case: When asked to add a delete-confirmation modal or a searchable select dropdown, load this Skill to generate a styled, accessible component wrapping base-ui primitives rather than hand-rolling focus traps and portal logic. ## Quick Start Ask the agent to build an accessible dialog or select component using base-ui primitives wrapped in your design system.

Frequently Asked Questions about ask-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 DialogPrimitive.Root, Trigger, Portal, and Content from @base-ui-components/dialog, then wrap them in your own styled component. Base-ui handles focus trapping, backdrop clicks, and keyboard navigation; you supply all CSS via className and data-attribute animation states.

What is base-ui and how does it compare to styled component libraries?▼

Base-ui is a headless, unstyled React primitives library providing accessibility logic only, with no built-in CSS. Unlike styled libraries, you compose every visual detail yourself, making it suited for custom design systems rather than out-of-the-box themes.

Does base-ui support mobile bottom sheets and drawers?▼

Yes, the @base-ui-components/sheet package supports bottom, top, left, and right drawer directions with a side prop and snapPoints for snap percentages. You style slide-in and slide-out transitions using data-state attributes.

Why are my base-ui component styles not applying?▼

Base-ui is fully unstyled, so no CSS is applied unless you supply it yourself. Confirm you are passing className to the primitive components and that your Tailwind or stylesheet classes target the rendered elements and data attributes.

Why is focus not trapped inside my base-ui modal?▼

Focus trapping only works when you render DialogPrimitive.Content rather than a custom div inside the portal. Also confirm the Dialog modal prop is true, which is the default, and that content is wrapped in DialogPrimitive.Portal.

Related Skills

Explore More Software Engineering Skills→
langgeniuslanggenius

baseline-ui

Reviews and fixes UI code against spacing, typography, animation, and accessibility constraints.

Official
Intermediate
serverpodserverpod
8

shadcn_ui-dialog

Display modal and alert dialogs in Flutter apps using shadcn_ui.

Official
Basic
taxmaxitaxmaxi
1

pick-ui-library

Selects animation and UI primitive libraries for React web interfaces.

Official
Intermediate
daangndaangn
1.0k

react-headless-dev

Implement unstyled, logic-only React headless components and custom hooks with namespace exports.

Official
Advanced