Overview

This skill enables automatic electronic invoice application by scanning QR codes from receipt images and filling out online invoice forms. It handles the complete workflow from QR code detection to invoice submission.

Workflow

Step 1: QR Code Recognition

When a user provides an invoice receipt image containing a QR code:

• Run the QR code recognition script:

   node scan-qr.js 
   

• The script outputs the decoded QR code URL
• If recognition fails, ask user to provide the URL directly

Step 2: Navigate to Invoice System

• Open the decoded URL in browser automation
• Verify the page loads successfully
• Take snapshot to understand form structure

Step 3: Retrieve Company Information

Before filling the form, retrieve the user's company information:

• Check memory files for stored invoice header information:

• Required fields typically include:

Step 4: Fill Invoice Form

• Analyze the form structure using browser snapshot
• Fill in company information fields
• Fill in recipient information:

• Verify all required fields are completed

Step 5: Review and Submit

• Submit the form
• Review confirmation page
• Verify all information is correct
• Report results to user

Error Handling

QR Code Not Recognized

If QR code recognition fails:

• Ask user to provide the URL directly
• Suggest using phone to scan and share the URL

Form Structure Changes

If the invoice system form structure changes:

• Take a new snapshot
• Identify updated field references
• Adapt the filling process accordingly
• Document the new structure for future reference

Missing Information

If required company or contact information is missing:

• Ask user to provide the missing details
• Update memory files with new information
• Continue with the invoice application

Scripts

scan-qr.js

Primary script for QR code recognition from images using Node.js and qrcode-reader library.

Usage:

node scan-qr.js 

Requirements:

• Node.js environment (v14+)
• npm packages: qrcode-reader, canvas

Installation:

cd scripts
npm install qrcode-reader canvas

Output:

• Decoded QR code URL on success (format: "✅ 识别成功: ")
• Error message on failure (format: "❌ 错误: ")

Technology:

• Uses qrcode-reader library for QR code decoding
• Canvas for image processing
• Pure JavaScript implementation (no Worker required)

Memory Integration

This skill relies on stored user information in memory files:

Company Invoice Header Information (stored in MEMORY.md):

• Company name
• Tax ID
• Address
• Phone number
• Bank information

Contact Information (stored in MEMORY.md):

• Mobile phone numbers
• Email addresses

When filling forms, always reference this information first before asking the user.

Best Practices

• Always verify the decoded URL is legitimate before proceeding
• Double-check all information before submission
• Take snapshots at each step for documentation
• Report results clearly to the user after submission
• Update memory with new information if user provides corrections
• Use auto-complete when available (more accurate than manual input)