Site Clone — pixel-perfect клонирование сайтов

Рабочий подход проверен на реальном проекте клонирования сервисного центра (65% работы за одну сессию + ручные правки). Примеры в этом скилле ссылаются на apple-doctor.ru как на конкретный test case — при клонировании другого сайта подставляй свой домен.

Before you start

Run bash scripts/check-env.sh from the skill directory to verify all prerequisites (Node ≥20, git, Chrome, optional wrangler/gh/python3). See phases/00-prerequisites.md for details and install instructions for missing tools.

Философия

НЕ пытайся автоматически склонировать сайт через SingleFile, wget, httrack или вставку серверного HTML целиком. Все эти подходы провалились на практике:

• SingleFile → замороженный DOM, base64 мусор, сломанные lazy-load
• Server HTML → JS-зависимые блоки не рендерятся без бэкенда
• wget/httrack → нет JS-рендеринга, lazy-load пропускает картинки

Работает только: серверный HTML как reference → разбивка на Astro-компоненты → оригинальный CSS без изменений → показ клиенту на каждой итерации.

Быстрый старт

0. scripts/check-env.sh — проверить окружение (Node/git/Chrome/wrangler/gh/python3)
1. phases/00-prerequisites.md — что проверяется и как фиксить missing tools
2. phases/01-discovery.md — задать пользователю ВСЕ вопросы upfront (30+ вопросов)
3. phases/02-audit.md — Lighthouse + AUDIT.md найти все проблемы
4. phases/03-capture.md — скачать HTML + все ассеты
5. phases/04-init.md — инициализировать Astro проект
6. phases/05-components.md — блок за блоком, показ после каждого
7. phases/06-widgets.md — внешние виджеты (карты, отзывы, чат)
8. phases/07-mobile.md — мобилка + скриншот-сравнение
9. phases/08-deploy.md — Cloudflare Pages
10. phases/09-parameterize.md — config-driven для множества клиентов

Обязательно перед началом

Прочитай phases/01-discovery.md и задай ВСЕ вопросы до того как начнешь работать. Это экономит часы переделок. На первом реальном проекте клонирования работа началась сразу с кода, и после этого 15+ раз приходилось переделывать секции из-за незаданных заранее вопросов.

Структура скилла

site-clone/
├── SKILL.md                    # этот файл
├── phases/                     # порядок работы, фаза за фазой
│   ├── 00-prerequisites.md     # проверка окружения
│   ├── 01-discovery.md         # вопросы к пользователю
│   ├── 02-audit.md             # анализ оригинала
│   ├── 03-capture.md           # скачивание HTML+ассетов
│   ├── 04-init.md              # Astro init
│   ├── 05-components.md        # компоненты
│   ├── 06-widgets.md           # внешние виджеты
│   ├── 07-mobile.md            # мобилка
│   ├── 08-deploy.md            # деплой CF Pages
│   ├── 09-parameterize.md      # параметризация
│   └── 10-design-polish.md     # Apple HIG 2025 стиль
├── scripts/                    # автоматизация
│   ├── check-env.sh            # проверка Node/git/Chrome/wrangler/gh
│   ├── download-assets.py      # скачать все ассеты по URL
│   ├── fetch-ajax-data.sh      # AJAX endpoints (цены/каталог)
│   ├── extract-sections.py     # распарсить HTML на секции
│   ├── screenshot-compare.py   # Playwright сравнение
│   └── lighthouse-audit.sh     # Lighthouse отчёт
├── references/                 # шаблоны файлов
│   ├── astro-base-layout.astro # Base.astro
│   ├── site-config.json        # site.json
│   ├── header-component.astro  # Header с data-da
│   ├── astro-config.mjs        # astro.config.mjs
│   ├── alpine-dropdown.astro   # dropdown с поиском (вместо select)
│   └── pitfalls.md             # 28 известных проблем
└── templates/
    ├── questions.md            # discovery вопросы
    └── checklist.md            # чеклист верификации

Ключевые уроки

Процесс:

1. Задавать все вопросы ДО кодинга
2. Показывать клиенту после КАЖДОГО компонента
3. Использовать оригинальный CSS как есть (65KB inline → global.css)
4. Разбивать страницу на Astro-компоненты, а data-heavy блоки — через set:html

Технические:

• Картинки каталога НЕ на /design/img/ — искать на /content/files/catalogN/{tn,source}/
• Lighthouse через AJAX endpoints /ajax-remonta/product-cXX/ — скачать прайсы
• vendor.js с оригинала нужен для NiceSelect
• Splide + auto-scroll extension для галереи
• myreviews.dev работает только на реальном домене (не localhost)
• Hero слайдер должен быть type: loop + autoplay
• body { opacity: 0 } в оригиналах — убрать
• На macOS нет timeout — использовать Python asyncio или обходиться
• npx astro build запускать из правильного cwd

Подводные камни см. references/pitfalls.md

Критически важно

ВСЕГДА перед началом работы:

1. Прочитай phases/01-discovery.md
2. Задай пользователю вопросы через AskUserQuestion
3. Дождись ответов
4. Только потом начинай кодить

Иначе — переделки гарантированы.

Git checkpoints — обязательно

Site clone = длинный процесс с визуальными итерациями. После каждой фазы — commit:

# После Phase 4 (init)
git commit -am "Init: Astro project"

# После Phase 5 (components)
git commit -am "Components: pixel-perfect clone working"

# Перед Phase 10 (design polish) — ОБЯЗАТЕЛЬНО!
git commit -am "Checkpoint: clone ready, before design changes"

Если нет GitHub — спросить пользователя нужно ли создавать (backup + можно откатиться если клиент скажет "мне не нравится новый дизайн, верни как было").

Rollback:

git log --oneline
git reset --hard <hash>