К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor

visual-edit-precision — скилл для Claude Code: точные правки UI

Скилл для целевых изменений UI, когда вы показываете элементы на скриншоте или указываете их прямо в коде. Меняет только то, что вы выделили, без рефакторинга всего компонента.

Установить в Claude Code · Через маркетплейс плагинов Все способы и платформы ↓ 
/plugin marketplace add wshobson/agents
/plugin install skill-forge-essentials@claude-code-workflows
Открыть на GitHub

Что делает visual-edit-precision

visual-edit-precision помогает при правках фронтенда, которые видны на макете. Вы показываете скриншот с выделенной кнопкой, иконкой или полем — агент находит точный элемент в коде и меняет только его стили или разметку. Остальное остаётся без изменений.

Скилл следует принципу минимальности: если вы указали на одну карточку, он не переписывает весь компонент и не трогает глобальные стили. Проверяет, что изменения отрендерились без побочных эффектов, и сохраняет доступность — aria-атрибуты, role, tabindex остаются на месте.

Пригодится, если вы работаете с пространственной логикой — ссылаетесь на элементы по их положению, размеру, соседству, а не только по имени класса. Помогает избежать конфликтов, когда две правки касаются разных элементов одного компонента.

Какие задачи решает

  • менять стиль конкретной кнопки, не затрагивая остальные
  • отредактировать карточку по скриншоту без рефакторинга компонента
  • применить несколько визуальных правок одновременно к разным элементам
  • сохранить доступность и обработчики событий при правке разметки

Примеры запросов агенту

  • Измени цвет этой иконки (вот скриншот) на зелёный
  • По скриншоту вижу, что поле ввода слишком узкое. Раздвинь его в два раза
  • Добавь отступ слева к абзацу в этом модальном окне (прилагаю скрин)

Как установить visual-edit-precision

1Через маркетплейс плагинов

/plugin marketplace add wshobson/agents
/plugin install skill-forge-essentials@claude-code-workflows

Команда ставит плагин skill-forge-essentials целиком, со всеми его скиллами

2Через Skills CLI (Vercel)

npx skills add wshobson/agents --skill visual-edit-precision -a claude-code

3Вручную: положить файлы

~/.claude/skills/visual-edit-precision/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/visual-edit-precision/

Из того же набора213

Весь набор →
typescript-advanced-types Seth Hobson Помогает агенту писать сложную типизацию TypeScript: generics, conditional types и преобразования типов. Нужен для библиотек, API-клиентов и строгих конфигураций. Claude Code CX Codex Cursor 92 169установок tailwind-design-system Seth Hobson Помогает строить дизайн-системы на Tailwind CSS v4. Пригодится для библиотеки компонентов или унификации интерфейса в проекте. Claude Code CX Codex Cursor 70 180установок brand-landingpage Travis D. Elliott Скилл проводит интервью о продукте и визуальном стиле, затем помогает создать лендинг через Stitch. Подойдёт, если у проекта пока нет готового дизайна. Claude Code CX Codex Cursor 39 476установок python-testing-patterns Seth Hobson Скилл помогает писать тесты Python с pytest, фикстурами и моками. Подходит для настройки тестового набора и отладки падающих проверок. Claude Code CX Codex Cursor 36 943установок python-performance-optimization Seth Hobson Скилл помогает профилировать Python-код, находить узкие места CPU и памяти. Подходит, когда приложение медленно отвечает или тратит слишком много ресурсов. Claude Code CX Codex Cursor 35 675установок nextjs-app-router-patterns Seth Hobson Помогает строить приложения на Next.js App Router: выбирать режим рендеринга, организовывать маршруты и получать данные. Подойдёт при миграции с Pages Router или работе с Server Components. Claude Code CX Codex Cursor 32 529установок api-design-principles Seth Hobson Скилл помогает проектировать и проверять REST- и GraphQL API. Пригодится при подготовке спецификации, пересмотре существующего API или согласовании стандартов команды. Claude Code CX Codex Cursor 30 348установок code-review-excellence Seth Hobson Скилл помогает разбирать pull request по этапам, находить ошибки и давать конкретную обратную связь. Подойдёт для ревью кода и настройки командных стандартов. Claude Code CX Codex Cursor 30 193установок

Похожие

swiftui-liquid-glass официальный OpenAI Скилл помогает создавать и проверять интерфейсы SwiftUI с Liquid Glass для iOS 26+. Он нужен при внедрении эффекта, ревью и проверке fallback-сценариев. CX Codex GP ChatGPT 121установок react19-test-patterns официальный github Подсказывает, как обновить тесты для совместимости с React 19. Пригодится при миграции с React 18, особенно если тесты используют react-dom/test-utils или проверяют число вызовов эффектов. GitHub Copilot 1 200установок react19-concurrent-patterns официальный github Защищает concurrent-паттерны React 18 от поломок при миграции на React 19. Подсказывает, когда внедрять новые хуки use, useOptimistic и Actions. GitHub Copilot 1 100установок react19-source-patterns официальный github Справочник для миграции React-исходников на React 19: API, ref, контекст и пропсы. Пригодится при обновлении существующего проекта. GitHub Copilot 967установок anti-ui-slop официальный UIZZE Скилл помогает агенту собирать интерфейсы под конкретный продукт, а не шаблонный UI. Пригодится для разработки, редизайна и проверки web- или iOS-экранов. GitHub Copilot 967установок sign-in-with-google-web официальный google Помогает настроить вход через Google Identity Services на вебе. Защищает токены и закрывает уязвимости авторизации по стандартам IETF. Claude Code Gemini CLI CX Codex 743установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о visual-edit-precision

Как установить visual-edit-precision в Claude Code?

Введите /plugin marketplace add wshobson/agents, затем /plugin install skill-forge-essentials@claude-code-workflows. Можно также запустить npx skills add wshobson/agents --skill visual-edit-precision -a claude-code или скопировать ~/.claude/skills/visual-edit-precision/SKILL.md вручную.

Что делает visual-edit-precision?

Позволяет давать указания агенту через скриншоты и визуальное выделение элементов. Агент находит нужный элемент в коде, делает минимальную правку и не трогает остальное. Полезно, когда описание текстом сложнее, чем показать пальцем.

Сработает ли скилл, если я покажу скриншот из фигмы?

Сработает, если скриншот помогает указать конкретный элемент в вашем коде. Если это макет, которого в проекте нет, агент сможет предложить разметку, но не будет редактировать существующие файлы.

Исходный текст

SKILL.md · MIT 
---
name: visual-edit-precision
description: >-
  Use when making UI/frontend changes guided by visual context, when the user
  selects elements visually, draws annotations, or provides screenshots alongside
  change requests. Also use when editing components where spatial context
  (element identity, DOM references, layout data) supplements text instructions.
---

# Visual Edit Precision

## Overview

When visual context accompanies a change request (element selections, annotations, screenshots), make targeted, minimal edits. Precision over ambition: change exactly what was indicated, preserve everything else.

## Process

When visual context is provided:

1. **IDENTIFY** - What exact element(s) were indicated? Which component file owns them?
2. **SCOPE** - Change ONLY what was pointed at. Don't refactor surrounding code.
3. **PRESERVE** - Keep existing styles, classes, and behavior. Only modify what was asked.
4. **TARGETED** - Make the minimal CSS/markup change that achieves the visual result.
5. **VERIFY** - Confirm the change renders correctly without side effects.

## Key Principles

### Precision Over Ambition

Visual context gives a SPECIFIC element. Don't:
- Refactor the entire component when only one style was requested
- Change the component's API when only its appearance was pointed at
- Touch logic when only visuals were selected

Do:
- Find the exact file and line for the selected element
- Make the minimal edit that achieves the described visual change
- Preserve all existing behavior, event handlers, accessibility

### Multiple Edits

When multiple visual edits arrive:
- Each targets its own element independently
- Don't wait for one to finish before processing another
- If two edits conflict (same element, different requests), handle the most recent

## Common Mistakes

- Rewriting an entire component when the user pointed at one button
- Changing global config when only one element's color needs adjusting
- Breaking responsive behavior by adding fixed widths to match a selection
- Ignoring specificity (user indicated ONE card, agent changed ALL cards)
- Removing accessibility attributes (aria-*, role, tabindex) during visual edits

© Adit Jain · MIT · wshobson/agents

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором