Skip to content
cccskills
FreePublished on GitHub

visual-edit-precision

Make focused interface changes from screenshots, annotations, or visually selected elements. Helps locate the responsible component and apply small style or markup edits while preserving existing behavior, accessibility features, and surrounding design.

OriginalShow the original 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.

See how to install

Good for

  • Adjust a button identified in a screenshot
  • Change only one selected card
  • Apply interface fixes from visual annotations
  • Refine appearance while preserving existing behavior

Files included (1)

  • SKILL.md2.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Build and review interfaces against WCAG 2.2 accessibility guidelines. Covers keyboard navigation, screen readers that read interface content aloud, accessible forms, mobile support, and display preferences, helping identify and fix barriers to using a website or app.

  • Audit an interface for accessibility issues
  • Add keyboard navigation and focus management
  • Improve screen reader support for forms
wshobson/agents41.1KUpdated Oct 19, 2026

ai-debt-detector

FreeSummary

Review AI-generated code for problems hidden behind successful runs. Check failure handling, resource cleanup, unusual inputs, nonexistent dependencies, and departures from project conventions to identify missing safeguards before merging or accepting the work as complete.

  • Audit code after an AI generation session
  • Review an AI-generated pull request before merging
  • Investigate brittle code that appears to work
wshobson/agents41.1KUpdated Oct 19, 2026

Build Apache Airflow workflows for data pipelines and scheduled jobs. The skill guides task dependencies, retries, waiting for conditions, testing, and deployment, with patterns for tasks that can be safely rerun.

  • Building scheduled data pipelines
  • Designing task order and dependencies
  • Implementing custom tasks and condition checks
wshobson/agents41.1KUpdated Oct 19, 2026

Plan and carry out an AngularJS to Angular migration, from choosing a rewrite strategy to converting components, services, and routes. Includes a hybrid approach that runs both frameworks together while individual features are migrated.

  • Planning an AngularJS to Angular migration
  • Moving a large app one feature at a time
  • Converting directives into Angular components
wshobson/agents41.1KUpdated Oct 19, 2026

Identify software protections that hinder inspection, such as debugger detection and obfuscation that makes code harder to understand. Support authorized binary analysis and CTF security challenges with protection findings, bypass strategies, reports, and analysis scripts.

  • Identify protections in an authorized malware sample
  • Plan analysis of a packed executable
  • Implement debugger detection for a CTF challenge
wshobson/agents41.1KUpdated Oct 19, 2026

Design and review REST and GraphQL APIs with consistent naming, data structures, error responses, pagination for large result sets, and versioning strategies. Helps teams define shared standards and plan changes that existing clients can adopt gradually.

  • Designing a new REST or GraphQL API
  • Reviewing API specifications before implementation
  • Establishing shared API design standards
wshobson/agents41.1KUpdated Oct 19, 2026

See all skills by wshobson

Report a problem with this skill