SuperAPI AI Directory

prototype-comments

Coding & development

View repository

Updated 10-16 00:00

About this skill

Prototype Comment Handling

Use this skill when prototype comments exist on the page, or when /editor-todo requires handling the current project's comments.

Terminology boundaries:

  • Comment / comment: prototype revision feedback in Commentary; this skill only handles this type of content.
  • Annotation / annotation: the prototype description layer of AnnotationViewer, such as annotation-source.json and @axhub/annotation; it is not within the scope of this skill.

Default reading order

  1. First locate the target prototype directory:src/prototypes/<prototype-id>/。
  2. Read local files:src/prototypes/<prototype-id>/.spec/prototype-comments.json。
  3. If the file does not exist, determine the target based on user context and the current code; do not call CLI/API, and do not depend on the page running in the browser.

Local file structure

Comment records are fixed at .spec/prototype-comments.json; the core fields are comments/tasks/images:

  • comments: comments and modification records, including locator, comment, marker, and the before/after of text/style/tweak modifications.
  • tasks: by elementKey store pending task information.
  • images: only records metadata and images[].assetPath. Image files are located in .spec/prototype-comment-assets/。

When reading images, use only the local images[].assetPath, based on .spec/prototype-comment-assets/ to find files. Do not write new base64 image content back to JSON; when new image assets are needed, place them in the assets directory and reference them in images[].assetPath .

Handling process

  1. Read .spec/prototype-comments.json, by comments understand the modification intent and locator information.
  2. If there are comment images, by images[].assetPath read local files to assist understanding.
  3. Modify src/prototypes/<prototype-id>/ the implementation files under it, keeping the scope of changes focused.
  4. After completing one comment task, only clean up the local comment document: delete the corresponding comment record and task record, and do not write task progress fields.
  5. Complete preview verification according to project rules; if verification is not possible, explain the reason.

Deletion rules

  • Use comments[].elementKey as the primary key to delete completed comments.
  • Delete the tasks[elementKey]。
  • Delete elementKey matching images[] records that are no longer referenced by other remaining comments.
  • For .spec/prototype-comment-assets/, only delete files that correspond to the removed images[].assetPath and are no longer referenced by JSON.
  • If a comment has no elementKey, use locator/label to assist manual matching; when matching is uncertain, keep it and do not delete by mistake.

Cleanup rule example: after completing elementKey=hero , remove comments the hero comment, remove tasks.hero, remove the hero that belongs only to images records and hero-only.png; if shared.png is still referenced by other remaining comments, keep that image record and local file.

Completion reply

Explain to the user in natural language:

  • Which UI modifications corresponding to which comments have been completed.
  • Whether there are still unprocessed or abnormal comments.
  • What verification was done.

Do not write the reply as a CLI log; only briefly explain technical details when they truly affect user understanding.