Integrate custom web components in React 18 and 19 with wrappers and TypeScript typings.
npx skills add https://github.com/bennypowers/cem --skill react-bennypowers
Please help me install this Agent Skill. Skill: react Source: https://github.com/bennypowers/cem/tree/main/extensions/claude-code/skills/react Command: npx skills add https://github.com/bennypowers/cem --skill react-bennypowers
This guidance helps developers integrate custom elements into React projects, addressing differences between React 18 and React 19 and providing strategies for wrappers, typings, and slot usage.
Detect your project’s React version and follow the guidance for React 19+ native support or React 18 wrappers to start integrating the element.
High-intent search queries and answers about installing and using this skill.
Using custom elements in React 19 relies on native framework support for properties and events, allowing direct integration without wrappers. You can render the elements directly in JSX while passing complex data as props.
Integrating web components in React 18 requires wrapper strategies like @lit/react or ref-based approaches to handle properties and events. This bridges the gap until native support arrives in version 19.
Adding TypeScript typings for custom elements in JSX requires declaring the element interfaces and updating the JSX namespace. This ensures correct attribute typing and type safety across your React project.
Mapping web component slots to React children involves using wrapper strategies to translate slot attributes into child components. This ensures proper content projection within the custom element.
Wrappers for custom elements in React are necessary for version 18 to handle events and complex properties, but optional in version 19 due to native support. Use @lit/react for simplified integration.
React 18 does not support custom element properties and events natively, requiring wrappers or refs to manage interactions. Version 19 introduces native support, eliminating this limitation.
carlos-algmsEnforce consistent React and TypeScript patterns for components and hooks.
fusengineImplement React component composition patterns with children, slots, and render props.
ConectateIntegrate Conectate Components with Lit using CtLit utilities, slots, and events.
outfitter-devApply type-safe React patterns for components, events, Server Components, Actions, and TanStack Router.
