semi-design-guide

Skill zawiera praktyczne wskazówki do pracy z biblioteką komponentów Semi Design od ByteDance. Zyskujesz dostęp do czterech narzędzi MCP: get_semi_document do dokumentacji, get_component_file_list do listy plików, get_file_code do kodu pliku i get_function_code do implementacji funkcji. Skill opisuje pełny przepływ zapytań (wyszukaj komponent → sprawdź dokumentację → przejrzyj kod źródłowy → zobacz implementację), zawiera rozwiązania dla typowych scenariuszy jak filtrowanie tabel, walidacja formularzy, kaskadowe selektory i drag-and-drop. Dodatkowo znajdziesz wytyczne dotyczące importu komponentów, dostosowania tematów, kompatybilności React 19 i rozszerzania komponentów.

1. Upewnij się, że masz skonfigurowany Semi MCP w swoim pliku konfiguracyjnym. Dodaj wpis do mcpServers z poleceniem npx i argumentem -y @douyinfe/semi-mcp, aby narzędzie było dostępne dla Twojego asystenta AI.

2. Gdy potrzebujesz informacji o komponencie Semi Design, zacznij od wyszukania dokumentacji za pomocą narzędzia get_semi_document. Podaj nazwę szukanego komponentu, aby uzyskać jego API i parametry.

3. Jeśli chcesz zobaczyć dostępne komponenty lub pliki, użyj get_component_file_list, aby otrzymać listę wszystkich plików w bibliotece. To pomaga w orientacji, gdy nie jesteś pewny, jak się coś nazywa.

4. Aby przejrzeć pełny kod komponentu, zastosuj get_file_code z ścieżką do pliku. Jeśli interesuje Cię konkretna funkcja lub logika wewnątrz komponentu, użyj get_function_code, aby zobaczyć jej implementację.

5. Podczas implementacji sprawdź BEST_PRACTICES.md w ramach tego Skill, aby upewnić się, że importujesz komponenty prawidłowo, dostosowujesz tematy zgodnie z wytycznymi i rozszerzasz komponenty, gdy wbudowane props nie wystarczają.

6. W przypadku typowych zadań takich jak filtrowanie tabel, walidacja formularzy czy kaskadowe selektory, zapoznaj się z sekcją WORKFLOWS.md, która zawiera szczegółowe kroki dla każdego scenariusza.