# comparing-branches-visually

Разворачивает две ветки в отдельных worktree, поднимает оба дев-сервера на разных портах и делает скриншоты одних и тех же страниц для сравнения.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 383 установки · ★ 866
- Автор: spencerpauly
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/comparing-branches-visually/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/comparing-branches-visually

## Что делает

Скилл нужен, когда правки в UI надо показать до и после. Он создаёт git worktree для базовой ветки, запускает её дев-сервер на другом порту, а текущая ветка остаётся на своём. Дальше агент находит изменённые файлы через `git diff main --name-only`, отбирает из них компоненты и стили и сопоставляет файлы с маршрутами: `app/dashboard/page.tsx` превращается в `/dashboard`.

По каждой затронутой странице агент открывает адрес базовой ветки, снимает скриншот как «before», затем переходит на порт текущей ветки и снимает «after». В отчёте рядом оказываются обе картинки и список изменений — например, уменьшенная высота шапки или переехавшие ссылки навигации. В конце worktree удаляется командой `git worktree remove`.

Сравнивать стоит при одинаковом размере вьюпорта: скилл советует начать с 1280×800, а для мобильных правок добавить 375px. Если приложение закрыто авторизацией, войти придётся на обоих портах — иначе скриншоты выйдут со страницей логина. Порт 3001 для базовой ветки задаётся вручную, и если он занят, шаг с сервером сорвётся.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/comparing-branches-visually/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/comparing-branches-visually/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/comparing-branches-visually/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/comparing-branches-visually/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spencerpauly/awesome-cursor-skills comparing-branches-visually
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/comparing-branches-visually/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/spencerpauly/awesome-cursor-skills --path resources/comparing-branches-visually
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/comparing-branches-visually/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill comparing-branches-visually -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/comparing-branches-visually/SKILL.md

## Когда брать
- показать до и после правки в интерфейсе
- сравнить вёрстку двух веток без ручного переключения
- собрать скриншоты изменённых страниц для описания пул-реквеста
- проверить, не поехала ли вёрстка на мобильной ширине
- найти страницы, которых коснулись изменения в компонентах

## Примеры запросов агенту
- Сравни визуально ветку feature/redesign-header с main и покажи скриншоты до и после
- Подними обе ветки в worktree и сними скриншоты /dashboard и /settings
- Сделай визуальный дифф изменений и добавь его в описание PR

## Похожие
- [om-auto-create-pr-loop](https://affpapa.org/nevibecode/skills/om-auto-create-pr-loop.md) — скилл · 3700 установок
- [spawn](https://affpapa.org/nevibecode/skills/spawn.md) — скилл · 1431 установка
- [work-with-pr](https://affpapa.org/nevibecode/skills/work-with-pr.md) — скилл · 763 установки
- [clean-branches](https://affpapa.org/nevibecode/skills/clean-branches.md) — скилл · ★ 1552
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [paseo-handoff](https://affpapa.org/nevibecode/skills/paseo-handoff.md) — скилл · 4900 установок

Из того же набора: [spencerpauly/awesome-cursor-skills](https://affpapa.org/nevibecode/by/spencerpauly/awesome-cursor-skills.md) — 59 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md