web-component-design

This skill provides a comprehensive framework for building professional, maintainable, and highly reusable UI components across modern frontend ecosystems. Designed for frontend engineers and system architects, it focuses on the intersection of framework-specific patterns and universal architectural principles. Whether you are bootstrapping a new design system or refactoring a legacy codebase, this skill enables you to implement consistent component interfaces, manage complex state relationships, and optimize styling workflows through modern CSS-in-JS solutions.

• Advanced component composition patterns including Compound Components for encapsulated functionality, Render Props for flexible inversion of control, and Slots for dynamic content injection.

• Strategic guidance on styling architectures such as Tailwind CSS, CSS Modules, styled-components, Emotion, and Vanilla Extract, balancing performance with developer ergonomics.

• Robust component API design principles emphasizing semantic naming, prop validation with TypeScript interfaces, and strict adherence to composition-first development.

• Cross-framework pattern mastery for React (Context/Hooks), Vue 3 (Composables/Provide/Inject), and Svelte 5 (Runes/Snippets) to ensure consistency in component behavior.

• Best practices for accessibility, responsiveness, and design system scalability, ensuring that your component libraries meet enterprise-grade quality standards.

• Target users: Frontend developers, UI/UX engineers, and design system maintainers building libraries or complex interface modules.

• Expected inputs: High-level UI requirements, legacy component code needing refactor, or design specifications from tools like Figma.

• Expected outputs: Clean, modular, type-safe, and well-documented component code that follows framework-specific idioms.

• Implementation constraints: Emphasis on zero-runtime styling where applicable, dependency management, and maintaining stable public APIs for external library consumers.

• Practical tips: Prioritize state isolation, use variant-based styling (e.g., class-variance-authority) to reduce complexity, and always prefer composition via children over prop drilling.