Layrr CLI
Layrr открывает ваше веб-приложение с оверлеем: кликаете элемент, описываете правку, а агент получает точное место в исходниках
- 267 ★ репозитория
- Последний коммит
- MIT
Широкий доступ
Почему такой уровень
- Передает агенту задачу правки исходников, и тот меняет файлы проекта
- Создает git-репозиторий при его отсутствии и коммитит правки в вашу историю
- Проксирует трафик вашего dev-сервера через локальный порт 4567
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/layrrОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Передает агенту задачу правки исходников, и тот меняет файлы проекта
- Создает git-репозиторий при его отсутствии и коммитит правки в вашу историю
- Проксирует трафик вашего dev-сервера через локальный порт 4567
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Layrr ставится из npm и запускается командой `layrr --port 3000`, где порт принадлежит уже работающему dev-серверу. Он поднимает прокси на порту `4567` и открывает в браузере вашу страницу с маленьким оверлеем. В оверлее можно выбрать один или несколько элементов и описать правку обычными словами: «сделай кнопку уже», «исправь текст». Сам Layrr сопоставляет выбранный элемент с файлом и строкой исходника и передает агенту инструкцию вместе с этим местом. Агент выбирается флагом `--agent`: Claude Code, Codex CLI или Gemini через кодинг-агент Pi, который идет зависимостью самого пакета. Если агент не задан, Layrr спросит при запуске. Отменять правки помогает git. Layrr создает репозиторий, если его нет, делает исходный снимок, коммитит каждую удачную правку с префиксом `[layrr]` и не включает в эти коммиты файлы, которые были изменены до него. Историю правок можно просматривать в оверлее и откатывать оттуда же.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые видят проблему в браузере и хотят править интерфейс через Claude Code или Codex без поиска нужного файла.
Подходит, если
- Нужно быстро поправить отступ, текст или ширину кнопки, глядя на работающую страницу
- Приложение уже крутится на локальном dev-сервере, и вы не хотите объяснять агенту, в каком компоненте искать элемент
- Хочется видеть каждую правку агента отдельным git-коммитом и откатывать ее из интерфейса
- Нужно передать агенту сразу несколько выбранных элементов с одной инструкцией
Не подходит, если
- Приложение не запущено локально: Layrr работает через прокси к dev-серверу
- Нужны масштабные изменения логики на много файлов: инструмент рассчитан на точечные правки выбранных элементов
- В репозитории много незакоммиченной работы, которую вы не хотите видеть рядом с коммитами агента
- Вы используете агента, которого нет в списке: поддерживаются Claude Code, Codex CLI и Gemini через Pi
Пример запроса к агенту
Запусти Layrr для моего приложения на порту 3000 с Claude Code, чтобы я мог кликать элементы и просить правкиОграничения
Нужен запущенный dev-сервер, порт которого задан флагом `--port`: Layrr работает через прокси к нему и не запускает приложение сам. Для Gemini инструмент просит модель и ключ API, их можно сменить командой `layrr --configure-gemini`. Агенты Claude Code и Codex CLI должны быть установлены и авторизованы отдельно. Правки рассчитаны на выбранные элементы, поэтому крупные изменения логики лучше вести в обычной сессии агента.
Как отключить. Остановите процесс layrr и удалите пакет командой `npm uninstall -g layrr`. Коммиты с префиксом `[layrr]` остаются в истории git, их можно откатить обычными средствами.
Частые вопросы
Как запустить Layrr для приложения на Next.js или Vite?
Запустите dev-сервер, например `pnpm dev`, и выполните `layrr --port 3000` с портом этого сервера. Layrr откроет проксированную версию приложения на `localhost:4567`.
Какие агенты поддерживает Layrr?
Claude Code, Codex CLI и Gemini через кодинг-агент Pi. Выбрать нужного можно флагом `--agent` со значением `claude`, `codex` или `gemini`.
Как откатить правку агента?
Layrr коммитит каждую удачную правку с префиксом `[layrr]`. Предпросмотр и откат доступны в истории оверлея.
Что Layrr делает с моим git-репозиторием?
Если репозитория нет, Layrr его создает и делает исходный снимок. Файлы, измененные до запуска, в коммиты Layrr не попадают.
Нужен ли ключ API для Layrr?
Для Claude Code и Codex CLI свой вход делает сам агент. Для Gemini Layrr запросит модель и ключ при настройке, их можно сменить позже командой `layrr --configure-gemini`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыСкилл для сборки премиальных скролл-сайтов с реальным дизайн-стандартом: типографика, ритм, глубина, движение и проверка в браузере
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
CLI, который дает агенту смотреть работающее приложение на React: дерево компонентов, props, state, hooks и профилирование рендеров
Консоль, сеть, скриншоты и аудиты Lighthouse из вашего открытого Chrome прямо в агент через расширение DevTools
Скилл-методика воспроизведения сайтов: от статичной страницы до тяжелого WebGL, с упором на настоящий исходный код, а не на выдуманный агентом
Рабочее место для Claude Code: десять команд ведут от идеи продукта к экранам на React и пакету передачи с готовыми промптами для реализации
Коротко о README
Страница описывает проблему: на поиск файла и строки уходит больше времени, чем на саму правку. Дальше идут установка, запуск, таблица параметров командной строки, список агентов и правила работы с git.