
Visual Edit
Interpret and act on batched visual edit requests produced by the Design Tweak app.
Install
npx skills add kirodotdev/KiroCrew --skill visual-edit -g -a claude-code -y- Repository
- kirodotdev/KiroCrew4.7k
- Category
- Design
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Mediumabout 2,313 tokens
- Runs scripts
- No, instructions only
What it does
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.
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
- Read the request file. The prompt names the request id; if not, read the
newest file in the queue dir above.
statewill be"sent", a"draft"request has not been handed to you yet, so leave drafts alone. - Work
comments[]in order. Each entry is an independent edit with its owncid,comment,sourceFile, andselection. Do not merge them into one change, even when two comments touch the same file. - For each comment, resolve the target, make the edit, and report against
that comment's
cid(see below). - 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",
)


