skills.rest
haxlys
haxlysCOMMUNITY
Explore all skills by this author →
GitHub

web-component-design

Document reusable UI component patterns for React, Vue, and Svelte.

1|Updated Apr 27, 2026
Search Tags:#react#vue#svelte#design-system#web-components#component-design
One-click install
npx skills add https://github.com/haxlys/skills --skill web-component-design-haxlys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/haxlys/skills/tree/main/vendored/wshobson-agents/plugins/ui-design/skills/web-component-design
Command: npx skills add https://github.com/haxlys/skills --skill web-component-design-haxlys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing and implementing reusable UI components across React, Vue, and Svelte is hard without a shared pattern library. This Skill consolidates cross-framework patterns and design-system practices to help teams build consistent, scalable component libraries.

Core Features & Use Cases

  • Cross-framework patterns: Compound Components, Render Props, and Slots for Vue/Svelte to enable flexible composition across frameworks.
  • Styling strategies: Guidance on CSS-in-JS, Tailwind, CSS Modules, and other styling approaches aligned with each framework.
  • API design & accessibility: Principles for clean, accessible, and forward-compatible component APIs with sensible defaults and forwardRef-like ergonomics.

Quick Start

Create a small component library example that uses compound components and slots across React and Vue to illustrate patterns.

Frequently Asked Questions about web-component-design

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

FAQPage Schema
How do I build reusable web components across React, Vue, and Svelte?▼

Build reusable web components by applying shared cross-framework patterns like compound components, render props, and slots. This ensures consistent composition, styling, and API design across React, Vue, and Svelte libraries without duplicating logic.

What is the best way to design a forward-compatible component API?▼

Design a forward-compatible component API by enforcing clean principles, sensible defaults, and forwardRef-like ergonomics. This approach ensures accessibility and adaptability for future requirements across different framework implementations.

Can I use CSS Modules and Tailwind together in a cross-framework design system?▼

Yes, you can use CSS Modules and Tailwind together. This skill provides styling strategies that align CSS-in-JS, Tailwind, and CSS Modules with React, Vue, and Svelte component architectures for scalable design systems.

How do compound components and slots work in Vue and Svelte?▼

Compound components and slots in Vue and Svelte work by enabling flexible composition patterns. They allow developers to group related UI parts while maintaining local state and rendering logic, ensuring scalable component library architectures.

Do I need a shared pattern library to build cross-framework UI components?▼

You need a shared pattern library to build cross-framework UI components effectively. Without consolidated patterns, ensuring API consistency, accessibility, and styling alignment across React, Vue, and Svelte becomes difficult for development teams.

Related Skills

Explore More Design & Creative Skills→
manastalukdarmanastalukdar
1

component-library

Scaffold a component library with Storybook, testing, and build configuration.

Community
Advanced
Aurora-AIAurora-AI

elysian-design

Generate branded UI components and assets using the Elysian design system.

Community
Advanced
IFIR649IFIR649

web-component-design

Standardize UI component design across React, Vue, and Svelte.

Community
Advanced
lemulemu

web-component-design

Design portable component APIs across React, Vue, and Svelte.

Community
Advanced