Nos termos do próprio skill
Constrói componentes de UI reutilizáveis em React, Vue e Svelte usando padrões modernos de composição, soluções CSS-in-JS e princípios de design de API de componentes. Aborda compound components, render props, slots e padrões específicos de framework, como context do React, composables do Vue e runes do Svelte. Aplica-se a bibliotecas de componentes, design systems e refatoração de componentes legados.
Enfatiza componentes acessíveis por padrão, com props semânticas, responsabilidade única, ref forwarding e padrões controlled versus uncontrolled. Inclui implementações concretas de botões, accordions, selects e tabs com class-variance-authority, Tailwind CSS e abordagens de estilização com escopo.
O que ele produz
- Componentes de design system implementando botões, accordions, selects, tabs e cards com class-variance-authority e Tailwind CSS.
Como funciona
- 01Escolha uma Abordagem CSS-in-JS
Escolha entre Tailwind CSS para prototipagem rápida, CSS Modules para estilos com escopo, styled-components para estilização dinâmica em React, Emotion para flexibilidade compatível com SSR, ou Vanilla Extract para desempenho sem runtime.
- 02Projete a API do Componente
Use nomes de props semânticos como isLoading em vez de loading, forneça valores padrão sensatos, suporte composição via children e permita sobrescrever estilos através das props className ou style.
- 03Implemente Padrões Específicos de Framework
Use context do React para compound components, composables do Vue 3 com provide e inject, ou runes do Svelte 5 com $props e $derived para estado reativo.