skills.rest
landmaster135
landmaster135COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-component-design

Designs cross-framework UI components for React, Vue, and Svelte.

Updated Apr 9, 2025
Search Tags:#ui#react#vue#patterns#component#svelte#design-system
One-click install
npx skills add https://github.com/landmaster135/devbox --skill web-component-design-landmaster135
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/landmaster135/devbox/tree/main/.config/codex/skills/frontend-programming/skills/web-component-design
Command: npx skills add https://github.com/landmaster135/devbox --skill web-component-design-landmaster135

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reusable UI components reduce duplication, enforce consistent UX, and speed up development across teams.

Core Features & Use Cases

  • Patterns for component composition (Compound Components, Render Props, Slots)
  • API design and design-system integration across React, Vue, and Svelte
  • Accessibility and responsive UI patterns for cross-framework libraries
  • Use cases include building a component library, consolidating UI APIs, and refactoring legacy components

Quick Start

Create a foundational set of reusable components and begin integrating them into two pilot apps.

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 for a cross-framework design system?▼

Design reusable UI components by applying framework-agnostic composition patterns like Compound Components and Slots to standardize interfaces across React, Vue, and Svelte. This establishes consistent APIs and enforces accessible patterns for cross-framework libraries.

What is the best way to consolidate UI APIs when refactoring legacy components?▼

Consolidate UI APIs by establishing consistent component composition patterns and enforcing accessible, responsive UI guidelines. This standardizes interfaces and reduces duplication when refactoring legacy components into a unified design system.

How do compound components and render props work for UI component composition?▼

Compound components and render props are composition patterns that allow you to build reusable UI components with flexible, standardized APIs. They enable predictable state sharing and rendering logic across React, Vue, and Svelte.

Can I use these UI component patterns with Svelte and Vue, or are they React only?▼

These UI component patterns apply directly to Svelte and Vue, alongside React. The Skill provides framework-agnostic composition guidelines and API design integration for building accessible component libraries across all three frameworks.

When should I not use compound components for my UI library?▼

You should avoid complex composition patterns like compound components when simpler component APIs suffice for your use case. Over-architecting basic UI elements can reduce maintainability and increase the learning curve for your design system.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

frontend-architect-agent

Provide frontend architecture guidance for React, Vue, and Svelte component design.

Official
Advanced
bitovibitovi
46

extract-ui-component

Extract reusable UI components from inline React code patterns.

Official
Intermediate
lemulemu

web-component-design

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

Community
Advanced
mikeOnBreezemikeOnBreeze
284

shadcn

Enforce ShadCN UI best practices for styling, theming, and component composition in Next.js projects.

Community
Intermediate