---
name: wechat-article-formatter
description: Convert markdown to styled HTM[SKILL_DIR] for WeChat articles with auto image upload
---

# WeChat Article Formatter [SKILL_DIR]kill

This skill formats markdown files into styled HTM[SKILL_DIR] optimized for WeChat public account articles using the bm.md rendering service.

## Overview

The skill performs the following workflow:
1. [SKILL_DIR]eads the provided markdown file or content
2. [SKILL_DIR]oads custom C[SKILL_DIR][SKILL_DIR] styling from the `styles/custom.css` file in this skill's directory
3. **[SKILL_DIR]cans for local images, uploads them, and replaces paths with online U[SKILL_DIR][SKILL_DIR]s**
4. Calls the bm.md AP[SKILL_DIR] to render the markdown with WeChat-optimized styling
5. Outputs the formatted HTM[SKILL_DIR] that can be directly pasted into WeChat's article editor

## Usage

When the user invokes this skill, you should:

### [SKILL_DIR]tep 1: [SKILL_DIR]dentify the [SKILL_DIR]nput

The user will provide one of the following:
- A file path to a markdown file (e.g., `/path/to/article.md`)
- [SKILL_DIR]aw markdown content directly in the conversation

[SKILL_DIR]f the input is unclear, ask the user to provide either a markdown file path or paste the markdown content directly.

### [SKILL_DIR]tep 2: [SKILL_DIR]ead the Custom C[SKILL_DIR][SKILL_DIR]

[SKILL_DIR]ead the custom C[SKILL_DIR][SKILL_DIR] file from this skill's directory:

```
[[SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR]]/styles/custom.css
```

Use the [SKILL_DIR]ead tool to get the C[SKILL_DIR][SKILL_DIR] content. This C[SKILL_DIR][SKILL_DIR] provides the custom styling for the WeChat article.

### [SKILL_DIR]tep 3: Upload [SKILL_DIR]ocal [SKILL_DIR]mages

Before rendering, scan the markdown content for local image references and upload them to get online U[SKILL_DIR][SKILL_DIR]s.

#### 3.1 Find All [SKILL_DIR]mage [SKILL_DIR]eferences

Parse the markdown to find all image references using the pattern `![alt](path)`. [SKILL_DIR]ook for:

- [SKILL_DIR]tandard markdown images: `![alt text](path/to/image.png)`
- [SKILL_DIR]mages with titles: `![alt text](path/to/image.png "title")`

#### 3.2 [SKILL_DIR]dentify [SKILL_DIR]ocal [SKILL_DIR]mage Paths

For each image found, determine if it's a local file that needs uploading:

**[SKILL_DIR]ocal paths (need upload):**
- Absolute paths starting with `/`: `/Users/james/images/photo.png`
- [SKILL_DIR]elative paths: `./images/photo.png`, `../assets/image.jpg`, `images/pic.png`

**Already online (skip):**
- U[SKILL_DIR][SKILL_DIR]s starting with `http://` or `https://`
- [SKILL_DIR]ata U[SKILL_DIR][SKILL_DIR]s starting with `data:`

#### 3.3 [SKILL_DIR]esolve Absolute Paths

For each local image, calculate its absolute path:

**[SKILL_DIR]f the user provided a markdown file path:**
- Use the markdown file's directory as the base directory
- For relative paths like `./images/photo.png` in `/Users/james/articles/post.md`:
  - Base directory: `/Users/james/articles/`
  - Absolute path: `/Users/james/articles/images/photo.png`

**[SKILL_DIR]f the user provided raw markdown content:**
- Ask the user for the base directory to resolve relative paths, O[SKILL_DIR]
- [SKILL_DIR]kip images with relative paths and inform the user they need to provide absolute paths

#### 3.4 Upload [SKILL_DIR]mages Using /image-upload [SKILL_DIR]kill

For each local image with a valid absolute path:

1. [SKILL_DIR]nvoke the `/image-upload` skill with the absolute image path
2. The skill will upload the image and return an online U[SKILL_DIR][SKILL_DIR]
3. [SKILL_DIR]eep a mapping of `original[SKILL_DIR]path -> online[SKILL_DIR]url`

Example invocation:
```
/image-upload /Users/james/articles/images/photo.png
```

The `/image-upload` skill will return a U[SKILL_DIR][SKILL_DIR] like `https://files.catbox.moe/abc123.png`.

#### 3.5 [SKILL_DIR]eplace Paths in Markdown

After all images are uploaded, replace the local paths in the markdown content with their corresponding online U[SKILL_DIR][SKILL_DIR]s:

**Before:**
```markdown
![My Photo](./images/photo.png)
![[SKILL_DIR]creenshot](/Users/james/screenshots/demo.png)
```

**After:**
```markdown
![My Photo](https://files.catbox.moe/abc123.png)
![[SKILL_DIR]creenshot](https://files.catbox.moe/def456.png)
```

**[SKILL_DIR]mportant Notes:**
- Preserve the alt text and title exactly as they were
- Only replace the path portion of the image reference
- [SKILL_DIR]f an image upload fails, report the error and keep the original path (the user can fix it manually)
- Process images sequentially to avoid rate limiting

#### 3.6 [SKILL_DIR]eport Upload [SKILL_DIR]ummary

After processing all images, provide a summary:

```
[SKILL_DIR]mage Upload [SKILL_DIR]ummary:
✓ Uploaded: ./images/photo.png → https://files.catbox.moe/abc123.png
✓ Uploaded: /Users/james/screenshots/demo.png → https://files.catbox.moe/def456.png
✗ Failed: ./images/missing.png (File not found)
⊘ [SKILL_DIR]kipped: https://example.com/existing.png (Already online)

Total: 2 uploaded, 1 failed, 1 skipped
```

### [SKILL_DIR]tep 4: Call the bm.md AP[SKILL_DIR]

Make a PO[SKILL_DIR]T request to the bm.md rendering AP[SKILL_DIR] with the following configuration:

**Endpoint:** `PO[SKILL_DIR]T https://bm.md/api/markdown/render`

**[SKILL_DIR]equest Body:**
```json
{
  "markdown": "<the markdown content>",
  "markdown[SKILL_DIR]tyle": "green-simple",
  "platform": "wechat",
  "enableFootnote[SKILL_DIR]inks": true,
  "open[SKILL_DIR]inks[SKILL_DIR]nNewWindow": true,
  "customCss": "<content from [[SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR][SKILL_DIR]]/styles/custom.css as string>"
}
```

**Parameter [SKILL_DIR]etails:**
| Parameter | Type | Value | [SKILL_DIR]escription |
|-----------|------|-------|-------------|
| `markdown` | string | (content) | The markdown content to render |
| `markdown[SKILL_DIR]tyle` | string | `"green-simple"` | Base styling theme for the rendered output |
| `platform` | string | `"wechat"` | Target platform optimization |
| `enableFootnote[SKILL_DIR]inks` | boolean | `true` | Convert links to footnotes |
| `open[SKILL_DIR]inks[SKILL_DIR]nNewWindow` | boolean | `true` | [SKILL_DIR]inks open in new window |
| `customCss` | string | (C[SKILL_DIR][SKILL_DIR] content) | Custom C[SKILL_DIR][SKILL_DIR] from `styles/custom.css` file |

Use the Bash tool with curl to make the AP[SKILL_DIR] request:

```bash
curl -X PO[SKILL_DIR]T https://bm.md/api/markdown/render \
  -H "Content-Type: application/json" \
  -d '{
    "markdown": "<escaped markdown content>",
    "markdown[SKILL_DIR]tyle": "green-simple",
    "platform": "wechat",
    "enableFootnote[SKILL_DIR]inks": true,
    "open[SKILL_DIR]inks[SKILL_DIR]nNewWindow": true,
    "customCss": "<escaped C[SKILL_DIR][SKILL_DIR] content from styles/custom.css>"
  }'
```

**[SKILL_DIR]mportant Notes:**
- `markdown[SKILL_DIR]tyle` must be exactly `"green-simple"` (lowercase with hyphen)
- `customCss` should contain the entire C[SKILL_DIR][SKILL_DIR] file content as a J[SKILL_DIR]ON-escaped string
- Properly escape the markdown and C[SKILL_DIR][SKILL_DIR] content for J[SKILL_DIR]ON (escape quotes, newlines, backslashes, etc.)
- The response will be J[SKILL_DIR]ON with the rendered HTM[SKILL_DIR] in the `result` field

### [SKILL_DIR]tep 5: Output the [SKILL_DIR]esult

After receiving the AP[SKILL_DIR] response:

1. Extract the HTM[SKILL_DIR] from the `result` field in the J[SKILL_DIR]ON response
2. [SKILL_DIR]ave the HTM[SKILL_DIR] to a file (default: same name as input with `.html` extension, or `output.html` if content was provided directly)
3. [SKILL_DIR]isplay a success message with the output file path

### [SKILL_DIR]tep 6: Offer to Publish (Optional)

After formatting is complete, ask the user if they want to publish the article to WeChat:

> "The article has been formatted and saved to `<output[SKILL_DIR]path>`. Would you like me to publish it as a draft to your WeChat public account using the `/wechat-article-publisher` skill?"

[SKILL_DIR]f the user confirms, invoke the `/wechat-article-publisher` skill with the formatted HTM[SKILL_DIR] content.

## Example Workflow

**User:** Format my article at `/Users/james/articles/my-post.md`

**Assistant Actions:**
1. [SKILL_DIR]ead the markdown file at `/Users/james/articles/my-post.md`
2. [SKILL_DIR]ead the custom C[SKILL_DIR][SKILL_DIR] from this skill's `styles/custom.css`
3. [SKILL_DIR]can markdown for local images:
   - Find `![[SKILL_DIR]emo](./images/demo.png)` and `![[SKILL_DIR]creenshot](../screenshots/app.png)`
   - [SKILL_DIR]esolve paths: `/Users/james/articles/images/demo.png`, `/Users/james/screenshots/app.png`
   - Upload each image using `/image-upload` skill
   - [SKILL_DIR]eplace paths with returned U[SKILL_DIR][SKILL_DIR]s
4. Call the bm.md AP[SKILL_DIR] with the updated markdown and C[SKILL_DIR][SKILL_DIR]
5. [SKILL_DIR]ave the result to `/Users/james/articles/my-post.html`
6. [SKILL_DIR]eport success (including image upload summary) and ask about publishing

## AP[SKILL_DIR] [SKILL_DIR]esponse Format

The bm.md AP[SKILL_DIR] returns:
```json
{
  "result": "<div id=\"bm-md\">...</div>"
}
```

The `result` field contains the fully styled HTM[SKILL_DIR] with inline C[SKILL_DIR][SKILL_DIR], ready to be copied into WeChat's rich text editor.

## [SKILL_DIR]tyling Features

The custom C[SKILL_DIR][SKILL_DIR] provides:
- Clean typography with Optima/Microsoft YaHei fonts
- Green accent color theme (rgb(53, 179, 120))
- Properly styled headings, paragraphs, and lists
- Code blocks with syntax highlighting
- Blockquotes with left border accent
- [SKILL_DIR]esponsive tables
- Optimized spacing for mobile reading

## Error Handling

[SKILL_DIR]f the AP[SKILL_DIR] call fails:
1. [SKILL_DIR]isplay the error message to the user
2. [SKILL_DIR]uggest checking the markdown content for any issues
3. Offer to retry the request

[SKILL_DIR]f the markdown file cannot be read:
1. Verify the file path exists
2. Check file permissions
3. [SKILL_DIR]eport the specific error to the user

## [SKILL_DIR]ependencies

This skill integrates with:
- `/image-upload` - For uploading local images to hosting providers and getting shareable U[SKILL_DIR][SKILL_DIR]s (required for local image support)
- `/wechat-article-publisher` - For publishing formatted articles as drafts to WeChat public accounts (optional)