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):

npm install word-extractor  # if not installed

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:

npm install docx  # if not installed

Key code pattern for inserting a signature image:

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:

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
• Signature pad source: assets/signature_pad.html