Does it support React 19?

Yes, this skill provides implementation patterns specifically optimized for React 19 and modern Vite-based project structures.

What is the Positioner pattern in Base UI?

Floating components like Popovers and Tooltips require a Positioner wrapper to handle Floating UI logic for smart alignment and collision detection.

How does Base UI differ from Radix UI?

Base UI uses a render prop pattern instead of Radix's asChild, offering more explicit prop spreading, clearer debugging, and superior TypeScript inference.

Does this work with Tailwind CSS?

Absolutely. Base UI is completely unstyled, and this skill is optimized for Tailwind CSS v4 and modern utility-first workflows.

Is this skill suitable for production use?

Yes. While Base UI is in beta, this skill includes production-tested workarounds for known issues and guidance on API stability for v1.0.

Base UI React Component Toolkit

Name: Base UI React Component Toolkit
Author: jackspace

byjackspace

•

디자인 도구

Implements accessible, unstyled React components using the render prop pattern for full styling control and smart positioning.

This skill equips Claude with specialized knowledge for implementing Base UI (@base-ui-components/react), MUI's unstyled component library. It focuses on the render prop pattern and Floating UI-powered positioning, providing a robust, accessible alternative to Radix UI. The skill includes production-tested patterns for complex components like Dialogs, Selects, and Popovers, while offering critical workarounds for known beta issues, ensuring high-quality UI development in modern React 19 and Vite environments.

주요 기능

01Advanced positioning logic integration using the Base UI Positioner pattern

022 GitHub stars

03Comprehensive migration mapping for developers transitioning from Radix UI

04Pre-emptive fixes for 10+ documented beta issues and accessibility pitfalls

05Standardized render prop implementation for explicit prop spreading and type safety

06Optimized implementation patterns for Tailwind CSS v4 and Cloudflare Workers

사용 사례

01Implementing WAI-ARIA compliant floating components with smart collision detection

02Migrating complex Radix UI codebases to the more explicit Base UI render prop model

03Building bespoke design systems with complete styling freedom and zero CSS overrides

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jackspace/claudeskillz base-ui-react

For use in Claude.ai and ChatGPT

주요 기능

01Advanced positioning logic integration using the Base UI Positioner pattern

022 GitHub stars

03Comprehensive migration mapping for developers transitioning from Radix UI

04Pre-emptive fixes for 10+ documented beta issues and accessibility pitfalls

05Standardized render prop implementation for explicit prop spreading and type safety

06Optimized implementation patterns for Tailwind CSS v4 and Cloudflare Workers

사용 사례

01Implementing WAI-ARIA compliant floating components with smart collision detection

02Migrating complex Radix UI codebases to the more explicit Base UI render prop model

03Building bespoke design systems with complete styling freedom and zero CSS overrides

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jackspace/claudeskillz base-ui-react

For use in Claude.ai and ChatGPT