本文へ移動
cccskills
無料GitHub で公開

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. Also use when editing components where spatial context (element identity, DOM references, layout data) supplements text instructions.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.

日本語の概要は準備中です。原文の説明を表示しています。

wshobson/agents4万2026年10月5日 更新

Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when orphaned resources or missing cleanup are suspected, or when the agent claims done but hidden debt may exist. Catches the specific failure patterns AI agents produce that humans would not.

日本語の概要は準備中です。原文の説明を表示しています。

wshobson/agents4万2026年10月5日 更新

Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling batch jobs.

日本語の概要は準備中です。原文の説明を表示しています。

wshobson/agents4万2026年10月5日 更新

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.

日本語の概要は準備中です。原文の説明を表示しています。

wshobson/agents4万2026年10月5日 更新

Understand anti-reversing, obfuscation, and protection techniques encountered during software analysis. Use this skill when analyzing malware evasion techniques, when implementing anti-debugging protections for CTF challenges, when reverse engineering packed binaries, or when building security research tools that need to detect virtualized environments.

日本語の概要は準備中です。原文の説明を表示しています。

wshobson/agents4万2026年10月5日 更新

Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.

日本語の概要は準備中です。原文の説明を表示しています。

wshobson/agents4万2026年10月5日 更新

wshobson のスキルをすべて見る

このスキルの問題を報告する