skills.rest
duanbiao2000
duanbiao2000COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-component-design

Design reusable UI components across React, Vue, and Svelte.

3|1|Updated Feb 3, 2026
Search Tags:#react#vue#component#svelte#design-system#ui-patterns#css-in-js
One-click install
npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill web-component-design-duanbiao2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/duanbiao2000/obsidianDoc26/tree/main/agents-main/plugins/ui-design/skills/web-component-design
Command: npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill web-component-design-duanbiao2000

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 can be challenging due to divergent APIs and inconsistent design patterns; this Skill provides patterns and guidelines to unify component design and foster a cohesive design system.

Core Features & Use Cases

  • Cross-framework patterns (Compound Components, Render Props, Slots) for library-like component APIs across React, Vue, and Svelte.
  • Styling approaches and API design best practices for consistent visuals and accessible components.
  • Real-world usage scenarios include building design systems, component libraries, and shared UI kits that scale across multiple front-end frameworks.

Quick Start

Create a shared Button component pattern across React, Vue, and Svelte to demonstrate consistent API and styling across targets.

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 across React, Vue, and Svelte?▼

Design reusable UI components across React, Vue, and Svelte by applying cross-framework patterns like Compound Components, Render Props, and Slots to unify APIs and ensure consistent design system implementation.

What are the best practices for cross-framework component API design?▼

Cross-framework component API design relies on composition patterns and consistent styling approaches like CSS-in-JS to create cohesive, accessible interfaces that scale across React, Vue, and Svelte libraries.

How does the Compound Components pattern work for shared UI kits?▼

The Compound Components pattern for shared UI kits allows building cohesive, library-like component APIs where related parts work together implicitly, enabling scalable design systems across multiple front-end frameworks.

Can I use CSS-in-JS strategies to unify design systems across different frameworks?▼

Yes, CSS-in-JS strategies can unify design systems across different frameworks by providing consistent styling approaches and API design best practices for accessible components in React, Vue, and Svelte.

When do I need cross-framework UI patterns for my component library?▼

You need cross-framework UI patterns when building shared UI kits, design systems, or component libraries that must scale across React, Vue, and Svelte with consistent visuals and robust APIs.

Related Skills

Explore More Design & Creative Skills→
ChoreShoreChoreShore

token-keeper

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

Official
Intermediate
jpoutrinjpoutrin
14

design-system

Detect hard-coded values and generate design system component structures.

Community
Basic
mrodrigues1mrodrigues1

web-component-design

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

Community
Advanced
OpenDCAIOpenDCAI
114

web-component-design

Develop reusable cross-framework UI component patterns for React, Vue, and Svelte.

Official
Advanced