AddThisFeature

Signature Pad

Let someone sign with a finger, stylus, or mouse and attach it to a document.

simple Documents & Files

What it adds

A drawing surface that captures a handwritten signature and stores it against the record being signed.

What your agent is told to do

5
  1. 1

    Place the pad where the signing actually happens, inside the existing form or document view, so the user is not sent to a separate screen and back.

  2. 2

    Store the captured signature through the app's existing file storage and access rules, and treat it as private. A signature image readable by anyone with the URL is a forgery kit.

  3. 3

    Record who signed, when, on what record, and from what session alongside the image. The picture alone proves nothing.

  4. 4

    Offer a typed-name alternative next to the drawing surface and give it equal standing, since drawing with a mouse is unpleasant and impossible with a keyboard or screen reader.

  5. 5

    Do not present this as a legally binding electronic signature workflow. If the app already integrates a signature provider, route contracts there and keep this for in-app acknowledgements.

Edge cases it handles

8
  • Drawing at logical pixel size on a high-density screen produces a signature that looks soft when displayed and worse when printed. Scale the drawing surface to the device pixel ratio and capture strokes at that resolution.
  • A clear control that resets the surrounding form as well as the signature will lose the user's work. Scope clear to the signature only, and provide an undo that removes the last stroke rather than everything.
  • On touch devices a drag across the pad scrolls the page instead of drawing. Suppress scrolling and pull-to-refresh over the pad while a stroke is in progress, and restore normal behaviour the moment the finger lifts.
  • A signature stored without a timestamp, signer identity, and the version of what was signed is unusable as evidence. Persist that context in the same write as the image, and prevent it being edited afterwards.
  • A typed-name alternative must produce the same signed record as a drawn one, with the same context stored, so assistive technology users are not pushed into a lesser path.
  • An empty or accidental single-dot signature must be rejected before submission rather than saved as a valid mark.
  • Losing connection during submission must not clear the drawn signature. Keep it on screen and allow a retry.
  • The stored signature needs a stated retention period and a defined answer for what happens to it when the signer's account is deleted.

Definition of done

9
  • A signature can be drawn with finger, stylus, or mouse and saved against the record.
  • Captured strokes render sharply on high-density screens and in print.
  • Clear resets only the signature, and undo removes a single stroke.
  • Drawing on a touch device does not scroll or refresh the page.
  • Each signature is stored with signer identity, timestamp, and the version of what was signed.
  • A typed-name alternative produces an equivalent signed record.
  • Stored signatures are private, with a stated retention period.
  • 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.