Publier sur un compte officiel WeChat en un clic avec Claude Skills

Si vous avez deja gere un compte officiel WeChat, vous avez certainement vecu cette experience : vous mettez soigneusement en forme un article dans votre editeur, vous le copiez dans l'interface d'administration du compte officiel, et vous decouvrez que la mise en forme est completement detruite ; les images doivent etre re-uploadees une par une ; les blocs de code se transforment en texte brut ; les espacements et tailles de police soigneusement ajustes doivent etre reconfigures. A chaque publication d'un article technique, la mise en forme seule prend une demi-heure.

J'ecris mes articles de blog en Markdown depuis longtemps. Pour resoudre ce probleme, j'ai mis en place un workflow de publication automatisee base sur Claude Skills. Desormais, l'ensemble du processus se resume a une seule phrase -- "Publie cet article sur le compte officiel", et Claude effectue automatiquement le rendu, la mise en forme, l'upload des images et la soumission du brouillon.

Cet article documente l'ensemble du processus de mise en place, que vous pouvez reproduire directement.

Si vous ne savez pas encore ce que sont les Skills, nous vous recommandons de lire d'abord Qu'est-ce que Claude Skills ; si vous souhaitez en savoir plus sur la creation et l'utilisation des Skills, vous pouvez consulter le Guide pratique de Claude Skills.

Prerequis

Avant de commencer, assurez-vous de disposer des elements suivants :

Chemin d'acces aux identifiants de l'API WeChat : connectez-vous a mp.weixin.qq.com puis allez dans le menu de gauche "Parametres et developpement" puis "Configuration de base" puis copiez l'ID developpeur (AppID) et le secret developpeur (AppSecret).

Remarque : l'AppSecret ne s'affiche qu'une seule fois lors de la reinitialisation, conservez-le precieusement. Vous devez egalement ajouter l'adresse IP de votre serveur a la liste blanche dans "Configuration de base".

Installation du Skill

baoyu-post-to-wechat est heberge sur GitHub et s'installe en une seule commande via Claude Code :

claude skill install jimliu/baoyu-skills --skill baoyu-post-to-wechat

Une fois l'installation terminee, la structure de fichiers suivante est generee dans votre projet :

your-project/
├── .agents/skills/
│   └── baoyu-post-to-wechat/
│       ├── SKILL.md              # Skill 核心指令
│       ├── scripts/
│       │   ├── wechat-api.ts     # API 发布脚本
│       │   ├── wechat-browser.ts # 浏览器发布脚本
│       │   └── md/               # Markdown 渲染引擎
│       │       ├── render.ts
│       │       └── themes/       # 主题 CSS 文件
│       └── references/           # 详细参考文档
└── skills-lock.json              # Skill 版本锁定

skills-lock.json enregistre la source et le hash de version du Skill installe, garantissant que tous les membres de l'equipe utilisent la meme version :

{
  "version": 1,
  "skills": {
    "baoyu-post-to-wechat": {
      "source": "jimliu/baoyu-skills",
      "sourceType": "github",
      "computedHash": "cb28e409..."
    }
  }
}

Configuration

La configuration se fait en deux etapes : les identifiants API et les preferences.

Identifiants API

Creez le fichier .baoyu-skills/.env et renseignez les identifiants de votre compte officiel WeChat :

# 项目级配置（仅当前项目生效）
mkdir -p .baoyu-skills
cat > .baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

Vous pouvez egalement les placer dans votre repertoire utilisateur pour les partager entre tous vos projets :

# 用户级配置（所有项目生效）
mkdir -p ~/.baoyu-skills
cat > ~/.baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

Ordre de priorite de la recherche des identifiants : variables d'environnement > .baoyu-skills/.env au niveau du projet > ~/.baoyu-skills/.env au niveau utilisateur.

Avertissement de securite : .baoyu-skills/.env contient des informations sensibles. Veillez a ajouter .baoyu-skills/ a votre .gitignore pour eviter tout commit accidentel dans le depot.

Preferences (EXTEND.md)

Configurez vos preferences par defaut dans .baoyu-skills/baoyu-post-to-wechat/EXTEND.md. Voici ma propre configuration :

# WeChat Publishing Preferences

## Default Settings

- default_theme: yudesk
- default_author: yux

Options de configuration disponibles :

Ordre de priorite de la configuration : parametres CLI > frontmatter de l'article > EXTEND.md > valeurs par defaut du Skill.

Rediger un article

Il suffit d'ecrire votre article au format Markdown standard. Mon blog utilise des composants MDX personnalises (BlogImage, QuoteCard, VideoEmbed, etc.), et le Skill les convertit automatiquement en Markdown standard lors de la publication, sans intervention manuelle.

Regles de conversion :

De plus, les liens internes du blog (/blog/..., /docs/...) sont automatiquement convertis en texte brut, et les instructions import/export sont supprimees. Cela signifie que vous pouvez publier directement vos fichiers MDX de blog sans avoir a maintenir deux versions du contenu.

Frontmatter de l'article

Les champs suivants du frontmatter sont utilises lors de la publication :

---
title: 文章标题
author: 作者名
description: 文章摘要（用于公众号的文章摘要）
coverImage: cover.png  # 封面图（本地路径或 URL）
---

Si aucune image de couverture n'est fournie, le Skill la recherche dans l'ordre suivant : coverImage/featureImage/cover/image dans le frontmatter, puis imgs/cover.png dans le repertoire de l'article, puis la premiere image de l'article.

Publication

Une fois tout en place, la publication est tres simple.

Methode 1 : Publication conversationnelle

Dites simplement dans Claude Code :

帮我把 content/blog/my-article.mdx 发到公众号

Claude identifie automatiquement l'intention, charge le Skill baoyu-post-to-wechat et execute le processus : chargement des preferences, detection du type de fichier, rendu HTML, upload des images, soumission du brouillon.

Methode 2 : Publication en ligne de commande

Vous pouvez egalement appeler le script directement :

npx -y bun .agents/skills/baoyu-post-to-wechat/scripts/wechat-api.ts article.md --author yux

Parametres disponibles :

Analyse du processus de publication

Lors de l'execution de la publication, les etapes suivantes se deroulent en arriere-plan :

Markdown 文件
    │
    ▼
① MDX 预处理：BlogImage → ![]()，QuoteCard → blockquote ...
    │
    ▼
② Markdown 渲染：marked 引擎 + highlight.js 代码高亮
    │
    ▼
③ 主题应用：base.css + yudesk.css，CSS 变量解析
    │
    ▼
④ CSS 内联：juice 将 <style> 转为 inline style（微信要求）
    │
    ▼
⑤ 图片上传：遍历 <img>，上传到微信 CDN，替换 src
    │
    ▼
⑥ 封面处理：上传封面图，获取 thumb_media_id
    │
    ▼
⑦ 提交草稿：调用 draft/add API，保存到公众号草稿箱

Quelques details techniques importants :

• Inlining CSS : le compte officiel WeChat ne prend pas en charge les balises <style> ni les feuilles de style externes. Tous les styles CSS doivent etre inlines dans l'attribut style des elements. Le Skill utilise la bibliotheque juice pour effectuer cette operation automatiquement, tout en remplacant les variables CSS (par exemple var(--md-primary-color) devient #0F4C81) et les expressions calc() par leurs valeurs reelles.
• Upload des images : WeChat exige que toutes les images des articles soient stockees sur le CDN WeChat. Le Skill parcourt chaque balise <img> du HTML, uploade les images locales ou les images provenant d'URL externes vers la mediatheque WeChat, puis remplace le src original par l'URL du CDN WeChat.
• Elements de marque : lors de la publication, des images d'en-tete et de pied de page de marque sont automatiquement ajoutees pour maintenir la coherence visuelle des articles du compte officiel.

Avance : themes personnalises

Le Skill integre 4 themes : default (classique), grace (elegant), simple (epure) et yudesk (blog technique). Si vous souhaitez creer votre propre theme, il suffit d'ajouter un fichier CSS dans le repertoire themes/.

Prenons l'exemple du theme yudesk que j'utilise, dont la philosophie de conception est "epure, professionnel, adapte au code" :

/* yudesk 主题核心样式 */

/* 标题：居中、深色 */
h1, h2 { text-align: center; color: #1a1a1a; font-weight: bold; }

/* 段落：适当字距，灰色文字 */
p { letter-spacing: 0.05em; color: #555; }

/* 引用块：左侧主色边线 */
blockquote { border-left: 3px solid var(--md-primary-color); background: var(--blockquote-background); }

/* 代码块：GitHub 风格，浅灰背景 */
pre.code__pre { background: #f6f8fa !important; border: 1px solid #e1e4e8; border-radius: 4px; }

/* 行内代码：主色调 */
code { color: var(--md-primary-color); background: rgba(15, 76, 129, 0.08); }

Etapes pour creer un theme personnalise :

1. Creez un fichier my-theme.css dans .agents/skills/baoyu-post-to-wechat/scripts/md/themes/
2. Inspirez-vous de yudesk.css pour ecrire les styles (en redefinissant les elements h1~h6, p, blockquote, pre, code, table, etc.)
3. Definissez default_theme: my-theme dans EXTEND.md, ou specifiez --theme my-theme lors de la publication

Les fichiers CSS de theme peuvent utiliser les variables CSS var(--md-primary-color), var(--md-font-size), etc. Le moteur de rendu les remplacera automatiquement par leurs valeurs reelles lors de la phase d'inlining CSS.

Problemes rencontres

Voici quelques problemes rencontres lors de l'utilisation reelle.

Retour a la ligne des blocs de code sur mobile

Le traitement des blocs de code sur mobile par le compte officiel WeChat est particulier. Si le bloc de code est configure avec white-space: pre (conservation des retours a la ligne d'origine), les longues lignes de code debordent horizontalement ; si vous utilisez pre-wrap (retour a la ligne automatique), l'indentation et le formatage du code sont alteres.

La solution du theme yudesk est de conserver white-space: pre tout en definissant overflow-x: auto, permettant au bloc de code de defiler horizontalement. De plus, la hauteur est limitee a max-height: 500px pour eviter que les blocs de code tres longs n'occupent la totalite de l'ecran sur mobile.

Troncature du resume trop long

Le resume des articles du compte officiel WeChat est limite a 128 caracteres. Si la description de l'article est trop longue, le Skill effectue une troncature intelligente : il recherche le signe de ponctuation chinois le plus proche (point, virgule, point-virgule) aux alentours de 120 caracteres et coupe a cet endroit, evitant ainsi de tronquer au milieu d'un mot.

L'image de couverture est obligatoire

Les articles de type news (articles standards) doivent obligatoirement comporter une image de couverture (thumb_media_id), sans quoi une erreur est renvoyee. Il est recommande de placer une image imgs/cover.png dans le repertoire de l'article comme couverture par defaut, ou de specifier coverImage dans le frontmatter.

Compatibilite des variables CSS

Le moteur de rendu de WeChat ne prend pas en charge les variables CSS (var(...)), ni les expressions calc(). Le moteur de rendu du Skill remplace toutes les variables par leurs valeurs reelles lors de la phase d'inlining CSS :

var(--md-primary-color) → #0F4C81
hsl(var(--foreground))  → #3f3f3f
calc(16px * 1.3)        → 21px

Cette etape est effectuee automatiquement, sans intervention manuelle.

Resume du processus complet

Le processus complet de la redaction a la publication :

Apres la publication, l'article est sauvegarde dans les brouillons du compte officiel (il n'est pas publie directement). Vous pouvez le previsualiser et le modifier dans l'interface d'administration avant de le publier officiellement.

Lectures complementaires

• Qu'est-ce que Claude Skills -- Comprendre les concepts fondamentaux des Skills et l'architecture de divulgation progressive
• Guide pratique de Claude Skills -- Apprendre les meilleures pratiques pour activer, installer et creer des Skills
• Guide complet de Claude Subagent -- Comprendre l'utilisation combinee des Skills et des Subagents