AddThisFeature

Photo Editor

Let people crop, rotate and adjust a photo before it is saved, without leaving the app.

involved Editors & Builders

What it adds

An in-browser editing step between choosing an image and storing it, covering crop, rotation, straightening and basic tone adjustment.

What your agent is told to do

5
  1. 1

    Attach this to the app's existing upload path rather than adding a second one. File Upload, Avatar Upload and any media upload already in the app should route through the same editor step, and the app's existing size and type limits still apply server-side.

  2. 2

    Keep the tool list short and useful: crop to a chosen ratio, rotate in quarter turns, straighten by a small angle, and adjust brightness and contrast. Filters and drawing tools are a separate feature and should be deferred, not half-built.

  3. 3

    Edit against a downscaled proxy for responsiveness, then apply the recorded operations to the full-resolution original on the server. Saving what the browser rendered on screen ships a blurry image.

  4. 4

    Store the original file untouched and keep the edit as a set of operations, so a crop can be widened again later and a mistake is reversible.

  5. 5

    Do not build a free-form crop only. If the image feeds a fixed slot such as an avatar or a card header, offer that slot's ratio as the default and let the app's existing focal point handling take over from there.

Edge cases it handles

8
  • Phone cameras record orientation in metadata rather than in the pixels. Read that orientation, apply it before editing, and write the result upright, or portraits will flip on save.
  • The proxy the customer edits is not the file that gets stored. Record crop and rotation as proportions of the image rather than pixel offsets, so the same operations apply cleanly to the full-resolution original.
  • The original must survive the edit. Keep it in storage under the app's normal retention and access rules so an edit can be undone, and make clear who is allowed to read the original back.
  • A very large image will exhaust browser memory before it ever renders. Decide a ceiling above which the browser downscales before loading, and reject beyond that with a clear message rather than freezing the tab.
  • Photos carry GPS coordinates. Strip location and camera metadata on export by default, and treat keeping it as an explicit opt-in.
  • Leaving the editor with unsaved crops must warn, and a half-finished upload that is abandoned must be cleaned up rather than left occupying storage.
  • Transparency must survive. Flattening a logo onto a white background because the export format has no alpha channel is a silent data loss.
  • The edited image still needs alt text and a reserved aspect ratio wherever it is displayed, so the surrounding layout does not jump when it loads.

Definition of done

9
  • Editing happens inside the app's existing upload flow, not in a parallel uploader.
  • Crop, rotation, straightening and tone adjustments are applied to the full-resolution original, not the on-screen proxy.
  • Orientation metadata is honoured and images save upright.
  • The original file is retained and every edit can be reverted.
  • Location metadata is removed on export unless the user opts in.
  • Oversized images are downscaled or refused with a message instead of hanging the browser.
  • Abandoned edits warn before discard and leave no orphaned files in storage.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.