Claudeコードは、WeChatパブリックアカウントの記事用に最適化された美しいスタイルのHTMLにマークダウンファイルをフォーマットするスキルです。

##特徴

• Markdownをbm.mdレンダリングサービスを使用してスタイル化されたHTMLに変換
• 自動ローカル画像アップロード - マークダウンのローカル画像を検出し、それらをアップロードし、オンラインURLでパスを置き換える
• WeChatの記事の読みやすさのために最適化されたカスタムCSSスタイリング
• きれいなタイポグラフィーが付いている緑のアクセント色の主題
• GFM(GitHub Flavored Markdown)構文のサポート
• 緑の簡単なテーマで強調するコードの構文
• 自動脚注リンク変換
• WeChat記事パブリッシャーとのオプション統合

インストール

あなたのClaudeコードのインストールにこのスキルを追加します。

または HTTPS 経由で:

使用法

クロードコードのスキルを呼び起こします。

以下のいずれかを指定します。

• マークダウンファイルへのパス: /path/to/my-article.md
• または直接マークダウンコンテンツを貼り付けるか

例

スキルは:

1. マークダウンファイルを読む
2. カスタムWeChat最適化スタイリングを適用 3.ローカル画像の検出とアップロード(オンラインURLでパスを交換)
3. HTML をレンダリングするために bm.md API を呼び出す 5。 フォーマットされたHTMLを同じディレクトリに保存する
4. WeChatアカウントへのドラフトとして公開するオファー

WeChat Article Formatter Skill

A Claude Code skill that formats markdown files into beautifully styled HTML optimized for WeChat public account articles.

Features

• Converts Markdown to styled HTML using bm.md rendering service
• Automatic local image upload - Detects local images in markdown, uploads them, and replaces paths with online URLs
• Custom CSS styling optimized for WeChat article readability
• Green accent color theme with clean typography
• Support for GFM (GitHub Flavored Markdown) syntax
• Code syntax highlighting with green-simple theme
• Automatic footnote link conversion
• Optional integration with WeChat article publisher

Installation

Add this skill to your Claude Code installation:

claude skill add [email protected]:iamzifei/wechat-article-formatter-skill.git

Or via HTTPS:

claude skill add https://github.com/iamzifei/wechat-article-formatter-skill.git

Usage

Invoke the skill in Claude Code:

/wechat-article-formatter

Then provide either:

• A path to your markdown file: /path/to/my-article.md
• Or paste markdown content directly

Example

/wechat-article-formatter

Please format my article at ~/articles/tech-post.md

The skill will:

1. Read your markdown file
2. Apply custom WeChat-optimized styling
3. Detect and upload local images (replacing paths with online URLs)
4. Call the bm.md API to render the HTML
5. Save the formatted HTML to the same directory
6. Offer to publish as a draft to your WeChat account

Image Handling

The skill automatically handles local images in your markdown:

![My Photo](./images/photo.png)           # Relative path - will be uploaded
![Screenshot](/Users/james/demo.png)      # Absolute path - will be uploaded
![Logo](https://example.com/logo.png)     # Online URL - skipped (already online)

Supported image formats: PNG, JPG, JPEG, GIF, WebP, SVG

Images are uploaded using the /image-upload skill and replaced with shareable URLs (e.g., Catbox, ImgBB).

Output

The formatted HTML includes:

• Inline CSS styles (no external dependencies)
• WeChat-compatible markup
• Properly styled headings, paragraphs, lists, and code blocks
• Responsive design for mobile reading

Customization

Modifying Styles

Edit styles/custom.css to customize the appearance:

• Primary color: rgb(53, 179, 120) (green accent)
• Font family: Optima, Microsoft YaHei, PingFangSC-regular
• Base font size: 16px (body), 15px (paragraphs)

API Configuration

The skill uses the following bm.md API settings: