web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
How to use
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.