skills.rest
khrore
khroreCOMMUNITY
Explore all skills by this author →
GitHub

web-component-design

Standardize reusable UI component creation across React, Vue, and Svelte.

Updated Apr 15, 2025
Search Tags:#accessibility#react#vue#svelte#design-systems#css-in-js#component-design
One-click install
npx skills add https://github.com/khrore/nix-config --skill web-component-design-khrore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-design
Source: https://github.com/khrore/nix-config/tree/main/dotfiles/common/.config/opencode/skills/web-component-design
Command: npx skills add https://github.com/khrore/nix-config --skill web-component-design-khrore

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Modern frontend projects suffer from inconsistent component APIs, fragmented styling approaches, and accessibility regressions that make UI codebases hard to maintain and scale. This guide consolidates composition patterns, styling tradeoffs, and accessibility best practices to help teams build predictable, reusable components and design systems.

Core Features & Use Cases

  • Composition patterns: compound components, render props, slots, and polymorphic components for flexible APIs and encapsulated state.
  • Styling approaches: guidance on Tailwind, CSS Modules, styled-components, Emotion, and zero-runtime options like Vanilla Extract with tradeoffs for SSR and performance.
  • Accessibility and UX: ARIA patterns, focus management, live regions, keyboard navigation, and contrast utilities to build accessible components by default.
  • API design and patterns: prop naming, controlled vs uncontrolled inputs, forward refs, memoization, and strategies for refactoring legacy components.
  • Performance and bundling: critical CSS extraction, code-splitting, and SSR considerations for production component libraries.

Quick Start

Use the web-component-design skill to draft a reusable, accessible React Button component that supports variants, sizes, and forwardRef.

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

Build reusable UI components across React, Vue, and Svelte by applying standardized composition patterns, styling strategies, and accessibility practices. This approach prescribes compound and polymorphic APIs to ensure predictable, maintainable component libraries.

What is the best way to handle accessibility and ARIA focus management in a design system?▼

Handle accessibility and ARIA focus management in a design system by implementing standardized keyboard navigation, live regions, and contrast utilities. This ensures components are accessible by default and satisfies requirements for focus handling and ARIA behaviors.

How do I choose between CSS-in-JS and utility-first styling for component libraries?▼

Choose between CSS-in-JS and utility-first styling by evaluating tradeoffs for SSR performance and runtime overhead. Guidance covers Tailwind, CSS Modules, styled-components, Emotion, and zero-runtime options like Vanilla Extract to optimize bundling.

Can I use polymorphic and compound component patterns to refactor legacy UI?▼

Yes, you can use polymorphic and compound component patterns to refactor legacy UI. These composition patterns provide flexible APIs and encapsulated state management, allowing you to standardize inconsistent component architectures into maintainable design systems.

Does server-side rendering require zero-runtime CSS solutions for component design?▼

Server-side rendering benefits from zero-runtime CSS solutions to avoid performance bottlenecks. Critical CSS extraction and code-splitting considerations are essential when implementing SSR-friendly styling for production component libraries.

Why do my reusable components have inconsistent prop APIs and how do I fix them?▼

Inconsistent prop APIs in reusable components are fixed by standardizing API design patterns. This involves prescribing prop naming, controlled vs uncontrolled inputs, forward refs, and memoization strategies to create predictable component interfaces.

Related Skills

Explore More Software Engineering Skills→
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate
simnovasimnova
18

vercel-react-best-practices

Apply performance best practices to React and Next.js code.

Official
Basic
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
AI-Foundry-CoreAI-Foundry-Core
4

web-component-design

Standardizes UI component patterns across React, Vue, and Svelte for design systems.

Official
Advanced