Встроенные Skills: Автоматизация браузера, UI/UX дизайн и Git-эксперт

Что вы сможете делать после этого урока

После прохождения этого урока вы научитесь:

Использовать playwright или agent-browser для автоматизации тестирования браузера и сбора данных
Заставить агента принять роль дизайнера для создания красивых UI/UX-интерфейсов
Автоматизировать операции Git, включая атомарные коммиты, поиск по истории и rebase
Использовать dev-browser для персистентной разработки автоматизации браузера

Ваша текущая проблема

Сталкивались ли вы с такими ситуациями:

Хотите протестировать фронтенд-страницу, но ручные клики слишком медленные, а писать скрипты Playwright не умеете
После написания кода сообщения коммитов беспорядочные, история хаотична
Нужно разработать UI-интерфейс, но не знаете с чего начать, получающийся интерфейс лишён эстетики
Нужно автоматизировать операции браузера, но каждый раз приходится заново входить в систему

Встроенные Skills — это швейцарские армейские ножи, созданные специально для вас — каждый Skill является экспертом в определённой области и помогает быстро решить эти проблемы.

Когда использовать этот приём

Сценарий	Рекомендуемый Skill	Почему
Фронтенд UI-интерфейс требует красивого дизайна	`frontend-ui-ux`	Дизайнерская перспектива, внимание к типографике, цветам, анимации
Тестирование браузера, скриншоты, сбор данных	`playwright` или `agent-browser`	Полная функциональность автоматизации браузера
Git-коммиты, поиск по истории, управление ветками	`git-master`	Автоматическое определение стиля коммитов, генерация атомарных коммитов
Нужны множественные операции браузера (сохранение состояния входа)	`dev-browser`	Персистентное состояние страницы, поддержка повторного использования

Основная идея

Что такое Skill?

Skill — это механизм для инъекции профессиональных знаний и специализированных инструментов в агента. Когда вы используете delegate_task с параметром load_skills, система:

Загружает template Skill как часть системного промпта
Инжектирует MCP-серверы, настроенные в Skill (если есть)
Ограничивает доступные инструменты (если есть allowedTools)

Встроенные vs Пользовательские Skills

Встроенные Skills: Готовы к использованию из коробки, предварительно настроенные промпты и инструменты
Пользовательские Skills: Вы можете создавать свои собственные SKILL.md в директориях .opencode/skills/ или ~/.claude/skills/

В этом уроке основное внимание уделяется 4 встроенным Skills, которые охватывают наиболее распространённые сценарии разработки.

🎒 Подготовка перед началом

Перед использованием встроенных Skills убедитесь, что:

[ ] Вы завершили изучение курса Categories и Skills
[ ] Вы знаете базовое использование инструмента delegate_task
[ ] Для Skill автоматизации браузера необходимо предварительно запустить соответствующий сервер (Playwright MCP или agent-browser)

Skill 1: playwright (Автоматизация браузера)

Обзор функциональности

Skill playwright использует Playwright MCP-сервер, предоставляя полную функциональность автоматизации браузера:

Навигация по страницам и взаимодействие
Позиционирование элементов и операции (клики, заполнение форм)
Скриншоты и экспорт в PDF
Перехват и имитация сетевых запросов

Применимые сценарии: UI-верификация, E2E-тестирование, скриншоты веб-страниц, сбор данных

Практика: Проверка функциональности сайта

Сценарий: Вам нужно проверить, работает ли функция входа в систему нормально.

Шаг 1: Активация Skill playwright

В OpenCode введите:

Используй playwright для навигации на https://example.com/login и сделай скриншот для показа состояния страницы

Вы должны увидеть: Агент автоматически вызовет инструменты Playwright MCP, откроет браузер и сделает скриншот.

Шаг 2: Заполнение формы и отправка

Продолжите ввод:

Используй playwright для заполнения полей имени пользователя и пароля ([email protected] / password123), затем нажми кнопку входа и сделай скриншот результата

Вы должны увидеть: Агент автоматически определит элементы формы, заполнит данные, нажмёт кнопку и вернёт скриншот результата.

Шаг 3: Проверка перенаправления

Дождись загрузки страницы, затем проверь, перенаправился ли URL на /dashboard

Вы должны увидеть: Агент сообщит текущий URL, подтверждая успешное перенаправление.

Контрольная точка ✅

[ ] Браузер может успешно перейти на целевую страницу
[ ] Операции заполнения формы и клика выполняются нормально
[ ] Скриншоты могут чётко показать состояние страницы

Описание конфигурации

По умолчанию движок автоматизации браузера использует playwright. Если вы хотите переключиться на agent-browser, настройте в oh-my-opencode.json:

json

{
  "browser_automation_engine": {
    "provider": "agent-browser"
  }
}

Skill 2: frontend-ui-ux (Дизайнерская перспектива)

Обзор функциональности

Skill frontend-ui-ux превращает агента в роль "разработчика-дизайнера":

Внимание к типографике, цветам, анимации и другим визуальным деталям
Акцент на смелом эстетическом направлении (минимализм, максимализм, ретрофутуризм и др.)
Предоставление принципов дизайна: избегать стандартных шрифтов (Inter, Roboto, Arial), создавать уникальные цветовые схемы

Применимые сценарии: Дизайн UI-компонентов, улучшение интерфейсов, создание визуальных систем

Практика: Дизайн красивого дашборда

Сценарий: Вам нужно разработать дашборд статистики данных, но нет дизайн-макета.

Шаг 1: Активация Skill frontend-ui-ux

Используй навык frontend-ui-ux для разработки страницы дашборда статистики данных
Требования: включить 3 карточки данных (пользователи, доход, количество заказов), использовать современный дизайн

Вы должны увидеть: Агент сначала выполнит "планирование дизайна", определив цель, тон, ограничения и точки дифференциации.

Шаг 2: Определение эстетического направления

Агент спросит вас (или определит внутренне) стиль дизайна. Например:

**Выбор эстетического направления**:
- Минимализм (Minimalist)
- Максимализм (Maximalist)
- Ретрофутуризм (Retro-futuristic)
- Изысканная роскошь (Luxury/Refined)

Ответ: Минимализм

Вы должны увидеть: Агент сгенерирует спецификацию дизайна (шрифты, цвета, отступы) на основе выбранного направления.

Шаг 3: Генерация кода

На основе приведённой выше спецификации дизайна реализуй эту страницу дашборда с использованием React + Tailwind CSS

Вы должны увидеть:

Продуманную типографику и отступы
Выразительную, но гармоничную цветовую схему (не типичный фиолетовый градиент)
Тонкие анимации и переходы

Контрольная точка ✅

[ ] Страница использует уникальный стиль дизайна, не типичный "AI-slop"
[ ] Выбор шрифтов отличается особенностью, избегаются Inter/Roboto/Arial
[ ] Цветовая схема cohesive, с чёткой визуальной иерархией

Отличие от обычного агента

Обычный агент может написать код с правильной функциональностью, но интерфейс будет лишён эстетики. Ключевая ценность Skill frontend-ui-ux заключается в:

Акценте на процессе дизайна (планирование > кодирование)
Предоставлении чётких эстетических рекомендаций
Предупреждении антипаттернов (универсальный дизайн, фиолетовые градиенты)

Skill 3: git-master (Git-эксперт)

Обзор функциональности

Skill git-master — это Git-эксперт, интегрирующий три профессиональные возможности:

Архитектор коммитов: Атомарные коммиты, порядок зависимостей, определение стиля
Rebase-хирург: Перезапись истории, разрешение конфликтов, очистка веток
Исторический археолог: Поиск когда/где была внесена конкретная изменение

Основной принцип: По умолчанию создавать несколько коммитов, отклоняя ленивое поведение "один коммит содержит несколько файлов".

Применимые сценарии: Коммит кода, поиск по истории, управление ветками, операции rebase

Практика: Умное коммитирование кода

Сценарий: Вы изменили 5 файлов и нужно закоммитить код.

Шаг 1: Активация Skill git-master (рекомендуется использовать quick category)

Используй delegate_task(category='quick', load_skills=['git-master']) для коммита текущих изменений кода

Почему использовать quick category?

Операции Git не требуют сложных рассуждений
Модели claude-haiku-4-5 достаточно для быстрой обработки
Экономия затрат (Haiku в 10 раз дешевле Opus)

Вы должны увидеть: Агент выполняет параллельный анализ (Phase 0), включая:

git status и git diff --stat
Журнал последних 30 коммитов (для определения стиля)
Состояние текущей ветки

Шаг 2: Определение стиля (Phase 1)

Агент выведет:

РЕЗУЛЬТАТ ОПРЕДЕЛЕНИЯ СТИЛЯ
==========================
Проанализировано: 30 коммитов из git log

Язык: ENGLISH
  - Коммиты на английском: 28 (93%)
  
Стиль: SEMANTIC
  - Семантические (feat:, fix:, и т.д.): 25 (83%)
  - Простые: 3 (10%)
  
Примеры из репозитория:
  1. "feat: add user authentication"
  2. "fix: resolve database connection issue"
  3. "refactor: extract validation logic"

Все коммиты будут следовать: ENGLISH + SEMANTIC

Вы должны увидеть: Агент чётко сообщит, какой стиль коммитов и язык будут использоваться.

Шаг 3: Планирование атомарных коммитов (Phase 3)

Агент проанализирует изменения файлов и выведет:

ПЛАН КОММИТОВ
=============
Изменённых файлов: 5
Минимально требуемых коммитов: ceil(5/3) = 2
Запланировано коммитов: 3
Статус: 3 >= 2 (PASS)

КОММИТ 1: feat: add authentication service
  - src/services/auth.ts
  - src/types/auth.ts
  Обоснование: реализация сервиса + его определения типов

КОММИТ 2: feat: implement login page
  - src/pages/login.tsx
  - src/components/login-form.tsx
  Обоснование: страница и её компоненты

КОММИТ 3: feat: add API endpoint
  - src/api/auth.ts
  - tests/auth.test.ts
  Обоснование: API endpoint + его тест

Порядок выполнения: Commit 1 -> Commit 2 -> Commit 3

Вы должны увидеть: Агент чётко разделяет коммиты и объясняет, почему эти файлы должны быть вместе.

Шаг 4: Выполнение коммитов (Phase 5)

Агент автоматически выполнит:

bash

git add src/services/auth.ts src/types/auth.ts
git commit -m "feat: add authentication service"

git add src/pages/login.tsx src/components/login-form.tsx
git commit -m "feat: implement login page"

git add src/api/auth.ts tests/auth.test.ts
git commit -m "feat: add API endpoint"

Вы должны увидеть:

3 независимых коммита, каждый с чётким семантическим сообщением
Чистый рабочий каталог (в git status нет незакоммиченных файлов)

Контрольная точка ✅

[ ] Агент провёл определение стиля и чётко сообщил о нём
[ ] Количество коммитов удовлетворяет правилу "минимального количества коммитов" (количество файлов / 3, округление вверх)
[ ] Каждое сообщение коммита соответствует определённому стилю (семантическое, обычное описание и т.д.)
[ ] Тестовые файлы находятся в одном коммите с файлами реализации

Функция поиска по истории

git-master также поддерживает мощный поиск по истории:

"when was X added" → git log -S (поиск pickaxe)
"who wrote this line" → git blame
"when did bug start" → git bisect
"find commits changing X pattern" → git log -G (regex-поиск)

Пример: Используй git-master для поиска, в каком коммите была добавлена функция 'calculate_discount'

Антипаттерн: один большой коммит

Принудительное правило git-master:

Количество файлов	Минимальное количество коммитов
3+ файлов	2+ коммитов
5+ файлов	3+ коммитов
10+ файлов	5+ коммитов

Если агент попытается сделать 1 коммитом несколько файлов, он автоматически потерпит неудачу и перепланирует.

Skill 4: dev-browser (Браузер для разработчиков)

Обзор функциональности

Skill dev-browser предоставляет персистентные возможности автоматизации браузера:

Персистентность состояния страницы: Сохранение состояния входа между несколькими выполнениями скриптов
ARIA Snapshot: Автоматическое обнаружение элементов страницы, возврат древовидной структуры со ссылками (@e1, @e2)
Поддержка двух режимов:
- Standalone режим: Запуск нового браузера Chromium
- Extension режим: Подключение к существующему браузеру Chrome пользователя

Применимые сценарии: Нужны множественные операции браузера (сохранение состояния входа), сложная автоматизация рабочих процессов

Практика: Написание скрипта операций после входа в систему

Сценарий: Вам нужно автоматизировать серию операций после входа в систему и сохранить состояние сессии.

Шаг 1: Запуск dev-browser сервера

macOS/Linux:

bash

cd skills/dev-browser && ./server.sh &

Windows (PowerShell):

powershell

cd skills/dev-browser
Start-Process -NoNewWindow -FilePath "node" -ArgumentList "server.js"

Вы должны увидеть: В консоли появится сообщение Ready.

Шаг 2: Написание скрипта входа в систему

В OpenCode введите:

bash

cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();
const page = await client.page("login", { viewport: { width: 1920, height: 1080 } });

await page.goto("https://example.com/login");
await waitForPageLoad(page);

console.log({
  title: await page.title(),
  url: page.url()
});

await client.disconnect();
EOF

Вы должны увидеть: Браузер открывает страницу входа и выводит заголовок страницы и URL.

Шаг 3: Добавление операций заполнения формы

Измените скрипт:

bash

cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();
const page = await client.page("login", { viewport: { width: 1920, height: 1080 } });

await page.goto("https://example.com/login");
await waitForPageLoad(page);

// Получение ARIA snapshot
const snapshot = await client.getAISnapshot("login");
console.log(snapshot);

// Выбор и заполнение формы (в соответствии с ref в snapshot)
await client.fill("input[name='username']", "[email protected]");
await client.fill("input[name='password']", "password123");
await client.click("button[type='submit']");

await waitForPageLoad(page);

console.log({
  title: await page.title(),
  url: page.url(),
  loggedIn: page.url().includes("/dashboard")
});

await client.disconnect();
EOF

Вы должны увидеть:

Вывод ARIA Snapshot (отображение элементов страницы и ссылок)
Автоматическое заполнение и отправка формы
Переход страницы на dashboard (подтверждение успешного входа)

Шаг 4: Повторное использование состояния входа в систему

Теперь напишите второй скрипт для операций на страницах, требующих входа:

bash

cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();

// Повторное использование ранее созданной страницы "login" (сессия сохранена)
const page = await client.page("login");

// Прямой доступ к странице, требующей входа
await page.goto("https://example.com/settings");
await waitForPageLoad(page);

console.log({
  title: await page.title(),
  url: page.url()
});

await client.disconnect();
EOF

Вы должны увидеть: Страница напрямую переходит на страницу настроек, без необходимости повторного входа (потому что состояние сессии сохранено).

Контрольная точка ✅

[ ] Сервер dev-browser успешно запущен и отображает Ready
[ ] ARIA Snapshot может правильно обнаруживать элементы страницы
[ ] Состояние сессии после входа может повторно использоваться между скриптами
[ ] Между несколькими выполнениями скриптов не требуется повторный вход

Различия между playwright и dev-browser

Характеристика	playwright	dev-browser
Персистентность сессии	❌ Каждый раз новая сессия	✅ Сохраняется между скриптами
ARIA Snapshot	❌ Использует Playwright API	✅ Автоматическая генерация ссылок
Extension режим	❌ Не поддерживается	✅ Подключение к браузеру пользователя
Применимые сценарии	Одноразовые операции, тесты	Множественные операции, сложные рабочие процессы

Лучшие практики

1. Выбор подходящего Skill

Выбирайте Skill в соответствии с типом задачи:

Тип задачи	Рекомендуемая комбинация
Быстрый Git-коммит	`delegate_task(category='quick', load_skills=['git-master'])`
Дизайн UI-интерфейса	`delegate_task(category='visual-engineering', load_skills=['frontend-ui-ux'])`
Проверка браузера	`delegate_task(category='quick', load_skills=['playwright'])`
Сложный рабочий процесс браузера	`delegate_task(category='quick', load_skills=['dev-browser'])`

2. Комбинирование нескольких Skills

Вы можете одновременно загружать несколько Skills:

typescript

delegate_task(
  category="quick",
  load_skills=["git-master", "playwright"],
  prompt="Протестируй функцию входа, затем закоммить код"
)

3. Избегание распространённых ошибок

Предупреждение

❌ Ошибка: При использовании git-master вручную указывать сообщение коммита
- ✅ Правильно: Позвольте git-master автоматически определять и генерировать сообщения коммитов, соответствующие стилю проекта
❌ Ошибка: При использовании frontend-ui-ux требовать "просто обычный дизайн"
- ✅ Правильно: Позвольте агенту в полной мере проявить дизайнерские способности, создавая уникальный дизайн
❌ Ошибка: Использовать аннотации типов TypeScript в скриптах dev-browser
- ✅ Правильно: Использовать чистый JavaScript в page.evaluate() (браузер не распознаёт синтаксис TS)

Резюме урока

В этом уроке представлены 4 встроенных Skills:

Skill	Основная ценность	Типичные сценарии
playwright	Полная автоматизация браузера	UI-тестирование, скриншоты, краулинг
frontend-ui-ux	Дизайнерская перспектива, приоритет эстетики	Дизайн UI-компонентов, улучшение интерфейсов
git-master	Автоматизация Git-операций, атомарные коммиты	Коммит кода, поиск по истории
dev-browser	Персистентная сессия, сложные рабочие процессы	Множественные операции браузера

Ключевые моменты:

Skill = профессиональные знания + инструменты: Инъекция лучших практик из конкретных областей в агента
Комбинированное использование: delegate_task(category=..., load_skills=[...]) для точного соответствия
Оптимизация затрат: Использование quick category для простых задач, избегание использования дорогих моделей
Предупреждение антипаттернов: Каждый Skill имеет чёткое руководство "чего не делать"

Предварительный просмотр следующего урока

В следующем уроке мы изучим хуки жизненного цикла.
Вы узнаете:
Роль и порядок выполнения 32 хуков жизненного цикла
Как автоматизировать внедрение контекста и восстановление после ошибок
Методы конфигурации часто используемых хуков (todo-continuation-enforcer, keyword-detector и др.)

Приложение: Справка по исходному коду

Нажмите, чтобы развернуть и посмотреть расположение исходного кода

Время обновления: 2026-01-26

Функция	Путь к файлу	Номера строк
Определение Skill playwright	`src/features/builtin-skills/skills.ts`	4-16
---	---	---
---	---	---
---	---	---
---	---	---
Функция createBuiltinSkills	`src/features/builtin-skills/skills.ts`	1723-1729
Определение типа BuiltinSkill	`src/features/builtin-skills/types.ts`	3-16
Логика загрузки встроенных Skills	`src/index.ts`	51, 311-319
Конфигурация браузерного движка	`src/config/schema.ts`	-

Ключевая конфигурация:

browser_automation_engine.provider: Браузерный движок автоматизации (по умолчанию playwright, опционально agent-browser)
disabled_skills: Список отключённых Skills

Ключевые функции:

createBuiltinSkills(options): Возвращает массив Skills в соответствии с конфигурацией браузерного движка

Встроенные Skills: Автоматизация браузера, UI/UX дизайн и Git-эксперт ​

Что вы сможете делать после этого урока ​

Ваша текущая проблема ​

Когда использовать этот приём ​

Основная идея ​

🎒 Подготовка перед началом ​

Skill 1: playwright (Автоматизация браузера) ​

Обзор функциональности ​

Практика: Проверка функциональности сайта ​

Шаг 1: Активация Skill playwright ​

Шаг 2: Заполнение формы и отправка ​

Шаг 3: Проверка перенаправления ​

Контрольная точка ✅ ​

Skill 2: frontend-ui-ux (Дизайнерская перспектива) ​

Обзор функциональности ​

Практика: Дизайн красивого дашборда ​

Шаг 1: Активация Skill frontend-ui-ux ​

Шаг 2: Определение эстетического направления ​

Шаг 3: Генерация кода ​

Контрольная точка ✅ ​

Skill 3: git-master (Git-эксперт) ​

Обзор функциональности ​

Практика: Умное коммитирование кода ​

Шаг 1: Активация Skill git-master (рекомендуется использовать quick category) ​

Шаг 2: Определение стиля (Phase 1) ​

Шаг 3: Планирование атомарных коммитов (Phase 3) ​

Шаг 4: Выполнение коммитов (Phase 5) ​

Контрольная точка ✅ ​

Skill 4: dev-browser (Браузер для разработчиков) ​

Обзор функциональности ​

Практика: Написание скрипта операций после входа в систему ​

Шаг 1: Запуск dev-browser сервера ​

Шаг 2: Написание скрипта входа в систему ​

Шаг 3: Добавление операций заполнения формы ​

Шаг 4: Повторное использование состояния входа в систему ​

Контрольная точка ✅ ​

Лучшие практики ​

1. Выбор подходящего Skill ​

2. Комбинирование нескольких Skills ​

3. Избегание распространённых ошибок ​

Резюме урока ​

Предварительный просмотр следующего урока ​

Приложение: Справка по исходному коду ​

Встроенные Skills: Автоматизация браузера, UI/UX дизайн и Git-эксперт

Что вы сможете делать после этого урока

Ваша текущая проблема

Когда использовать этот приём

Основная идея

🎒 Подготовка перед началом

Skill 1: playwright (Автоматизация браузера)

Обзор функциональности

Практика: Проверка функциональности сайта

Шаг 1: Активация Skill playwright

Шаг 2: Заполнение формы и отправка

Шаг 3: Проверка перенаправления

Контрольная точка ✅

Skill 2: frontend-ui-ux (Дизайнерская перспектива)

Обзор функциональности

Практика: Дизайн красивого дашборда

Шаг 1: Активация Skill frontend-ui-ux

Шаг 2: Определение эстетического направления

Шаг 3: Генерация кода

Контрольная точка ✅

Skill 3: git-master (Git-эксперт)

Обзор функциональности

Практика: Умное коммитирование кода

Шаг 1: Активация Skill git-master (рекомендуется использовать quick category)

Шаг 2: Определение стиля (Phase 1)

Шаг 3: Планирование атомарных коммитов (Phase 3)

Шаг 4: Выполнение коммитов (Phase 5)

Контрольная точка ✅

Skill 4: dev-browser (Браузер для разработчиков)

Обзор функциональности

Практика: Написание скрипта операций после входа в систему

Шаг 1: Запуск dev-browser сервера

Шаг 2: Написание скрипта входа в систему

Шаг 3: Добавление операций заполнения формы

Шаг 4: Повторное использование состояния входа в систему

Контрольная точка ✅

Лучшие практики

1. Выбор подходящего Skill

2. Комбинирование нескольких Skills

3. Избегание распространённых ошибок

Резюме урока

Предварительный просмотр следующего урока

Приложение: Справка по исходному коду