web-component-design
Projektuj komponenty React, Vue i Svelte z czystymi wzorcami kompozycji i nowoczesnym stylowaniem
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Opanuj architektury komponentów UI dla nowoczesnych frameworków. Skill obejmuje wzorce composition (compound components, render props, slots), strategie CSS-in-JS oraz projektowanie API komponentów. Idealny do budowania bibliotek komponentów, systemów designu i refaktoryzacji kodu frontendowego. Nauczysz się tworzyć skalowalne, dostępne i responsywne komponenty z konsystentnym interfejsem.
Jak używać
Zainstaluj skill web-component-design w swoim środowisku agenta (Claude, Copilot lub podobnym narzędziu). Skill automatycznie udostępni wiedzę o wzorcach komponentów React, Vue i Svelte.
Kiedy projektujesz nową bibliotekę komponentów lub system designu, poproś agenta o wskazówki dotyczące composition patterns — compound components, render props lub slots w zależności od wybranego frameworku.
Dla każdego komponentu określ, które podejście CSS-in-JS najlepiej pasuje do Twoich potrzeb (styled-components, Emotion, CSS Modules, Tailwind czy inne). Skill pomoże Ci wybrać rozwiązanie na podstawie wymagań projektu.
Implementuj komponenty stosując rekomendowane wzorce: compound components do powiązanych elementów UI, render props do delegowania renderowania, slots (Vue/Svelte) do wstrzykiwania treści.
Gdy refaktoryzujesz starszy kod, poproś agenta o porównanie bieżącego podejścia z nowoczesnymi wzorcami i otrzymaj konkretne kroki migracji.
Weryfikuj dostępność (accessibility) i responsywność komponentów — skill zawiera praktyki dla obu aspektów przy budowaniu komponentów wieloplatformowych.