Frontend Refactor

---
name: frontend-refactor
description: Рефакторинг UI/хуков без изменения поведения (роль frontend). Use when нужно улучшить структуру существующих компонентов/хуков — разложить по слоям, убрать дублирование и prop drilling; UI-поведение доказуемо не меняется.
---

# Задача: рефакторинг фронтенда

Отрефактори указанный пользователем код, сохраняя поведение.

Рефакторинг меняет структуру, не поведение: интерфейс выглядит и работает так же, и это доказывается тестами до и после.

1. Зафиксируй базовую линию: прогони тесты компонентов и сохрани вывод; если тестов нет — сначала добавь поведенческий тест на текущий UI, до любых правок.
2. Приведи код к feature-based структуре (`$frontend-architecture`): логику — в хуки, серверные данные — в `api` (TanStack Query), клиентское состояние — в `stores` (Zustand), презентацию — в `components`.
3. Убери дублирование, лишние ререндеры и prop drilling; раздели Server/Client Components (`"use client"` только где интерактивность). Малыми шагами: одно улучшение → прогон тестов → следующее.
4. Доказательство: зелёный вывод тестов после правок (тот же набор, что в шаге 1) плюс diff до/после с пояснением, что улучшилось и какие компромиссы. «Выглядит так же» без прогона не принимается.

Если область не указана — спроси компонент/фичу или предложи кандидатов по свежему diff. Если проект не React/Next.js — скажи честно и ограничься общими принципами рефакторинга.

Опирайся на `$react`, `$typescript`, `$state-management`, `$data-fetching`.