Рефакторинг UI/хуков без изменения поведения (роль frontend). Use when нужно улучшить структуру существующих компонентов/хуков — разложить по слоям, убрать дублирование и prop drilling; UI-поведение доказуемо не меняется.
Installs into .claude/skills of the current project.
Are you the author of Frontend Refactor?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-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`.
