Словами самого skill
Этот skill превращает проект Stitch в модульный фронтенд на React и Vite или синхронизирует существующие React-компоненты с последними дизайнами Stitch. Он предназначен для фронтенд-инженеров, работающих с экранами Stitch: агент находит префикс Stitch MCP с помощью list_tools, получает каждый экран через get_screen, скачивает HTML и скриншоты через scripts/fetch-stitch.sh, извлекает токены tailwind.config в resources/style-guide.json, затем создаёт компоненты, хуки и тестовые данные, которые проверяются AST-валидацией.
Четыре этапа с проверкой обеспечивают этот порядок, а npm run validate следит за интерфейсами Readonly Props, тематическими токенами вместо hex-значений и отсутствием монолитных файлов страниц.
Что он выдаёт
- Загруженные дизайн-ресурсы в .stitch/designs/{page}.html и .stitch/designs/{page}.png для каждого экрана.
- Файл .stitch/metadata.json с полями projectId, title, deviceType, картой screens и полем Last Sync Time.
- Перезаписанный resources/style-guide.json с токенами цвета, шрифта, отступов, радиуса и типографики текущего проекта.
- React-компоненты в src/components, хуки в src/hooks, моковые данные в src/data/mockData.ts и обновлённая точка входа, которая их рендерит.
Как это работает
- 01Найдите пространство имён Stitch
Запустите list_tools, чтобы определить префикс MCP, и затем используйте этот префикс во всех последующих вызовах Stitch.
- 02Получите метаданные для каждого экрана
Вызовите get_screen для каждого экрана в проекте, чтобы получить JSON дизайна и ссылки для скачивания, не пропуская ни одного экрана.
- 03Скачивайте через скрипт
Внутренние инструменты fetch могут не работать с Google Cloud Storage, поэтому скачивание идёт через предоставленный bash-скрипт, который обрабатывает редиректы и процедуры безопасности.
- 04Извлеките токены дизайна
Откройте каждый скачанный HTML-файл и прочитайте объект tailwind.config в блоке script в разделе head: цвета, шрифты, отступы, радиус и типографику.
- 05Соберите компоненты по шаблону
Возьмите поставляемый шаблон компонента за основу и переименуйте каждое вхождение имени компонента-заглушки, прежде чем подключать точку входа.