skills.rest
civictechdc
civictechdcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-component-design

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

1|Updated Jul 24, 2025
Search Tags:#frontend#react#vue#svelte#web-components#design-systems#component-design
One-click install
npx skills add https://github.com/civictechdc/votecatcher --skill web-component-design-civictechdc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/civictechdc/votecatcher/tree/main/frontend/.agent/skills/web-component-design
Command: npx skills add https://github.com/civictechdc/votecatcher --skill web-component-design-civictechdc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing scalable, maintainable UI components across React, Vue, and Svelte to support design systems and cross-framework consistency.

Core Features & Use Cases

  • Reusable component patterns (Compound Components, Render Props, Slots) across frameworks.
  • CSS-in-JS and styling strategy guidance for React, Vue, and Svelte.
  • Design system APIs and polymorphic components for accessible, consistent UI.

Quick Start

Create a starter project that demonstrates a reusable 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 design reusable UI components across React, Vue, and Svelte?▼

Designing reusable UI components across React, Vue, and Svelte requires applying composition patterns like compound components, render props, and slots. This ensures cross-framework UI consistency and maintainable design system APIs.

What is the best way to build a design system API for accessible polymorphic components?▼

Building a design system API for accessible polymorphic components involves defining clear composition strategies and styling approaches. Consistent API design across React, Vue, and Svelte ensures components remain accessible and maintainable.

Can I use compound components and render props for cross-framework UI consistency?▼

Yes, compound components and render props can be used for cross-framework UI consistency. These composition patterns enable flexible component APIs in React, Vue, and Svelte, allowing developers to share design system logic effectively.

How do I manage CSS-in-JS and styling strategies for a multi-framework component library?▼

Managing CSS-in-JS and styling strategies for a multi-framework component library involves applying framework-specific styling approaches. Guidance on these strategies helps maintain visual consistency across React, Vue, and Svelte design systems.

When do I need slots versus render props in Vue and Svelte component design?▼

You need slots in Vue and Svelte component design when distributing content within component templates, while render props offer dynamic rendering logic. Choosing between them depends on your specific design system API requirements.

Related Skills

Explore More Software Engineering Skills→
elophantoelophanto
116

frontend-development

Automate frontend project setup and UI implementation guidance for React, Vue, Angular, and Svelte.

Community
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
tyk-labtyk-lab

web-component-design

Standardize UI component APIs, styling, and accessibility across React, Vue, and Svelte.

Community
Advanced
efekrbasefekrbas
41

radix-ui-design-system

Design accessible React component systems with Radix UI primitives.

Community
Advanced