---
name: frontend-check
description: Проверка фронтенд-изменений — зависимости, компоненты, билд. Вызывай после работы с компонентами, страницами или интеграции дизайна.
---

# 🔍 Frontend Check — Проверка изменений

Этот скилл проверяет что фронтенд-изменения не ломают проект и соответствуют стандартам.

## Когда вызывать

- После добавления/изменения компонентов
- После добавления/изменения страниц
- После интеграции дизайна из Figma/Pencil.dev
- Перед коммитом фронтенд-изменений

## Процесс проверки

Выполни все шаги последовательно. Выводи результат каждого шага сразу с эмоджи-статусом.

### Вывод — начало

Начни с:
```
🔍 ═══════════════════════════════════════
   FRONTEND CHECK · ПРОВЕРКА ИЗМЕНЕНИЙ
═══════════════════════════════════════
```

### Шаг 1: Проверка зависимостей

Проверь `git diff apps/web/package.json` — появились ли новые зависимости.

- Если нет изменений: `📦 Зависимости .................. ✅ Без изменений`
- Если добавлена разрешённая (@astrojs/*, @tailwindcss/*): `📦 Зависимости .................. ✅ Добавлен @astrojs/sitemap`
- Если добавлена неразрешённая: `📦 Зависимости .................. ⚠️ Добавлен framer-motion — ТРЕБУЕТ ОДОБРЕНИЯ`

Разрешённые зависимости: пакеты @astrojs/*, @tailwindcss/*, alpinejs. Всё остальное требует одобрения пользователя.

### Шаг 2: Проверка UI Kit

UI Kit — живая страница компонентов: `apps/web/src/pages/ui-kit/[...slug].astro`. Это источник правды.

Сравни новые/изменённые компоненты из `apps/web/src/components/` с импортами и использованием в UI Kit.

- Если все компоненты есть в UI Kit: `🧩 UI Kit ........................ ✅ Актуален`
- Если новый компонент не добавлен в UI Kit: `🧩 UI Kit ........................ ❌ NewComponent.astro не в UI Kit`
  - Добавь компонент в UI Kit: импорт + секция с демо-примерами (если это новая секция — добавь в `getStaticPaths`, `sections` массив, и рендер-блок)
  - Если компонент дополняет существующую секцию (например, новый блок → секция "blocks") — добавь туда

Выведи список новых компонентов если есть: `🔗 Новые компоненты ............. HeroSection.astro (ui/) → добавлен в UI Kit`

### Шаг 3: Проверка конвенций

Проверь новые/изменённые .astro файлы:
- Именование PascalCase
- TypeScript interface для Props
- Файл в правильной папке (layout/, ui/, blocks/)
- Нет импортов React, Vue, Svelte
- Стили через Tailwind-классы (нет отдельных .css)

- Если всё ок: `📐 Конвенции .................... ✅ Соблюдены`
- Если есть нарушения: `📐 Конвенции .................... ⚠️ [описание проблемы]`

### Шаг 4: Сборка проекта

Запусти `pnpm --filter web build` и проверь результат.

- Если успех: `🏗️ Сборка сайта ................. ✅ [N] страниц`
- Если ошибка: `🏗️ Сборка сайта ................. ❌ Ошибка: [краткое описание]`

### Шаг 5: Затронутые страницы

На основе `git diff --name-only` определи какие страницы затронуты изменениями. Выведи список URL для визуальной проверки.

```
📋 Проверьте визуально:
   → localhost:4321/contacts
   → localhost:4321/blog
```

### Вывод — итог

Если все проверки прошли:
```
═══════════════════════════════════════
✅ ВСЕ ПРОВЕРКИ ПРОЙДЕНЫ
═══════════════════════════════════════
```

Если есть ошибки:
```
═══════════════════════════════════════
❌ ПРОВЕРКА НЕ ПРОЙДЕНА — исправь проблемы выше
═══════════════════════════════════════
```

При ошибках — предложи исправления и после исправления запусти проверку заново.