web-component-design

To build reusable UI components across React, Vue, and Svelte, apply cross-framework composition strategies like compound components, slots, and render-props. These patterns ensure your design system remains portable and composable across different frontend projects.

Designing accessible slot-based APIs involves implementing consistent ARIA support and clear API surfaces across your shared UI kit. This Skill provides specific guidance on combining slot-based APIs with accessibility patterns to ensure uniform behavior in React, Vue, and Svelte.

The best way to implement polymorphic components in a shared UI kit is using framework-agnostic composition strategies. This approach provides clear guidance on API surfaces and theming, allowing components to dynamically render different elements while maintaining consistent behavior.

Yes, you can use CSS modules and TypeScript typings with these cross-framework component patterns. The design-system-oriented patterns include specific support for CSS-in-JS, CSS modules, and TS typings to streamline your theming and component API development.

You need cross-framework composition strategies when scaling a cohesive design system across multiple frontend projects. These patterns solve the problem of building portable, composable components by providing clear API surfaces, theming, and accessibility for React, Vue, and Svelte.

To apply cross-framework UI patterns with consistent ARIA attributes, use the provided accessibility guidance and API design examples. These demonstrate how to build accessible components, like a Button, with proper ARIA attributes implemented uniformly in React, Vue, and Svelte.