skills.rest
mrodrigues1
mrodrigues1COMMUNITY
Explore all skills by this author →
GitHub

web-component-design

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

Updated Apr 4, 2026
Search Tags:#accessibility#react#vue#svelte#design-systems#css-in-js#component-design
One-click install
npx skills add https://github.com/mrodrigues1/akachan --skill web-component-design-mrodrigues1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/mrodrigues1/akachan/tree/main/.junie/skills/web-component-design
Command: npx skills add https://github.com/mrodrigues1/akachan --skill web-component-design-mrodrigues1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many teams struggle to build consistent, accessible, and composable UI components across frameworks, leading to duplicated work, fragile APIs, and style conflicts. This Skill helps engineers and designers standardize component APIs, composition patterns, and styling strategies so components are maintainable, testable, and easy to reuse.

Core Features & Use Cases

  • Cross-framework composition: Patterns and examples for React compound components and render props, Vue composables and slots, and Svelte component conventions.
  • Styling strategies: Guidance on Tailwind, CSS Modules, styled-components, Emotion, and Vanilla Extract including tradeoffs for SSR, runtime, and bundle size.
  • API design & patterns: Polymorphic components, controlled vs uncontrolled inputs, forward refs, and minimizing prop explosion with composition.
  • Accessibility & UX: ARIA patterns, focus management, live regions, and keyboard interactions for modals, menus, comboboxes, and forms.
  • Use Case: Create a design system with accessible, themeable buttons, inputs, and layout primitives that work in React, Vue, or Svelte and integrate with your build and SSR pipeline.

Quick Start

Create a React Button component using Tailwind with accessible ARIA attributes, props for variant and size, loading/disabled states, and forwardRef support.

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

Design reusable UI components by applying framework-specific composition patterns like React compound components, Vue composables, and Svelte conventions to standardize component APIs and prevent duplicated work.

What is the best way to manage ARIA accessibility and focus in a modal component?▼

The best way to manage ARIA accessibility in modals is implementing focus management, live regions, and keyboard interactions to ensure UI components meet standard accessibility behavior patterns.

How do I choose between CSS-in-JS and utility-first styling for a design system?▼

Choose between CSS-in-JS and utility-first styling by evaluating tradeoffs for SSR, runtime performance, and bundle size to ensure your design system maintains maintainable and testable components.

Can I use polymorphic components and forward refs to prevent prop explosion?▼

Yes, you can use polymorphic components and forward refs to minimize prop explosion by relying on composition patterns rather than overloading component APIs with endless prop configurations.

Does this approach support refactoring legacy components into composable primitives?▼

Yes, this approach supports refactoring legacy components by converting them into composable primitives, ensuring fragile APIs and style conflicts are replaced with maintainable, testable composition patterns.

Related Skills

Explore More Software Engineering Skills→
manastalukdarmanastalukdar
1

component-library

Scaffold a component library with Storybook, testing, and build configuration.

Community
Advanced
allenlin90allenlin90
1

frontend-ui-components

Render and compose UI primitives from the @eridu/ui library.

Community
Intermediate
rattamnoonrattamnoon

tailwind-css-patterns

Applies Tailwind CSS utility patterns to React, Vue, and Svelte components.

Community
Intermediate
civictechdccivictechdc
1

web-component-design

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

Official
Advanced