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

port-shadcn

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

Updated Apr 24, 2026
Search Tags:#accessibility#react#port#shadcn#web-components#lit#dui
One-click install
npx skills add https://github.com/deepfuturenow/dui-primitives --skill port-shadcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: port-shadcn
Source: https://github.com/deepfuturenow/dui-primitives/tree/main/.agents/skills/port-shadcn
Command: npx skills add https://github.com/deepfuturenow/dui-primitives --skill port-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Port ShadCN/ui React components into DUI primitives that are unstyled, accessible, and provide only structural and behavioral patterns.

Core Features & Use Cases

  • Translation from React to Lit primitives (class-based web components) with Tailwind-free styling
  • Remove aesthetic CSS, preserve structure and ARIA patterns, map variant props to data attributes
  • Use case: port a ShadCN component (e.g., dialog, button) to a DUI primitive for framework-agnostic usage

Quick Start

Port a ShadCN UI component by translating React components to Lit primitives, removing Tailwind styles, and wiring up behavior and accessibility for unstyled primitives.

Frequently Asked Questions about port-shadcn

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

FAQPage Schema
How do I port ShadCN UI components to Lit web components?▼

Port ShadCN UI components to Lit web components by translating React class structure into Lit primitives, stripping Tailwind aesthetic CSS, and preserving ARIA accessibility patterns and structural behavior for framework-agnostic usage.

What is the best way to convert React ShadCN variants to unstyled web components?▼

Convert React ShadCN variants to unstyled web components by mapping variant props to data attributes, removing aesthetic styling, and retaining only the structural and behavioral logic within Lit-based class primitives.

Does porting ShadCN to DUI primitives preserve accessibility patterns?▼

Porting ShadCN to DUI primitives preserves accessibility by retaining original ARIA patterns and structural behavior while removing all aesthetic CSS, ensuring unstyled, predictable interactions for framework-agnostic projects.

Can I use ported ShadCN DUI primitives without Tailwind CSS?▼

Ported ShadCN DUI primitives work without Tailwind CSS by removing aesthetic styles entirely and exposing a data-attributes styling API, leaving only unstyled structural and behavioral patterns for Lit-based projects.

How do I translate React context sharing to Lit primitives during ShadCN porting?▼

Translate React context sharing to Lit primitives during ShadCN porting by wiring unstyled web component behavior and data attributes, ensuring predictable context sharing without React-specific dependencies.

Why should I port ShadCN UI components to unstyled Lit primitives?▼

Port ShadCN UI components to unstyled Lit primitives to achieve framework-agnostic usage and predictable behavior, separating structural logic and accessibility from aesthetic styling for flexible web component integration.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

material-web

Implement Material Design 3 UI with Lit-based @material/web components.

Community
Intermediate
deepfuturenowdeepfuturenow

port-base-ui

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

Official
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate