/adobe-before-and-after-image-edit

name: adobe-before-and-after-image-edit
description: >
  Builds a labeled side-by-side before-and-after comparison from an original photo and its
  already-edited version. Use this skill whenever the user has two versions of an image and
  wants them shown together — "make a before and after", "put the original next to my edit",
  "side-by-side of my retouch", "before/after for my portfolio or client", "compare these two
  versions" — even if they never say "before and after". Compare-only: it needs both images
  and never edits them. Shows an in-chat Before/After preview; where previews don't render, it
  builds one side-by-side PNG (if Pillow is already installed) or returns two labeled links.
  Creates a shareable Firefly Board on request.
  Gen AI: ❌
license: Apache-2.0
compatibility: "Runs on widget-capable surfaces (e.g. Claude, with the asset_add_file picker and asset_preview_file preview) and non-UI agents (e.g. Codex). Without the preview widget, the bundled scripts/compose_before_after.py builds the side-by-side PNG using Python 3.8+ and Pillow 9.2+ only if they are already installed; nothing is ever installed, and two labeled links are returned instead."
allowed-tools: adobe_mandatory_init asset_add_file asset_initialize_file_upload asset_finalize_file_upload asset_preview_file create_firefly_board
metadata:
  version: 1.0.0
  visibility: public
  surface: [claude, codex]

Adobe Before and After Image Edit

Turns an original photo and its edited version into a labeled before-and-after comparison — Before on the left, After on the right. The skill only compares: it never edits, re-exports, or overwrites either image, so the comparison shows exactly what the user's edit changed.

> **Surface note:** The default flow uses Adobe's MCP App widgets — the `asset_add_file` picker (Step 2) and the `asset_preview_file` preview (Step 3). Follow it as written. Only if a widget tool is **not available on this surface** or the host can't render it (e.g. Codex) use the *No-widget fallback* attached to that step. Present `AskUserQuestion` prompts as plain-text options wherever no question widget exists.

> **No editing here.** This overrides the single-image widget offer in the *Interactive Image Widgets* section of `adobe_mandatory_init`: this skill compares two existing images, so never call or mention an image-editing tool (any `image_*` tool) or an interactive editing widget (any `_app` tool).

---

Tool Reference

| Step | Tool | Notes | |------|------|-------| | Initialize | `adobe_mandatory_init` | Routing rules, widget availability, egress status | | Pick or upload the images | `asset_add_file` | Picker widget; returns a presigned URL for each selected file | | Stage a local file (start) | `asset_initialize_file_upload` | Programmatic upload; requires egress | | Stage a local file (finish) | `asset_finalize_file_upload` | Returns the presigned Creative Cloud URL | | Show side-by-side preview | `asset_preview_file` | Before/After widget *(no-widget fallback: Step 3b image or labeled links)* | | Firefly Board (on request only) | `create_firefly_board` | Both images on one shareable board |

The bundled helper [`scripts/compose_before_after.py`](scripts/compose_before_after.py) (not an MCP tool) builds the single side-by-side image in Step 3b.

---

Workflow

Step 0 — Initialize Adobe Tools

Call `adobe_mandatory_init` first. This returns file handling rules and tool routing guidance required for the rest of the workflow.

{ "skill_name": "adobe-before-and-after-image-edit", "skill_version": "1.0.0" }

Note whether egress is enabled (Step 2 staging depends on it) and whether `asset_add_file` and `asset_preview_file` are available on this surface.

---

Step 1 — Identify the Before and After images

A comparison needs exactly one **Before** (the original, unedited image) and one **After** (the edited version).

• **No images yet** — go straight to Step 2 and open the picker; don't ask first.
• **Only one image** — work out which version it is with the rules below, then ask for the

other one: the original if it's the edit, the edited version if it's the original. If you can't tell, ask whether it's the original or the edit, and for the other version. This skill doesn't edit photos; if the user hasn't made the edit yet, explain that and ask them to come back with both versions.

• **The same file twice** — say both inputs are identical and treat them as one image. Use

the rules below to identify its version, then ask for the missing counterpart: the original if both are After, the edited version if both are Before. If its version is unclear, ask which version it is and request the other one.

• **More than two images** — ask which two to compare. If the user clearly paired several sets

(e.g. `room1_before.jpg` / `room1_after.jpg`, `room2_before.jpg` / `room2_after.jpg`), run Steps 2–3 once per pair and send one summary at the end.

• **Unsupported format** — comparisons work with JPEG, PNG, WebP, and TIFF. For HEIC, camera RAW,

PDF, or video, ask for a JPEG or PNG export.

Decide which image is Before with the first rule that applies. Don't guess — swapped labels would misrepresent the edit.

1. The user says which is which. 2. One image is the output of an earlier tool call in this conversation — it's After, and that call's input is Before. 3. File names say so: `original`, `orig`, `raw`, `before`, `unedited`, `source` → Before; `edited`, `edit`, `after`, `final`, `retouched`, `fixed`, `v2` → After. 4. Otherwise ask one question — "Which image is the original (Before)?" — listing both file names (`AskUserQuestion`, or plain text where no question widget exists), and wait.

Labels default to "Before" and "After". If the user wants other wording (e.g. "Original" / "Retouched", or another language), use it in every step.

---

Step 2 — Get previewable URLs

`asset_preview_file` needs a presigned URL for each image. Resolve each