Nelle parole della skill
Costruisce componenti UI riutilizzabili su React, Vue e Svelte utilizzando pattern di composizione moderni, soluzioni CSS-in-JS e principi di design delle API dei componenti. Copre compound components, render props, slot e pattern specifici per framework come il context di React, i composables di Vue e le rune di Svelte. Si applica a librerie di componenti, design system e refactoring di componenti legacy.
Enfatizza componenti accessibili per default con prop semantiche, responsabilità unica, forwarding dei ref e pattern controlled versus uncontrolled. Include implementazioni concrete per bottoni, accordion, select e tab con class-variance-authority, Tailwind CSS e approcci di styling scoped.
Che cosa produce
- Componenti del design system che implementano bottoni, accordion, select, tab e card con class-variance-authority e Tailwind CSS.
Come funziona
- 01Scegliere un Approccio CSS-in-JS
Scegliere tra Tailwind CSS per il prototyping rapido, CSS Modules per stili scoped, styled-components per lo styling dinamico in React, Emotion per una flessibilità SSR-friendly, o Vanilla Extract per prestazioni zero-runtime.
- 02Progettare l'API del Componente
Utilizzare nomi di prop semantici come isLoading invece di loading, fornire default sensati, supportare la composizione tramite children e consentire override degli stili tramite le prop className o style.
- 03Implementare Pattern Specifici per Framework
Utilizzare il context di React per i compound components, i composables di Vue 3 con provide e inject, o le rune di Svelte 5 con $props e $derived per lo stato reattivo.