AI Agent Hub
Back to skills
WeChat Article HTML Adapter icon

WeChat Article HTML Adapter

Content Creation Updated 2026.08.30

Paste the following prompt into your AI chat to install this skill:

Please install @user_d0123732/wechat-article-adapter according to https://skillhub.cn/install/skillhub.md.

About this skill

The Problem

WeChat's article editor strips or mutates common HTML/CSS: external styles, class/id, Flex/Grid, pseudo-elements, gradients, floats, and default table borders can all break. Directly generating web-style HTML often causes broken layout on mobile, white separator lines, and code blocks collapsing into one line.

How the Skill Works

This skill encodes WeChat article layout constraints into executable generation rules:
- Inline all styles: avoid class and external stylesheets, use style="".
- Use component templates: quote boxes, data cards, dark highlight boxes, and colored note blocks follow fixed structures.
- Avoid compatibility pitfalls: do not nest table inside dark containers, use span for tag components, stack flowcharts vertically, and render code blocks line by line with <br> plus &nbsp; for indentation.
- Fix typography parameters: body text 15px with line-height: 2, subheadings 17px, section headings 20px, and a container with max-width: 680px.

Boundaries

It is suitable for converting articles, technical notes, and content into paste-ready WeChat HTML. It is not intended for web pages or mini-program pages that rely on modern CSS layout. External assets and links still need to follow WeChat material restrictions.

Use Cases

  • A technical blogger converts a Markdown article into a WeChat post while preserving code blocks, note boxes, and data cards.
  • An editor rewrites a long product guide into mobile-friendly WeChat HTML using fixed font sizes and line heights.
  • An indie developer publishes release notes with feature highlights, migration steps, and FAQs as paste-ready WeChat HTML.
  • An operations lead turns research data into 2x2 data cards and colored note boxes without breaking the layout.

Best For

  • Technical writers who publish engineering notes as WeChat articles.
  • Editorial staff responsible for WeChat article layout and visual consistency.
  • Indie developers who ship product updates, tutorials, and migration guides.
  • Content operations leads who turn data insights into WeChat article cards.