Publicar en la cuenta oficial de WeChat con un solo comando usando Claude Skills

Si alguna vez administraste una cuenta oficial de WeChat, seguramente conoces este proceso: das formato cuidadosamente a un artículo en tu editor, lo copias al panel de administración de la cuenta oficial, y descubres que el formato se rompió por completo; las imágenes hay que volver a subirlas una por una; los bloques de código se convierten en texto plano; el espaciado y los tamaños de fuente que habías ajustado necesitan configurarse de nuevo. Cada vez que publicas un artículo técnico, solo el formato te lleva media hora.

Yo siempre he escrito mi blog en Markdown, y para resolver este problema, armé un flujo de publicación automatizado basado en Claude Skills. Ahora todo el proceso se reduce a una sola frase: "Publica este artículo en la cuenta oficial", y Claude se encarga automáticamente del renderizado, formato, carga de imágenes y envío del borrador.

Este artículo documenta todo el proceso de configuración para que puedas replicarlo directamente.

Si todavía no sabes qué son los Skills, te recomiendo leer primero ¿Qué son Claude Skills?; si quieres conocer más sobre cómo crear y usar Skills, puedes consultar la Guía práctica de Claude Skills.

Requisitos previos

Antes de comenzar, asegúrate de contar con lo siguiente:

Ruta para obtener las credenciales de la API de WeChat: inicia sesión en mp.weixin.qq.com → menú izquierdo "Configuración y desarrollo" → "Configuración básica" → copia el ID de desarrollador (AppID) y la contraseña de desarrollador (AppSecret).

Nota: El AppSecret solo se muestra una vez al restablecerlo, guárdalo de forma segura. También necesitas agregar la IP de tu servidor a la lista blanca en "Configuración básica".

Instalación del Skill

baoyu-post-to-wechat está alojado en GitHub y se instala con un solo comando a través de Claude Code:

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

Una vez instalado, se generará la siguiente estructura de archivos en tu proyecto:

your-project/
├── .agents/skills/
│   └── baoyu-post-to-wechat/
│       ├── SKILL.md              # Instrucciones principales del Skill
│       ├── scripts/
│       │   ├── wechat-api.ts     # Script de publicación por API
│       │   ├── wechat-browser.ts # Script de publicación por navegador
│       │   └── md/               # Motor de renderizado Markdown
│       │       ├── render.ts
│       │       └── themes/       # Archivos CSS de temas
│       └── references/           # Documentación de referencia detallada
└── skills-lock.json              # Bloqueo de versión del Skill

skills-lock.json registra el origen y el hash de versión de los Skills instalados, asegurando que todos los miembros del equipo usen la misma versión:

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

Configuración

La configuración se divide en dos pasos: credenciales de la API y preferencias.

Credenciales de la API

Crea el archivo .baoyu-skills/.env e ingresa las credenciales de tu cuenta oficial de WeChat:

# Configuración a nivel de proyecto (solo para el proyecto actual)
mkdir -p .baoyu-skills
cat > .baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=tuAppID
WECHAT_APP_SECRET=tuAppSecret
EOF

También puedes colocarlo en el directorio de usuario para compartirlo entre todos los proyectos:

# Configuración a nivel de usuario (para todos los proyectos)
mkdir -p ~/.baoyu-skills
cat > ~/.baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=tuAppID
WECHAT_APP_SECRET=tuAppSecret
EOF

Prioridad de búsqueda de credenciales: variables de entorno > .baoyu-skills/.env a nivel de proyecto > ~/.baoyu-skills/.env a nivel de usuario.

Nota de seguridad: .baoyu-skills/.env contiene información sensible, asegúrate de agregar .baoyu-skills/ a tu .gitignore para evitar que se suba accidentalmente al repositorio.

Preferencias (EXTEND.md)

Configura tus preferencias predeterminadas en .baoyu-skills/baoyu-post-to-wechat/EXTEND.md. Mi configuración personal:

# WeChat Publishing Preferences

## Default Settings

- default_theme: yudesk
- default_author: yux

Opciones de configuración disponibles:

Prioridad de la configuración: parámetros CLI > frontmatter del artículo > EXTEND.md > valores predeterminados del Skill.

Escribir artículos

Solo escribe tus artículos en formato Markdown estándar. Mi blog usa componentes MDX personalizados (BlogImage, QuoteCard, VideoEmbed, etc.), y el Skill los convierte automáticamente a Markdown estándar al momento de publicar, sin necesidad de procesamiento manual.

Reglas de conversión:

Además, los enlaces internos del blog (/blog/..., /docs/...) se convierten automáticamente en texto plano, y las sentencias import/export se eliminan. Esto significa que puedes publicar directamente los archivos MDX de tu blog, sin necesidad de mantener dos copias del contenido.

frontmatter del artículo

Los siguientes campos del frontmatter se utilizan para la publicación:

---
title: Título del artículo
author: Nombre del autor
description: Resumen del artículo (usado como resumen en la cuenta oficial)
coverImage: cover.png  # Imagen de portada (ruta local o URL)
---

Si no proporcionas una imagen de portada, el Skill la buscará en el siguiente orden: coverImage/featureImage/cover/image en el frontmatter → imgs/cover.png en el directorio del artículo → primera imagen del artículo.

Publicación

Una vez que todo esté listo, publicar es muy sencillo.

Opción 1: Publicación conversacional

En Claude Code simplemente di:

Publica content/blog/my-article.mdx en la cuenta oficial

Claude identificará automáticamente la intención, cargará el Skill baoyu-post-to-wechat y ejecutará el flujo: cargar preferencias → determinar tipo de archivo → renderizar HTML → subir imágenes → enviar borrador.

Opción 2: Publicación por línea de comandos

También puedes llamar directamente al script:

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

Parámetros disponibles:

Análisis del flujo de publicación

Al ejecutar la publicación, se llevan a cabo los siguientes pasos internamente:

Archivo Markdown
    │
    ▼
① Preprocesamiento MDX: BlogImage → ![](), QuoteCard → blockquote ...
    │
    ▼
② Renderizado Markdown: motor marked + resaltado de código con highlight.js
    │
    ▼
③ Aplicación del tema: base.css + yudesk.css, resolución de variables CSS
    │
    ▼
④ CSS en línea: juice convierte <style> a inline style (requerido por WeChat)
    │
    ▼
⑤ Carga de imágenes: recorre <img>, sube al CDN de WeChat, reemplaza src
    │
    ▼
⑥ Procesamiento de portada: sube imagen de portada, obtiene thumb_media_id
    │
    ▼
⑦ Envío de borrador: llama a la API draft/add, guarda en la bandeja de borradores

Algunos detalles técnicos clave:

• CSS en línea: La cuenta oficial de WeChat no soporta etiquetas <style> ni hojas de estilo externas; todo el CSS debe estar en línea en el atributo style de cada elemento. El Skill usa la biblioteca juice para hacerlo automáticamente, al mismo tiempo que reemplaza las variables CSS (como var(--md-primary-color) → #0F4C81) y las expresiones calc() por valores reales.
• Carga de imágenes: WeChat requiere que todas las imágenes del artículo estén almacenadas en el CDN de WeChat. El Skill recorre cada etiqueta <img> en el HTML, sube las imágenes locales o de URL externas a la biblioteca de materiales de WeChat, y luego reemplaza el src original con la URL del CDN de WeChat.
• Elementos de marca: Al publicar se agregan automáticamente imágenes de encabezado y pie de marca, manteniendo la consistencia visual de los artículos de la cuenta oficial.

Avanzado: Temas personalizados

El Skill incluye 4 temas incorporados: default (clásico), grace (elegante), simple (minimalista) y yudesk (blog técnico). Si deseas crear tu propio tema, solo necesitas agregar un archivo CSS en el directorio themes/.

Tomando como ejemplo el tema yudesk que uso, su filosofía de diseño es "limpio, profesional, amigable con el código":

/* Estilos principales del tema yudesk */

/* Títulos: centrados, color oscuro */
h1, h2 { text-align: center; color: #1a1a1a; font-weight: bold; }

/* Párrafos: espaciado adecuado, texto gris */
p { letter-spacing: 0.05em; color: #555; }

/* Bloques de cita: línea lateral en color primario */
blockquote { border-left: 3px solid var(--md-primary-color); background: var(--blockquote-background); }

/* Bloques de código: estilo GitHub, fondo gris claro */
pre.code__pre { background: #f6f8fa !important; border: 1px solid #e1e4e8; border-radius: 4px; }

/* Código en línea: color primario */
code { color: var(--md-primary-color); background: rgba(15, 76, 129, 0.08); }

Pasos para crear un tema personalizado:

1. Crea un nuevo archivo my-theme.css en .agents/skills/baoyu-post-to-wechat/scripts/md/themes/
2. Usa yudesk.css como referencia para escribir los estilos (cubriendo elementos como h1~h6, p, blockquote, pre, code, table, etc.)
3. Configura default_theme: my-theme en EXTEND.md, o especifica --theme my-theme al publicar

En el CSS del tema puedes usar variables CSS como var(--md-primary-color), var(--md-font-size), etc. El motor de renderizado las reemplazará automáticamente por valores reales durante la fase de CSS en línea.

Registro de problemas encontrados

Durante el uso real surgieron algunos problemas que registro aquí.

Salto de línea en bloques de código en dispositivos móviles

La cuenta oficial de WeChat maneja los bloques de código de forma particular en dispositivos móviles. Si el bloque de código tiene white-space: pre (mantener saltos de línea originales), las líneas largas de código se desbordan horizontalmente; si se configura como pre-wrap (ajuste automático de línea), la indentación y el formato del código se rompen.

La solución del tema yudesk es mantener white-space: pre y al mismo tiempo configurar overflow-x: auto, permitiendo el desplazamiento horizontal del bloque de código. También se limita max-height: 500px para evitar que bloques de código muy largos ocupen toda la pantalla en el teléfono.

Resumen truncado por exceder el límite

El resumen de artículos de la cuenta oficial de WeChat tiene un límite de 128 caracteres. Si la description del artículo es demasiado larga, el Skill la trunca de forma inteligente: busca el signo de puntuación más cercano alrededor de los 120 caracteres (punto, coma, punto y coma), y corta en ese punto para evitar truncar en medio de una palabra.

La imagen de portada es obligatoria

Los artículos de tipo news (artículos estándar) deben incluir una imagen de portada (thumb_media_id); sin ella se produce un error directamente. Se recomienda colocar una imagen imgs/cover.png en el directorio del artículo como portada predeterminada, o especificar coverImage en el frontmatter.

Compatibilidad con variables CSS

El motor de renderizado de WeChat no soporta variables CSS (var(...)) ni expresiones calc(). El motor de renderizado del Skill reemplaza todas las variables por valores reales durante la fase de CSS en línea:

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

Este paso se realiza automáticamente, no requiere procesamiento manual.

Resumen del flujo completo

El flujo completo desde la escritura hasta la publicación:

Después de enviar, el artículo se guarda en la bandeja de borradores de la cuenta oficial (no se publica directamente); puedes previsualizarlo y editarlo en el panel de administración antes de publicarlo oficialmente.

Lecturas adicionales

• ¿Qué son Claude Skills? — Comprender los conceptos fundamentales de los Skills y su arquitectura de divulgación progresiva
• Guía práctica de Claude Skills — Aprender las mejores prácticas para activar, instalar y crear Skills
• Guía completa de Claude Subagent — Entender cómo usar Skills junto con Subagents