skills.rest
boomNDS
boomNDSCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-component-design

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

Updated Mar 27, 2024
Search Tags:#react#vue#patterns#component#svelte#design-system#ui-library
One-click install
npx skills add https://github.com/boomNDS/new_portfolio --skill web-component-design-boomnds
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/boomNDS/new_portfolio/tree/main/.agents/skills/web-component-design
Command: npx skills add https://github.com/boomNDS/new_portfolio --skill web-component-design-boomnds

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

Core Features & Use Cases

  • Framework-agnostic component patterns: Compound components, render props, slots for Vue/Svelte, polymorphic components.
  • CSS-in-JS and styling approaches: Tailwind, CSS Modules, styled-components, Emotion, Vanilla Extract, etc.
  • API design and accessibility: Designing robust component props, accessibility considerations, and keyboard navigation.
  • Use Case: Create a shared component library consumed by React, Vue, and Svelte apps.

Quick Start

Generate a starter plan for a reusable UI component library across 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 build reusable UI components across React, Vue, and Svelte?▼

To build reusable UI components across React, Vue, and Svelte, apply framework-agnostic patterns like compound components, render props, and slots to ensure design-system consistency. This approach maintains type-safe APIs and accessibility across different frontend frameworks.

What is the best way to design a component API for a UI library?▼

The best way to design a component API for a UI library is to establish robust component props and accessibility considerations. Implementing framework-agnostic patterns ensures your UI library maintains design-system consistency and type-safe APIs across React, Vue, and Svelte.

Can I use Tailwind and CSS Modules with cross-framework component patterns?▼

Yes, you can use Tailwind and CSS Modules with cross-framework component patterns. Mastering CSS-in-JS and styling approaches like styled-components, Emotion, and Vanilla Extract allows you to maintain consistent styling within your React, Vue, and Svelte component architecture.

How do I implement polymorphic components in a frontend design system?▼

To implement polymorphic components in a frontend design system, utilize framework-agnostic component patterns alongside robust prop design. This ensures your reusable UI components maintain type-safe APIs and design-system consistency across React, Vue, and Svelte applications.

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

You need framework-agnostic patterns for your UI component library when creating a shared component library consumed by React, Vue, and Svelte apps. These patterns ensure design-system consistency, type-safe APIs, and accessibility considerations across cross-framework UI development.

Does this approach support keyboard navigation and accessibility for UI components?▼

Yes, this approach supports keyboard navigation and accessibility for UI components. Designing robust component props includes specific accessibility considerations, ensuring your reusable UI components in React, Vue, and Svelte are accessible and maintain design-system consistency.