reactcomponents

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

1. Zainstaluj umiejętność w swoim środowisku agenta, upewniając się, że masz dostęp do narzędzi Stitch MCP, Bash, Read, Write i web_fetch.

2. Uruchom list_tools, aby znaleźć prefiks przestrzeni nazw Stitch (zwykle stitch:), który będzie używany w kolejnych poleceniach.

3. Pobierz metadane projektu, wywołując [prefiks]:get_screen dla strony, którą chcesz skonwertować — otrzymasz JSON z informacjami o designie, adresami URL do pobrania HTML i zrzutu ekranu.

4. Sprawdź, czy pliki .stitch/designs/{nazwa_strony}.html i .stitch/designs/{nazwa_strony}.png już istnieją lokalnie. Jeśli tak, zapytaj się, czy chcesz je odświeżyć z projektu Stitch, czy ponownie użyć istniejących. Jeśli nie istnieją, przejdź do kroku 5.

5. Pobierz pliki za pomocą skryptu bash scripts/fetch-stitch.sh, przekazując URL pobrania dla HTML i zrzutu ekranu. Dla zrzutu ekranu najpierw dołącz parametr =w{szerokość} do adresu URL, gdzie szerokość pochodzi z metadanych designu — skrypt obsługuje przekierowania i uwierzytelnianie.

6. Przejrzyj pobrany zrzut ekranu, aby potwierdzić intencję designu i szczegóły układu, a następnie umiejętność wygeneruje komponenty React podzielone na niezależne pliki z logiką w custom hooks.