visual-edit-precision – Design & UI skill for AI agents
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.
Install the visual-edit-precision skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/visual-edit-precision-87c69.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /visual-edit-precision – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/visual-edit-precision-87c69.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $visual-edit-precision – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/visual-edit-precision-87c69.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /visual-edit-precision – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/visual-edit-precision-87c69.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /visual-edit-precision – then describe the task you want done.
SKILL.md content
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
Related skills
- expo-tailwind-setup – Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal…
- expo-ui – Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on…
- expo-ui-jetpack-compose – Build Android-native Expo SDK 55 UI with Jetpack Compose views/modifiers, Host sizing…
- expo-ui-swift-ui – Build iOS-native Expo SDK 55 UI with SwiftUI views/modifiers, Host/RNHostView embedding…
- web-component-design – Master React, Vue, and Svelte component patterns including CSS-in-JS, composition…
- fal-image-edit – AI-powered image editing with style transfer and object removal
- fal-upscale – Upscale and enhance image and video resolution using AI
- favicon – Generate favicons from a source image