En los propios términos del Skill
Construye componentes de UI reutilizables en React, Vue y Svelte usando patrones de composición modernos, soluciones CSS-in-JS y principios de diseño de API de componentes. Cubre componentes compuestos, render props, slots y patrones específicos de framework como el context de React, los composables de Vue y las runes de Svelte. Se aplica a librerías de componentes, sistemas de diseño y la refactorización de componentes heredados.
Enfatiza componentes accesibles por defecto con props semánticas, responsabilidad única, ref forwarding y patrones controlados frente a no controlados. Incluye implementaciones concretas para botones, acordeones, selects y pestañas con class-variance-authority, Tailwind CSS y enfoques de estilos con alcance limitado.
Qué produce
- Componentes de sistema de diseño que implementan botones, acordeones, selects, pestañas y tarjetas con class-variance-authority y Tailwind CSS.
Cómo funciona
- 01Elija un enfoque de CSS-in-JS
Elija entre Tailwind CSS para prototipado rápido, CSS Modules para estilos con alcance limitado, styled-components para estilos dinámicos en React, Emotion para flexibilidad compatible con SSR, o Vanilla Extract para un rendimiento sin overhead en tiempo de ejecución.
- 02Diseñe la API del componente
Use nombres de props semánticos como isLoading en lugar de loading, proporcione valores predeterminados sensatos, permita la composición mediante children y habilite la sobrescritura de estilos a través de las props className o style.
- 03Implemente patrones específicos de framework
Use el context de React para componentes compuestos, los composables de Vue 3 con provide e inject, o las runes de Svelte 5 con $props y $derived para el estado reactivo.