skills.rest
deepfuturenow
deepfuturenowOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/deepfuturenow/dui-primitives --skill port-base-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
deepfuturenowdeepfuturenow

port-shadcn

Port ShadCN/ui React components into unstyled Lit-based DUI primitives.

Official
Advanced
atomicojsatomicojs
1.3k

atomico-app-patterns

Manage Atomico component state and events with composition and context.

Official
Intermediate
memorysavermemorysaver

heroui-native

Build React Native and Expo interfaces with HeroUI Native components.

Community
Intermediate