Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor

visual-edit-precision — Claude Code skill: UI edits from screenshots

Skill for targeted UI changes when you show elements on a screenshot or point them out in code. Edits only what you selected, without refactoring the entire component.

Install into Claude Code · Plugin marketplace All methods and platforms ↓ 
/plugin marketplace add wshobson/agents
/plugin install skill-forge-essentials@claude-code-workflows
Open on GitHub

What visual-edit-precision does

visual-edit-precision helps with frontend changes guided by how they look. Show a screenshot with a highlighted button, icon, or field — the agent finds the exact element in code and changes only its styles or markup. Everything else stays put.

The skill follows a minimalist principle: if you point at one card, it won't rewrite the whole component or touch global styles. It checks that changes render without side effects and preserves accessibility — aria attributes, role, tabindex remain untouched.

Use it when spatial context matters — you reference elements by position, size, or neighbors rather than class name alone. Helps avoid conflicts when multiple edits touch different elements in one component.

What it helps with

  • change one button's style without affecting others
  • edit a card from a screenshot without refactoring the component
  • apply several visual edits to different elements at once
  • preserve accessibility and event handlers during markup changes

Example prompts for the agent

  • Change this icon color to green (here's a screenshot)
  • The input field looks too narrow in the screenshot. Make it twice as wide
  • Add left padding to the paragraph inside this modal (see the screenshot)

How to install visual-edit-precision

1Plugin marketplace

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

This installs the whole skill-forge-essentials plugin with all its skills

2Skills CLI (Vercel)

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

3Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/visual-edit-precision/

From the same set213

The whole set →
typescript-advanced-types Seth Hobson Guides an agent through advanced TypeScript types, from generics to conditional and mapped types. Use it for typed libraries, API clients, or strict configuration objects. Claude Code CX Codex Cursor 92,169installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs brand-landingpage Travis D. Elliott This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet. Claude Code CX Codex Cursor 39,476installs python-testing-patterns Seth Hobson This skill guides Python testing with pytest, fixtures and mocks. Use it when building a test suite or tracking down failing checks. Claude Code CX Codex Cursor 36,943installs python-performance-optimization Seth Hobson This skill profiles Python code to locate CPU and memory bottlenecks. Use it when an application responds slowly or consumes too many resources. Claude Code CX Codex Cursor 35,675installs nextjs-app-router-patterns Seth Hobson This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router. Claude Code CX Codex Cursor 32,529installs api-design-principles Seth Hobson Use this skill to plan or review REST and GraphQL APIs. It helps when writing a specification or setting API conventions for a team. Claude Code CX Codex Cursor 30,348installs code-review-excellence Seth Hobson This skill guides pull request reviews, catches logic and security issues, and helps teams give specific feedback. Use it for review standards or developer mentoring. Claude Code CX Codex Cursor 30,193installs

Similar

swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs react19-test-patterns official github A migration reference for updating test files to work with React 19. Use it when replacing removed test utilities or revising StrictMode call-count assertions. GitHub Copilot 1,200installs react19-concurrent-patterns official github Preserves React 18 concurrent patterns during React 19 migrations and guides the adoption of use(), useOptimistic, and Actions. GitHub Copilot 1,100installs react19-source-patterns official github A reference for moving React source files to React 19, covering API changes, refs, context, and props. Useful during an existing project upgrade. GitHub Copilot 967installs anti-ui-slop official UIZZE This skill guides agents toward product-specific interfaces instead of generic UI. Use it for web or iOS design, implementation, redesign, and pre-ship review. GitHub Copilot 967installs sign-in-with-google-web official google Guides Google Identity Services setup across web projects. It implements secure token handling and IETF authentication patterns. Claude Code Gemini CLI CX Codex 743installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about visual-edit-precision

How do I install visual-edit-precision in Claude Code?

Run /plugin marketplace add wshobson/agents, then /plugin install skill-forge-essentials@claude-code-workflows. Alternatively, run npx skills add wshobson/agents --skill visual-edit-precision -a claude-code or copy ~/.claude/skills/visual-edit-precision/SKILL.md manually.

What does visual-edit-precision do?

It lets you direct the agent via screenshots and visual element selection. The agent finds the element in code, makes a minimal change, and leaves everything else alone. Useful when describing what you want in text is harder than pointing at it.

Will it work if I show a Figma screenshot?

Yes, if the screenshot helps pinpoint an element in your actual codebase. If it's a design mockup that doesn't exist in the project yet, the agent can suggest markup but won't edit existing files.

Source text

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor