skills.rest
IFIR649
IFIR649COMMUNITY
Explore all skills by this author →
GitHub

web-component-design

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

Updated Mar 8, 2026
Search Tags:#react#vue#svelte#design-system#component-patterns#css-in-js
One-click install
npx skills add https://github.com/IFIR649/my-lumea-assets-app --skill web-component-design-ifir649
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/IFIR649/my-lumea-assets-app/tree/main/.agents/skills/web-component-design
Command: npx skills add https://github.com/IFIR649/my-lumea-assets-app --skill web-component-design-ifir649

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing and maintaining scalable UI component libraries across React, Vue, and Svelte often leads to inconsistent APIs, duplicated patterns, and fragmented styling approaches. This Skill provides unified patterns and guidance to streamline cross-framework component design.

Core Features & Use Cases

  • Cross-framework patterns: compound components, render props, slots, and polymorphic components to enable flexible composition.
  • Styling strategies: CSS-in-JS, CSS modules, and framework-agnostic patterns with practical guidance for design systems.
  • Design-system guidance: API consistency, accessibility considerations, and framework-specific implementations to accelerate product development.

Quick Start

Review the references to study patterns, then refactor or build a UI component library using the patterns described to create a cohesive, accessible design system across frameworks.

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 a cross-framework UI component library for React, Vue, and Svelte?▼

Cross-framework UI component patterns standardize APIs across React, Vue, and Svelte using techniques like compound components, render props, and slots to enable flexible composition and maintainable design systems.

What is the best way to implement compound components and slots in different frontend frameworks?▼

Implementing compound components and slots requires mapping the pattern to framework-specific APIs: React relies on context and children, Vue uses named slots, and Svelte utilizes snippets or slots, ensuring flexible composition across your design system.

Can I use CSS-in-JS and CSS modules to maintain consistent styling across a cross-framework design system?▼

Yes, CSS-in-JS and CSS modules can maintain consistent styling across a cross-framework design system by applying framework-agnostic styling strategies with practical guidance for cohesive visual output across React, Vue, and Svelte components.

How do I ensure API consistency and accessibility when designing polymorphic components?▼

Ensure API consistency and accessibility for polymorphic components by applying unified design-system guidelines and framework-specific implementation patterns that standardize component properties and interactions across React, Vue, and Svelte.

When should I avoid cross-framework component patterns and use framework-specific implementations instead?▼

Avoid cross-framework component patterns when a single framework's unique capabilities are heavily leveraged, as forcing unified patterns might create fragmented styling or limit native performance, making framework-specific implementations more suitable.

Related Skills

Explore More Software Engineering Skills→
AI-Foundry-CoreAI-Foundry-Core
4

web-component-design

Standardizes UI component patterns across React, Vue, and Svelte for design systems.

Official
Advanced
k1lgork1lgor
2

frontend-architect

Generate accessible, responsive UI component designs across frameworks.

Community
Intermediate
nsuberinsuberi

normalize

Audit and realign UI components, spacing, tokens, and accessibility to a design system.

Community
Advanced
JuanDiego30JuanDiego30

web-component-design

Design reusable UI components with consistent APIs across React, Vue, and Svelte.

Community
Advanced