wechat-article

WeChat Article Converter

概要

Markdown 記事を、テーマに合わせたスタイルとインライン CSS を適用した、WeChat 公式アカウント（微信公众号）対応の HTML 形式に変換します。このスキルでは、md_to_wechat.py スクリプトを使用して、変換プロセス全体を自動で処理します。

主な機能： 標準的な Markdown を、プロフェッショナルなスタイルの WeChat 対応 HTML に変換します。

ワークフロー

ステップ 1：ユーザーのリクエストを確認する

ユーザーが以下を依頼した場合、このスキルを実行します。

• Markdown を WeChat 形式に変換する
• 「微信公众号格式に変換」
• 「WeChat 記事を作成」
• 「公式アカウント向けにレイアウトを整える」
• 記事に WeChat のスタイルを適用する

ステップ 2：必要な情報を収集する

必須：

• 入力 Markdown ファイルのパス（ユーザーのリクエストまたは現在のディレクトリから取得）

必ずテーマの選択をユーザーに尋ねてください： AskUserQuestion ツールを使用して、テーマの選択肢を提示し、ユーザーに選んでもらいます。

以下の 3 つのテーマを提示します。

選択肢	テーマ名	適した用途
default	プロフェッショナルブルー	技術記事、チュートリアル、一般的なコンテンツ
orange	活気のあるオレンジ	スポーツ、グルメ、エンターテインメント、プロモーション
grid	グリッドテーマ	番号バッジとアニメーション効果付き。さわやかな緑／落ち着いた青の配色に対応

例外： ユーザーがリクエストでテーマを明示的に指定した場合は、テーマの選択を省略します。

重要： ユーザーが「grid」テーマを選んだ場合は、色の好みを尋ねてください。

• さわやかな緑 (green) - #52c41a、ライフスタイル、健康、環境に関する内容に適しています
• 落ち着いた青 (blue) - #007AFF、テクノロジー、ビジネス、専門的な内容に適しています

追加オプション（必要に応じて質問）：

• WeChat のヘッダーに表示する記事タイトル（デフォルト：なし）
• WeChat のヘッダー／フッターを含めるか（デフォルト：はい）

ステップ 3：変換を実行する

重要： スキルのスクリプトには、必ず絶対パスを使用してください。

python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py <input.md> [output.html] [options]

ブラウザーでコピーボタンを表示するため、必ず --preview フラグを使用してください。

1. ブラウザーでプレビューする基本的な変換（推奨）：

   python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py input.md --theme <selected-theme> --preview
   

2. タイトルを指定してブラウザーでプレビューする場合：

   python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py input.md --theme <theme> --title "<article-title>" --preview
   

3. プレビュー付きのコンテンツのみ（WeChat の要素なし）：

   python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py input.md --theme <theme> --no-header-footer --preview
   

注： --preview フラグを指定すると、以下を含むページがブラウザーで自動的に開きます。

• 記事のプレビュー
• HTML をコピーするための「复制 HTML 代码」ボタン
• WeChat エディターに貼り付ける手順
• スタイル適用後の記事のビジュアルプレビュー

ステップ 4：結果をユーザーに提示する

必ず以下を行ってください。

1. 変換が正常に完了したことを確認する
2. 使用したテーマを示す
3. 出力ファイルの保存場所を示す
4. 生成された HTML のプレビューを表示する（最初の約 30 行）
5. HTML をコピーして WeChat エディターに貼り付けられることをユーザーに伝える

やり取りの例

例 1：テーマ選択とブラウザープレビューを行う標準的なワークフロー

User: "把 article.md 转成微信公众号格式"

Claude: [Uses AskUserQuestion]
"请选择文章主题风格：
• default - 专业蓝色（技术文章、教程、通用内容）
• orange - 活力橙（运动、美食、娱乐、促销活动）
• grid - 格子主题（带序号徽章、动画效果，支持清新绿/大气蓝配色）"

User: [Selects] "grid"

Claude: [Uses AskUserQuestion]
"请选择格子主题配色：
• green - 清新绿 (#52c41a) - 生活方式、健康、环保
• blue - 大气蓝 (#007AFF) - 科技、商务、专业内容"

User: [Selects] "blue"

Claude: [Executes] python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py article.md --theme grid --grid-color blue --preview
Claude: ✅ 使用格子主题（大气蓝）转换成功！浏览器已打开预览页面，点击"复制 HTML 代码"按钮即可复制到微信公众号编辑器。

例 2：ユーザーがテーマを直接指定する場合

User: "转换成微信公众号文章，用默认主题"

Claude: [Skips theme selection, user already specified]
Claude: [Executes] python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py article.md --theme default --preview
Claude: ✅ 使用专业蓝色主题转换成功！浏览器已打开预览页面。

実装メモ

利用可能なテーマ

このスキルには、現在 3 つのテーマが含まれています。

1. default（プロフェッショナルブルー） - プロフェッショナルな青のテーマ

   • メインカラー：#1e6bb8
   • 適した用途：技術記事、チュートリアル、一般的なコンテンツ

2. orange（活気のあるオレンジ） - 活気のあるオレンジのテーマ

   • メインカラー：#e67e22
   • 適した用途：スポーツ、グルメ、エンターテインメント、プロモーション

3. grid（グリッドテーマ） - 番号バッジとアニメーションを備えたグリッドテーマ

   • デフォルトの色：#52c41a（さわやかな緑）
   • 代替色：#007AFF（落ち着いた青）
   • 特徴：番号付き見出しバッジ、回転アニメーション、リストの自動ネスト
   • 適した用途：あらゆる種類のコンテンツ。トピックに応じて色を選択してください
     • 緑：ライフスタイル、健康、環境に関するトピック
     • 青：テクノロジー、ビジネス、専門的なコンテンツ

依存関係

このスクリプトには、以下が必要です。

• markdown>=3.5.0 - Markdown の解析
• beautifulsoup4>=4.12.0 - HTML の処理
• pygments>=2.16.0 - コードのシンタックスハイライト

実行前に依存関係がインストールされているか確認してください。インストールされていない場合は、以下を実行してください。

pip3 install markdown beautifulsoup4 pygments

トラブルシューティング

問題： 依存関係が見つからない
解決策： pip3 install markdown beautifulsoup4 pygments でインストールします

問題： スクリプトが見つからない
解決策： 絶対パスを使用します：~/.claude/skills/wechat-article/scripts/md_to_wechat.py

問題： WeChat のスタイルが表示されない
解決策： インラインスタイルを含む HTML 全体をユーザーがコピーするようにしてください

リソース

scripts/md_to_wechat.py

メインの変換スクリプトです。ユーザーのリクエストに応じた適切な引数を指定して実行します。

references/themes.md

テーマの違いをユーザーが理解できるよう支援する際に参照する、テーマの詳細な仕様です。

assets/examples/sample.md

サポートされているすべての機能を紹介する記事の例です。テストや、ユーザーに機能を紹介する際に使用してください。