---
name: e-signature
description: Insert handwritten electronic signatures into Word documents (.doc/.docx). Provides a canvas-based signature pad for hand-drawing, parses documents to locate signature fields, inserts signature images, and fills in dates/names. Use when the user mentions electronic signature, handwritten signature, sign a document, e-sign, digital signing, or filling signature fields in Word files.
---

# Electronic Signature for Word Documents

## Trigger Scenarios

Use this skill when the user wants to:
- Add a handwritten electronic signature to a Word document
- Sign a .doc or .docx file
- Fill in signature fields, dates, or names in a document

## Workflow

### Step 1: Parse the Document

**For .doc files** — use `word-extractor` (Node.js):
```bash
npm install word-extractor  # if not installed
```
```javascript
const WordExtractor = require('word-extractor');
const extractor = new WordExtractor();
const doc = await extractor.extract('file.doc');
console.log(doc.getBody());
```

**For .docx files** — use the docx skill's extraction tools or unzip + read XML directly.

Identify: signature location (look for keywords like "签字", "签名", "signature", "sign here"), date fields, name fields.

### Step 2: Collect Handwritten Signature

Provide the user with the signature pad:

```
Open the signature pad HTML file from: assets/signature_pad.html
```

The pad allows mouse/touch hand-drawing and exports a trimmed transparent PNG. After the user saves, they will provide the PNG file path.

If the user already has a signature image, skip this step.

### Step 3: Generate Signed Document

Use `docx` (Node.js) to create the final document:

```bash
npm install docx  # if not installed
```

Key code pattern for inserting a signature image:

```javascript
const { Document, Packer, Paragraph, TextRun, ImageRun, AlignmentType } = require('docx');
const fs = require('fs');

const signatureImg = fs.readFileSync('path/to/signature.png');

// In the children array, at the signature location:
new Paragraph({
  children: [
    new TextRun("Signature: "),
    new ImageRun({
      type: "png",
      data: signatureImg,
      transformation: { width: 150, height: 70 },
      altText: { title: "Signature", description: "Handwritten signature", name: "signature" }
    })
  ]
})
```

**Important rules:**
- Reproduce the original document content faithfully (font, spacing, alignment)
- Use `SimSun` for Chinese documents, `Times New Roman` or `Arial` for English
- Chinese smart quotes `\u201C` / `\u201D` must be escaped in JS strings (use template literals or unicode escapes)
- Place signature image right after the signature label line
- Fill date fields with the current date unless user specifies otherwise
- Right-align date lines for Chinese formal documents

### Step 4: Verify

After generating, confirm:
- [ ] All original text content is preserved
- [ ] Signature image is embedded and visible
- [ ] Date and name fields are filled correctly
- [ ] Document opens without errors

## Fallback: Generated Signature

If the user prefers a font-based signature instead of handwriting:

```javascript
const { createCanvas, registerFont } = require('canvas');
// Register a calligraphic font (e.g., STXingkai for Chinese)
registerFont('C:/Windows/Fonts/STXINGKA.TTF', { family: 'STXingkai' });
// Draw text on canvas → export PNG → insert into document
```

Use `华文行楷` (STXingkai) for Chinese names, `Segoe Script` or similar for English names.

## Additional Resources

- For detailed API patterns and field detection, see [reference.md](reference.md)
- Signature pad source: [assets/signature_pad.html](assets/signature_pad.html)