skills.rest
p-o-ke-nae
p-o-ke-naeCOMMUNITY
Explore all skills by this author →
GitHub

web-component-design

Design reusable UI components with composition, accessibility, and styling strategies.

Updated May 16, 2026
Search Tags:#accessibility#react#vue#design systems#svelte#component architecture#css-in-js
One-click install
npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill web-component-design-p-o-ke-nae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory/tree/main/.github/skills/web-component-design
Command: npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill web-component-design-p-o-ke-nae

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design reusable, accessible, and maintainable UI components when a product needs consistent frontend behavior across pages or frameworks. It reduces ad hoc component choices and makes it easier to grow a design system without duplicating logic or styling.

Core Features & Use Cases

  • Component composition patterns: Build compound components, render props, slots, polymorphic components, and controlled or uncontrolled APIs.
  • Styling strategy guidance: Choose between CSS Modules, Tailwind, styled-components, Emotion, and Vanilla Extract based on performance and workflow needs.
  • Accessibility-first UI design: Apply focus management, ARIA patterns, keyboard interaction, and form validation for dialogs, menus, comboboxes, and inputs.
  • Use case: Refactor a legacy button or tabs implementation into a consistent, reusable component family that supports variants, theming, and ref forwarding.

Quick Start

Ask for a reusable frontend component design that includes composition, accessibility, and a styling approach tailored to your framework.

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 with accessible interactions in React or Vue?▼

To build reusable UI components, you structure composition patterns like compound components and slots, while enforcing accessibility through ARIA patterns, keyboard interaction, and focus management. This ensures consistent frontend behavior across React, Vue, or Svelte.

What's the best way to choose between CSS-in-JS and utility classes for a design system?▼

Choosing a styling strategy involves evaluating CSS Modules, Tailwind, styled-components, Emotion, and Vanilla Extract based on your performance requirements and workflow needs. This approach ensures maintainable styling integration for your UI components.

How do I design controlled or uncontrolled component APIs with variant support?▼

Designing controlled or uncontrolled component APIs requires defining clear state management boundaries and implementing variant APIs. This allows your component architecture to support flexible theming and predictable behavior across different frontend applications.

Does this approach support ref forwarding and polymorphic component patterns?▼

Yes, this approach supports ref forwarding and polymorphic component patterns to ensure flexible component architecture. These composition patterns allow you to build highly adaptable UI components that integrate seamlessly with parent application logic.

How do I apply ARIA patterns and focus management for accessible dialogs and menus?▼

Applying ARIA patterns and focus management for dialogs and menus requires structuring accessible interactions directly within your component architecture. This ensures keyboard navigation and form validation meet accessibility-first UI design standards.

Related Skills

Explore More Software Engineering Skills→
rothenbergtrothenbergt
22

backstage-frontend-plugin

Build Backstage frontend plugins with the New Frontend System.

Community
Intermediate
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
tgautiertgautier
2

ux-design

Architect scalable design systems with token architecture and ARIA patterns.

Community
Advanced
kalamdbkalamdb
48

shadcn

Manages shadcn/ui component installation, configuration, and styling in web applications.

Official
Intermediate