using-base-ui-with-material-ui

Skill Claude'a do łączenia komponentów Base UI z Material UI. Pozwala budować interfejsy, gdzie Base UI stanowi fundament logiki i dostępności, a Material UI dostarcza wyglądu i stylu. Używaj go, gdy chcesz połączyć elastyczność Base UI z gotowym designem Material UI — na przykład do menu nawigacyjnego, formularzy czy złożonych komponentów interaktywnych.

1. Aktywuj skill w Claude'ie, wpisując zapytanie o integrację Base UI z Material UI. Skill automatycznie ogłosi swoją aktywację: "Using Base UI with Material UI skill".

2. Opisz komponent, który chcesz zbudować (np. menu nawigacyjne, przycisk, formularz). Skill będzie miał dostęp do dokumentacji Base UI i będzie wiedzieć, jak prawidłowo strukturyzować komponenty.

3. Skill użyje Base UI jako fundamentu — jego komponentów do logiki i dostępności — a następnie przekaże Material UI do właściwości render dla wyglądu. Na przykład dla NavigationMenu.Link użyje Material UI Link jako elementu renderującego.

4. Przejrzyj wygenerowany kod. Będzie zawierać Base UI komponenty opakowane Material UI elementami ze stylami z sx prop, co zapewni spójny wygląd z Twoim designem Material UI.

5. Skopiuj kod do swojego projektu. Upewnij się, że masz zainstalowane obie biblioteki: @base-ui-components/react i @mui/material.

6. Dostosuj style i props do swoich potrzeb — Material UI komponenty będą obsługiwać wygląd, a Base UI będzie zarządzać zachowaniem i dostępnością.