Agent skill · software engineering · secondsky

base-ui-react

MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.

Why this skill is useful

Provides specific patterns and best practices for using MUI Base UI components that the AI wouldn't reliably generate on its own.

What it needs

Requires bun installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.

What this skill does

Base UI React Status: Release Candidate (v1.0.0-rc.0) ⚠️ Last Verified: 2026-08-03 --- What Is Base UI? MUI's unstyled, accessible React component library: 27+ accessible components Render props pattern Full styling control Floating UI integration Alternative to Radix UI Release Candidate status: v1.0.0-rc.0 (stable v1.0 GA expected soon — still pre-GA, API may change) --- Quick Start Install Basic Dialog Basic Select Load references/setup-guide.md for complete examples. --- Core Components Available (27+): Dialog Select Popover Tooltip Accordion NumberField Checkbox Switch Tabs Slider And more... --- Critical Rules Always Do ✅ 1. Use Portal for popups (Dialog, Select, Popover) 2. Use Positioner for floating elements 3. Add Backdrop for modal dialogs 4. Style with Tailwind (or any CSS) 5. Use render props (not asChild like Radix) 6. Test accessibility (ARIA built-in) 7. Handle Portal edge cases (SSR, hydration) 8. Check beta docs for breaking changes 9. Use TypeScript for better DX 10. Test on target browsers Never Do ❌ 1. Never use asChild (use render function instead) 2. Never skip Portal for popups (positioning breaks) 3. Never skip Positioner (Floating UI won't work) 4. Never assume API stability (beta software) 5. Never skip accessibility testing 6. Never use with React <19 (requires React 19+) 7. Never skip Backdrop for modals 8. Never hardcode z-index (use Portal) 9. Never skip SSR testing (hydration issues) 10. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills secondsky/base-ui-react

View the source on GitHub

Browse the @skills marketplace