web-component-design

This skill provides a comprehensive framework for engineering high-quality, maintainable UI components across modern JavaScript and TypeScript ecosystems. It is designed for frontend developers and architects who need to build reusable component libraries, establish consistent design systems, or refactor legacy codebases into modern, modular architectures. The skill covers deep technical patterns for React, Vue, and Svelte, focusing on maximizing component reusability, developer experience, and runtime performance.

• Advanced Composition Patterns: Implement complex structures using Compound Components, Render Props, and slots to create flexible, decoupled interfaces.

• API Design Best Practices: Develop intuitive, typesafe component props interfaces, implementing semantic naming conventions and sensible defaults for public-facing component APIs.

• CSS-in-JS and Styling Orchestration: Evaluate and integrate diverse styling solutions including Tailwind CSS, CSS Modules, styled-components, Emotion, and zero-runtime approaches like Vanilla Extract.

• Accessibility and Consistency: Ensure UI components meet modern web standards for accessibility (A11y) while maintaining visual consistency across large-scale applications.

• Progressive Refactoring: Strategies for migrating legacy UI components to contemporary framework patterns without breaking existing functionality or design parity.

• Framework-Specific Implementations: Expert guidance on React Hooks, context-based patterns, Vue 3 Composables, and Svelte 5 Runes for efficient state management within components.

• Target Audience: Frontend engineers, UI/UX developers, and technical leads responsible for design systems.

• Use Cases: Building enterprise-grade UI component libraries, creating storybook-documented modules, and standardizing frontend architectural patterns.

• Inputs: Codebase architectural requirements, design tokens, and existing component logic.

• Outputs: Scalable, tested, and well-documented component code that follows DRY (Don't Repeat Yourself) principles.

• Constraints: Focuses on modern frameworks; requires understanding of TypeScript and current build-time or runtime styling methodologies.