skills.rest
rabuckley
rabuckleyCOMMUNITY
Explore all skills by this author →
GitHub

port-base-ui

Ports headless UI components from Base UI React source to BlazeUI.Headless Blazor components.

Updated Mar 28, 2026
Search Tags:#csharp#accessibility#base ui#headless ui#blazor#bunit#component porting
One-click install
npx skills add https://github.com/rabuckley/blazeui --skill port-base-ui-rabuckley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: port-base-ui
Source: https://github.com/rabuckley/blazeui/tree/main/.claude/skills/port-base-ui
Command: npx skills add https://github.com/rabuckley/blazeui --skill port-base-ui-rabuckley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Porting a complete headless component from Base UI's React codebase to a Blazor library requires reading dozens of source files, mapping ARIA and data attributes, and writing matching bUnit tests — a slow, error-prone manual process. ## Core Features & Use Cases - Source-grounded porting: Fetches the actual Base UI React source and tests from GitHub so every ARIA attribute, data attribute, and state mapping matches the original implementation. - Structured Blazor scaffolding: Plans and implements the context class, root component, child sub-parts, and optional JS interop module following established BlazeUI patterns. - bUnit test generation: Translates high-value React Testing Library tests into bUnit equivalents covering ARIA contracts, state transitions, and keyboard behavior. - Use Case: Ask to port the Menu component from Base UI, and the Skill fetches the React source, implements all sub-parts (Root, Trigger, Popup, Positioner, Item) in BlazeUI.Headless, writes bUnit tests, and verifies the build passes. ## Quick Start Ask the assistant to port the Tooltip component from Base UI into BlazeUI.Headless with tests.

Frequently Asked Questions about port-base-ui

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

FAQPage Schema
How do I port a Base UI component to Blazor?▼

Fetch the component's React source and tests from the mui/base-ui GitHub repository, map each sub-part to a BlazeUI file, implement the context class and root component, then write bUnit tests. Verify with dotnet build and dotnet test.

How do Base UI data attributes map to Blazor components?▼

Base UI's getStateAttributesProps emits data-{key} for every truthy state field by default, even without a DataAttributes file. In Blazor, replicate this in GetDataAttributes() and also check for stateAttributesMapping overrides in useRenderElement calls.

Which base class should a Blazor headless component extend?▼

Overlay components with popups extend OverlayRoot, inline interactive components extend BlazeElement, and state-only containers extend ComponentBase. The choice determines lifecycle, JS module ownership, and rendering behavior.

Why do JSInterop calls fail in bUnit tests?▼

bUnit requires explicit JSInterop setup by default. Set JSInterop.Mode = JSRuntimeMode.Loose in the test constructor so any JS call is accepted without configuration; real JS behavior is verified through E2E tests instead.

When should a Blazor component use a JS interop module?▼

Create a JS module only when the component needs browser APIs Blazor cannot reach, such as floating-ui positioning, focus trapping, scroll detection, or hover-intent. Simple state toggles like Switch or Checkbox need no JavaScript.

What Base UI tests should not be ported to bUnit?▼

Skip React-specific tests covering ref forwarding, hook internals, render prop composition, and forwardRef behavior. Port only ARIA contract tests, keyboard navigation, state transitions, and disabled or readonly behavior assertions.

Related Skills

Explore More Software Engineering Skills→
AGIBuildAGIBuild
10

dotnet-blazor-testing

Test Blazor components with bUnit for in-memory rendering and assertion.

Community
Intermediate
sheldrappssheldrapps

add-ui-component

Create reusable UI components in the @sheldrapps/ui-theme package with SCSS and validation.

Community
Intermediate
rudironsonirudironsoni

dotnet-blazor-testing

Test Blazor components with bUnit and xUnit for rendering and events.

Community
Intermediate
GoogleChromeGoogleChrome
926

cpp-on-the-web

Compile C and C++ code to WebAssembly with Emscripten for browser execution.

Official
Intermediate