reactcomponents

Umiejętność konwertuje projekty designu z Stitch na modułowe komponenty React. Pobiera metadane designu, weryfikuje istniejące pliki lokalne, a następnie generuje czysty kod React z podziałem na niezależne pliki. Obsługuje pobieranie HTML i zrzutów ekranu bezpośrednio z Google Cloud Storage, waliduje strukturę kodu za pomocą AST i organizuje logikę biznesową w custom hooks. Idealna dla frontendowców, którzy chcą automatyzować przepływ od designu do kodu.

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.