port-base-ui

Port Base UI React components to Lit-based DUI primitives while preserving accessibility.

Updated Apr 24, 2026

Search Tags:#react #port #web-components #base-ui #porting #lit #dui

Ready to run

npx skills add https://github.com/deepfuturenow/dui-primitives --skill port-base-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: port-base-ui
Source: https://github.com/deepfuturenow/dui-primitives/tree/main/.agents/skills/port-base-ui
Command: npx skills add https://github.com/deepfuturenow/dui-primitives --skill port-base-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Port Base UI React components to DUI primitives by extracting structure and preserving accessibility while discarding styling.

Core Features & Use Cases

Port React-based Base UI components to a single LitElement primitive or a Lit Context-based primitive for complex coordination.
Preserve structural CSS and data attributes while removing aesthetic styling to enable consumer-driven theming.
Use cases include migrating existing Base UI components to DUI primitives for framework-agnostic usage.

Quick Start

Port a Base UI React component into a DUI primitive and preserve structure and accessibility.

Frequently Asked Questions about port-base-ui

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

FAQPage Schema

How do I migrate React components to Lit-based web components?▼

Port React components to Lit by mapping component anatomy into LitElement primitives, preserving accessibility attributes and structural CSS while discarding aesthetic styling for framework-agnostic usage.

What does porting Base UI to DUI primitives do with existing styles?▼

Porting Base UI to DUI primitives discards aesthetic styling by default, preserving structural CSS and data attributes to enable consumer-driven theming in the new Lit-based environment.

Can I use ported DUI primitives across plain HTML and other web frameworks?▼

Ported DUI primitives use LitElement to function across React, web frameworks, and plain HTML, making migrated Base UI components fully framework-agnostic.

How does Lit Context coordination work for complex Base UI components?▼

Lit Context coordination manages complex Base UI components by mapping their anatomy to Lit Context-based primitives, ensuring structural and accessible state coordination across the migrated web components.

Does porting Base UI components to Lit preserve data attributes?▼

Porting Base UI components to Lit requires retention of data attributes, ensuring the migrated DUI primitives preserve structural semantics and accessibility for downstream consumer applications.