skills.rest
lemu
lemuCOMMUNITY
Explore all skills by this author →
GitHub

web-component-design

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

Updated Oct 22, 2025
Search Tags:#react#vue#svelte#design-system#web-components#component-patterns#ui-library
One-click install
npx skills add https://github.com/lemu/sea-prototype-template --skill web-component-design-lemu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/lemu/sea-prototype-template/tree/main/.agents/skills/web-component-design
Command: npx skills add https://github.com/lemu/sea-prototype-template --skill web-component-design-lemu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Cross-framework UI component design is often duplicative, leading to inconsistent APIs and wasted effort. This Skill provides patterns to create portable, reusable components and cohesive design systems that stay in sync across React, Vue, and Svelte.

Core Features & Use Cases

  • Cross-framework component patterns for React, Vue, and Svelte that enable a portable API surface and design-system alignment
  • Styling strategies including CSS-in-JS, CSS Modules, and utility-first approaches to ensure consistent visuals
  • Use cases such as building a shared Button, Card, and Modal with a single API surface across frameworks

Quick Start

Design a cross-framework Button component with a shared API that works in React, Vue, and Svelte.

Frequently Asked Questions about web-component-design

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

FAQPage Schema
How do I design reusable UI components that work across React, Vue, and Svelte?▼

Design cross-framework UI components by enforcing framework-agnostic APIs, consistent component composition patterns, and unified styling strategies. This ensures a portable API surface for shared elements like Buttons and Modals across React, Vue, and Svelte.

What is a framework-agnostic component API for a design system?▼

A framework-agnostic component API standardizes props, events, and accessibility conventions across React, Vue, and Svelte. It enables cohesive design systems by ensuring shared UI elements maintain consistent behavior and styling strategies across different frameworks.

What's the best way to keep styling consistent for web components across multiple frameworks?▼

Keep web components visually consistent by applying shared styling strategies like CSS Modules or utility-first approaches. This enforces design-system alignment and delivers unified visuals for UI components across React, Vue, and Svelte.

Can I use the same component composition patterns for React, Vue, and Svelte?▼

Yes, you can use shared component composition patterns for React, Vue, and Svelte. This approach enforces framework-agnostic conventions and documentation standards, enabling a single API surface for your reusable UI library.

How do I handle accessibility and testing for cross-framework UI components?▼

Handle accessibility and testing by enforcing framework-agnostic conventions and documentation standards across your UI components. This ensures consistent accessibility considerations and reliable testing practices for shared components in React, Vue, and Svelte.

Why does my shared UI component API break when porting between React and Vue?▼

Shared UI component APIs break when porting between React and Vue due to a lack of framework-agnostic conventions. Establishing unified component composition patterns and portable API surfaces prevents inconsistent behavior across frameworks.

Related Skills

Explore More Software Engineering Skills→
ChoreShoreChoreShore

token-keeper

Validate design token usage and accessibility patterns in React, Vue, and Svelte components.

Official
Intermediate
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced
mrodrigues1mrodrigues1

web-component-design

Design reusable, accessible UI component libraries for React, Vue, or Svelte.

Community
Advanced
thc1006thc1006
20

web-component-design

Build scalable UI component patterns across React, Vue, and Svelte.

Community
Advanced