Post to WeChat Official Account

Language

Match user's language: Respond in the same language the user uses. If user writes in Chinese, respond in Chinese. If user writes in English, respond in English.

Script Directory

Agent Execution: Determine this SKILL.md directory as SKILL_DIR, then use ${SKILL_DIR}/scripts/<name>.ts.

Preferences (EXTEND.md)

Use Bash to check EXTEND.md existence (priority order):

# Check project-level first
test -f .baoyu-skills/baoyu-post-to-wechat/EXTEND.md && echo "project"

# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && echo "user"

┌────────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-post-to-wechat/EXTEND.md │ Project directory │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md │ User home │ └────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, apply settings │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ Use defaults │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md Supports: Default theme | Default publishing method (api/browser) | Default author | Chrome profile path

Image-Text Posting (图文)

For short posts with multiple images (up to 9):

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img.png --submit

See references/image-text-posting.md for details.

Article Posting Workflow (文章)

Copy this checklist and check off items as you complete them:

Publishing Progress:
- [ ] Step 0: Load preferences (EXTEND.md)
- [ ] Step 1: Determine input type
- [ ] Step 2: Check markdown-to-html skill
- [ ] Step 3: Convert to HTML
- [ ] Step 4: Validate metadata (title, summary)
- [ ] Step 5: Check and prepare cover image
- [ ] Step 6: Select method and configure credentials
- [ ] Step 7: Publish to WeChat
- [ ] Step 8: Report completion

Step 0: Load Preferences

Check and load EXTEND.md settings (see Preferences section above).

Step 1: Determine Input Type

Plain Text Handling:

1. Generate slug from content (first 2-4 meaningful words, kebab-case)
2. Create directory and save file:

mkdir -p "$(pwd)/post-to-wechat/$(date +%Y-%m-%d)"
# Save content to: post-to-wechat/yyyy-MM-dd/[slug].md

3. Continue processing as markdown file

Slug Examples:

• "Understanding AI Models" → understanding-ai-models
• "人工智能的未来" → ai-future (translate to English for slug)

Step 2: Check Markdown-to-HTML Skill

Skip if: Input is .html file

Skill Discovery:

# Check if baoyu-markdown-to-html exists
test -f skills/baoyu-markdown-to-html/SKILL.md && echo "found"

When Not Found:

No markdown-to-html skill found.

Suggested installation:
https://github.com/JimLiu/baoyu-skills/blob/main/skills/baoyu-markdown-to-html/SKILL.md

Options:
A) Cancel - install the skill first
B) Continue - provide HTML file manually

Step 3: Convert Markdown to HTML

Skip if: Input is .html file

1. Ask theme preference (unless specified in EXTEND.md or CLI):

2. Execute conversion (using the discovered skill):

npx -y bun ${MD_TO_HTML_SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>

3. Parse JSON output to get: htmlPath, title, author, summary, contentImages

Step 4: Validate Metadata

Check extracted metadata from Step 3 (or HTML meta tags if direct HTML input).

Auto-Generation Logic:

• Title: First H1/H2 heading, or first sentence
• Summary: First paragraph, truncated to 120 characters

Step 5: Check and Prepare Cover Image

CRITICAL: WeChat Official Account requires a cover image for article (news) type posts.

Check for existing cover image sources (in priority order):

1. CLI argument: --cover <path>
2. Frontmatter fields: featureImage, coverImage, cover, image
3. First image in HTML content (will be used if found)

If NO cover image found, use AskUserQuestion to prompt user with options:

Cover image required for WeChat article posting.

How would you like to provide a cover image?

Options to present:

If user chooses "Generate based on article content":

1. Check ImageMagick installation:

which convert || which magick

2. Choose generation method:

Method A: ImageMagick (Recommended if installed)

If ImageMagick IS installed, use it directly:

# Extract article title and generate cover
convert -size 900x500 \
  -define gradient:angle=135 \
  gradient:'#667eea'-'#764ba2' \
  -gravity center \
  -font "DejaVu-Sans-Bold" \
  -pointsize 48 \
  -fill white \
  -annotate +0-30 '<Article Title Line 1>' \
  -pointsize 36 \
  -annotate +0+30 '<Article Title Line 2>' \
  <output_directory>/<article-basename>-cover.jpg

Method B: Node.js Script (Fallback - No system dependencies required)

If ImageMagick is NOT installed, use the npx fallback script:

# Generate cover using Node.js (works anywhere, no sudo needed)
npx -y bun ${SKILL_DIR}/scripts/generate-cover.ts \
  --title "<Article Title>" \
  --output <output_directory>/<article-basename>-cover.jpg \
  --gradient-start "#667eea" \
  --gradient-end "#764ba2"

Fallback script features:

• ✓ No system dependencies (ImageMagick) required
• ✓ Works on any platform with Node.js/Bun
• ✓ No sudo/admin privileges needed
• ✓ Supports multiple image libraries (tries @napi-rs/canvas → sharp → SVG fallback)
• ✓ Auto-wraps long titles
• ✓ Customizable colors and dimensions

Library installation (optional, for better output):

# For PNG/JPEG output (choose one):
npm install @napi-rs/canvas  # Recommended - native performance
# OR
npm install sharp            # Alternative - pure Node.js

If neither library is installed, the script will generate an SVG file (which WeChat API also accepts).

3. Extract article title from HTML/markdown
4. Generate cover image using the chosen method:

# Example: Generate gradient background with title text
convert -size 900x500 \
  -define gradient:angle=135 \
  gradient:'#667eea'-'#764ba2' \
  -gravity center \
  -font "DejaVu-Sans-Bold" \
  -pointsize 48 \
  -fill white \
  -annotate +0-30 '<Article Title Line 1>' \
  -pointsize 36 \
  -annotate +0+30 '<Article Title Line 2>' \
  <output_directory>/cover-<slug>.jpg

4. Save to same directory as the article with naming pattern: <article-basename>-cover.jpg
5. Use this generated image as --cover parameter

Image Requirements:

• Format: JPEG, PNG, GIF, or WebP
• Recommended size: 900x500px or 2:1 aspect ratio
• File size: < 2MB

Step 6: Select Publishing Method and Configure

Ask publishing method (unless specified in EXTEND.md or CLI):

If API Selected - Check Credentials:

# Check project-level
test -f .baoyu-skills/.env && grep -q "WECHAT_APP_ID" .baoyu-skills/.env && echo "project"

# Check user-level
test -f "$HOME/.baoyu-skills/.env" && grep -q "WECHAT_APP_ID" "$HOME/.baoyu-skills/.env" && echo "user"

If Credentials Missing - Guide Setup:

WeChat API credentials not found.

To obtain credentials:
1. Visit https://mp.weixin.qq.com
2. Go to: 开发 → 基本配置
3. Copy AppID and AppSecret

Where to save?
A) Project-level: .baoyu-skills/.env (this project only)
B) User-level: ~/.baoyu-skills/.env (all projects)

After location choice, prompt for values and write to .env:

WECHAT_APP_ID=<user_input>
WECHAT_APP_SECRET=<user_input>

Step 6: Publish to WeChat

API method:

npx -y bun ${SKILL_DIR}/scripts/wechat-api.ts <html_file> [--title <title>] [--summary <summary>] [--inline-css]

CRITICAL: Style Preservation (API method):

• ALWAYS use --inline-css for HTML files with styling (especially those with <style> tags)
• WeChat Official Account does NOT support <style> tags or external CSS
• Without --inline-css, all styles will be removed and the article will appear unstyled
• The --inline-css flag converts CSS rules to inline style="..." attributes
• Recommended command for styled HTML:

  npx -y bun ${SKILL_DIR}/scripts/wechat-api.ts <html_file> --cover <cover_image> --inline-css
  

Image Handling (API method):

• Automatically downloads remote images (HTTP/HTTPS URLs)
• Auto-cleans metadata for images containing AIGC/Coze markers (e.g., AIGC{...})
• Retries with forced cleaning if upload fails due to "unsupported file type" errors
• Supports formats: JPEG, PNG, GIF, WebP

Browser method:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --html <html_file>

Step 7: Completion Report

For API method, include draft management link:

WeChat Publishing Complete!

Input: [type] - [path]
Method: API
Theme: [theme name]

Article:
• Title: [title]
• Summary: [summary]
• Images: [N] inline images

Result:
✓ Draft saved to WeChat Official Account
• media_id: [media_id]

Next Steps:
→ Manage drafts: https://mp.weixin.qq.com (登录后进入「内容管理」→「草稿箱」)

Files created:
[• post-to-wechat/yyyy-MM-dd/slug.md (if plain text)]
[• slug.html (converted)]

For Browser method:

WeChat Publishing Complete!

Input: [type] - [path]
Method: Browser
Theme: [theme name]

Article:
• Title: [title]
• Summary: [summary]
• Images: [N] inline images

Result:
✓ Draft saved to WeChat Official Account

Files created:
[• post-to-wechat/yyyy-MM-dd/slug.md (if plain text)]
[• slug.html (converted)]

Detailed References

Feature Comparison

Prerequisites

For API method:

• WeChat Official Account API credentials
• Guided setup in Step 5, or manually set in .baoyu-skills/.env

For Browser method:

• Google Chrome
• First run: log in to WeChat Official Account (session preserved)

For Markdown conversion:

• A markdown-to-html skill (e.g., baoyu-markdown-to-html)
• If not installed, the workflow will suggest installation

Config File Locations (priority order):

1. Environment variables
2. <cwd>/.baoyu-skills/.env
3. ~/.baoyu-skills/.env

Troubleshooting

Extension Support

Custom configurations via EXTEND.md. See Preferences section for paths and supported options.