Skill Forge Essentials

Skill 164 of 183

Visual Edit Precision

Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests.

1 minute · 252 words · 6 sections

Install

$ npx skills add wshobson/agents --skill visual-edit-precision

$ npx skills add wshobson/agents

» /plugin marketplace add wshobson/agents

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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:

IDENTIFY - What exact element(s) were indicated? Which component file owns them?
SCOPE - Change ONLY what was pointed at. Don’t refactor surrounding code.
PRESERVE - Keep existing styles, classes, and behavior. Only modify what was asked.
TARGETED - Make the minimal CSS/markup change that achieves the visual result.
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

About this skill

Trigger

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.

The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.

Colophon for this issue

Colophon

How this issue was made

Source

github.com/wshobson/agents, branch main, last pushed 21 September 2026.

Licence

MIT — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

183 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. 51 distinct layouts observed: plugins/accessibility-compliance/skills/*/SKILL.md, plugins/agent-teams/skills/*/SKILL.md, plugins/api-scaffolding/skills/*/SKILL.md, plugins/avoid-ai-writing/skills/*/SKILL.md, plugins/backend-development/skills/*/SKILL.md, plugins/before-you-build/skills/*/SKILL.md, plugins/block-no-verify/skills/*/SKILL.md, plugins/blockchain-web3/skills/*/SKILL.md, plugins/brand-landingpage/skills/*/SKILL.md, plugins/business-analytics/skills/*/SKILL.md, plugins/cicd-automation/skills/*/SKILL.md, plugins/cloud-infrastructure/skills/*/SKILL.md, plugins/conductor/skills/*/SKILL.md, plugins/data-engineering/skills/*/SKILL.md, plugins/database-design/skills/*/SKILL.md, plugins/developer-essentials/skills/*/SKILL.md, plugins/dgx-spark-ops/skills/*/SKILL.md, plugins/documentation-generation/skills/*/SKILL.md, plugins/documentation-standards/skills/*/SKILL.md, plugins/dotnet-contribution/skills/*/SKILL.md, plugins/file-conversion/skills/*/SKILL.md, plugins/framework-migration/skills/*/SKILL.md, plugins/frontend-mobile-development/skills/*/SKILL.md, plugins/game-development/skills/*/SKILL.md, plugins/hermes-tweet/skills/*/SKILL.md, plugins/hr-legal-compliance/skills/*/SKILL.md, plugins/incident-response/skills/*/SKILL.md, plugins/javascript-typescript/skills/*/SKILL.md, plugins/kubernetes-operations/skills/*/SKILL.md, plugins/llm-application-dev/skills/*/SKILL.md, plugins/llm-finetuning/skills/*/SKILL.md, plugins/machine-learning-ops/skills/*/SKILL.md, plugins/observability-monitoring/skills/*/SKILL.md, plugins/payment-processing/skills/*/SKILL.md, plugins/plugin-eval/skills/*/SKILL.md, plugins/pptx-deck-creation/skills/*/SKILL.md, plugins/protect-mcp/skills/*/SKILL.md, plugins/python-development/skills/*/SKILL.md, plugins/quantitative-trading/skills/*/SKILL.md, plugins/reverse-engineering/skills/*/SKILL.md, plugins/review-agent-governance/skills/*/SKILL.md, plugins/security-scanning/skills/*/SKILL.md, plugins/shell-scripting/skills/*/SKILL.md, plugins/ship-mate/skills/*/SKILL.md, plugins/signed-audit-trails/skills/*/SKILL.md, plugins/skill-forge-essentials/skills/*/SKILL.md, plugins/social-publishing/skills/*/SKILL.md, plugins/startup-business-analyst/skills/*/SKILL.md, plugins/superself/skills/*/SKILL.md, plugins/systems-programming/skills/*/SKILL.md, plugins/ui-design/skills/*/SKILL.md.

Issue colours

Resolved from a deterministic hash of the owner name. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Removed “Visual Edit Precision”, a leading h1 that duplicated the skill title.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Marketplace

A plugin manifest is published at .claude-plugin/marketplace.json by Seth Hobson, declaring 94 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /wshobson/agents.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

Overview

Process

When visual context is provided:

IDENTIFY - What exact element(s) were indicated? Which component file owns them?
SCOPE - Change ONLY what was pointed at. Don’t refactor surrounding code.
PRESERVE - Keep existing styles, classes, and behavior. Only modify what was asked.
TARGETED - Make the minimal CSS/markup change that achieves the visual result.
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