skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component

Create accessible headless UI components with framework-agnostic React and Lit patterns.

888|82|Updated Aug 13, 2025
Search Tags:#accessibility#React#UI#component#Lit#headless
One-click install
npx skills add https://github.com/videojs/v10 --skill component-videojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component
Source: https://github.com/videojs/v10/tree/main/.claude/skills/component
Command: npx skills add https://github.com/videojs/v10 --skill component-videojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps developers build accessible, headless UI components using framework-agnostic architecture patterns, enabling reuse across React and Lit-based ecosystems.

Core Features & Use Cases

  • Compound components with 1:1 DOM mapping (Root/Trigger/Content) for flexible composition
  • Framework-agnostic patterns for state, styling, and API design that work across React, Vue, Svelte, and vanilla JS
  • Lit and React patterns (controllers, hooks, context) to enable cross-framework component libraries
  • Use cases include building component libraries, design systems, and reusable UI primitives
  • Accessibility-first by default through ARIA roles, focus management, and keyboard navigation
  • Patterns referenced: Base UI, Radix, Ark UI
  • Framework-specific references can be found in references/react.md and references/lit.md

Quick Start

Start by scaffolding a headless Button component using the component architecture patterns. Implement both React and Lit variations to ensure cross-framework compatibility. Validate accessibility expectations (keyboard navigation, focus management) and expose the component API via data attributes and explicit props.

Frequently Asked Questions about component

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

FAQPage Schema
How do I build accessible headless UI components for React and Lit?▼

To build accessible headless UI components for React and Lit, apply framework-agnostic architectural patterns like compound components with 1:1 DOM mapping. This enforces prop naming conventions, data-driven state via data attributes, and consistent cross-framework APIs.

What are headless UI components and when do I need them for a design system?▼

Headless UI components separate logic and state from styling, enforcing accessibility via ARIA roles and keyboard navigation. You need them for design systems or component libraries to enable cross-framework reuse without dictating visual implementation.

Can I use framework-agnostic component architecture across React, Vue, and Svelte?▼

Yes, framework-agnostic component architecture patterns support state, styling, and API design across React, Vue, Svelte, and vanilla JS. The skill provides specific references for React and Lit to enable cross-framework component libraries.

What is the best way to structure a cross-framework component library?▼

Structure a cross-framework component library using compound components (Root/Trigger/Content) for flexible composition. Apply patterns referenced from Base UI, Radix, and Ark UI to enforce accessibility-first defaults and framework-agnostic state management.

How do you manage state and accessibility in headless UI primitives?▼

Manage state in headless UI primitives using data-driven data attributes and expose the component API explicitly. Enforce accessibility defaults through ARIA roles, focus management, and keyboard navigation across all framework implementations.

Related Skills

Explore More Software Engineering Skills→
deepfuturenowdeepfuturenow

port-base-ui

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

Official
Advanced
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced
2good4me2good4me

react-patterns

Guide React component design, hook patterns, and state management selection.

Community
Intermediate
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced