Skills

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

  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",
)
Read the whole SKILL.md on GitHub

More in Design