关于 visual-edit-precision
在请求附带选区、标注或截图等视觉信息时，指导 Agent 精确修改代码的技能。它强调只改指定元素、保留现有行为，并检查渲染结果。
主要功能
- 01识别指定的界面元素
- 02将修改限制在请求范围
- 03保留样式与行为
- 04进行最小化 CSS 或标记修改
- 05检查渲染结果及副作用
适用场景
- 01调整选中的界面元素
- 02落实基于截图的设计反馈
- 03分别处理多项视觉修改
- 04避免改动无关组件行为
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/visual-edit-precision确认已加载。
详细介绍
可视化编辑的精确性
概述
当变更请求伴随可视化上下文（元素选择、标注、截图）时，应进行有针对性、最小化的修改。精确优先于野心：只修改明确指示的内容，保留其他一切。
流程
当提供了可视化上下文时：
- 识别 - 明确指示了哪些具体元素？它们属于哪个组件文件？
- 限定范围 - 仅修改被指向的内容。不要重构周围的代码。
- 保留 - 保留现有的样式、类和行为。只修改被要求修改的部分。
- 有针对性 - 进行最小的 CSS/标记更改以实现可视化结果。
- 验证 - 确认更改渲染正确且无副作用。
关键原则
精确优先于野心
可视化上下文给出的是一个特定元素。不要：
- 在仅要求修改一个样式时重构整个组件
- 在仅指向外观时更改组件的 API
- 在仅选择了视觉效果时改动逻辑
要：
- 找到所选元素的准确文件和行号
- 进行最小的修改以实现所描述的可视化更改
- 保留所有现有行为、事件处理程序、无障碍性
多次编辑
当多个可视化编辑到达时：
- 每个编辑独立针对各自的元素
- 不要等待一个完成后再处理另一个
- 如果两个编辑冲突（同一元素，不同请求），处理最新的那个
常见错误
- 用户指向一个按钮时却重写整个组件
- 仅需调整一个元素的颜色时却更改全局配置
- 为匹配选择而添加固定宽度，破坏响应式行为
- 忽略特异性（用户指示的是一张卡片，Agent 却更改了所有卡片）
- 在可视化编辑过程中移除无障碍属性（aria-*、role、tabindex）
评论
支持 Markdown