# Visual Edit

Interpret and act on batched visual edit requests produced by the Design Tweak app.

- Repository: https://github.com/kirodotdev/KiroCrew (4711 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kirodotdev/KiroCrew --skill visual-edit -g -a claude-code -y`
Codex: `npx skills add kirodotdev/KiroCrew --skill visual-edit -g -a codex -y`
Cursor: `npx skills add kirodotdev/KiroCrew --skill visual-edit -g -a cursor -y`
Gemini CLI: `npx skills add kirodotdev/KiroCrew --skill visual-edit -g -a gemini-cli -y`

## Description

Interpret and act on batched visual edit requests produced by the Design Tweak app. Use when the user references a visual selection, a "design tweak" request, an edit request number, or asks you to apply pending visual edits.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Visual Edit, Design Tweak request handling

The **Design Tweak** app lets a designer visually pick element(s) in a live
preview and attach natural-language comments. Comments accumulate into a
**request**, and the designer sends the whole batch at once. One request file
therefore contains **many comments as sub-items**:

```
<app data dir>/queue/<timestamp>-<id>.json
```

The app data dir defaults to `~/.kiro/crew/apps/design-tweak/data/`, but moves
with `KIROCREW_HOME` or `KIROCREW_APP_DATA_DIR`. The request prompt quotes the
payload's real path, use that path, not the default.

**A request is a batch. Work every comment in it, and report per comment.**

## The loop

1. **Read the request file.** The prompt names the request id; if not, read the
   newest file in the queue dir above. `state` will be `"sent"`, a `"draft"` request
   has not been handed to you yet, so leave drafts alone.
2. **Work `comments[]` in order.** Each entry is an independent edit with its own
   `cid`, `comment`, `sourceFile`, and `selection`. Do not merge them into one
   change, even when two comments touch the same file.
3. **For each comment**, resolve the target, make the edit, and report against
   **that comment's `cid`** (see below).
4. When every comment is done, tell the user what changed, grouped by comment
   number.

## Reporting progress, always per comment

Each comment has its own progress bubble in the preview, so notes must be
addressed to a `cid`:

```
design_tweak_update_thread(
  request_id=<requestId>,
  comment_id=<commentId>,
  text="Editing styles.css, uppercasing .section-title",
)
```

Post one note when you start a comment, and one per meaningful step. Keep each to
a single short line. When that comment is finished, send `status="done"` so its
dot turns green:

```
design_tweak_update_thread(
  request_id=<requestId>,
  comment_id=<commentId>,
  text="Done, added text-transform: uppercase",
  status="done",
)
```

The rest: https://github.com/kirodotdev/KiroCrew/blob/HEAD/src/kiro_crew/apps/builtins/design_tweak/skills/visual-edit/SKILL.md