WeChat Official Account Formatter

The Problem

WeChat Official Accounts accept only a limited subset of HTML and CSS. Exported Markdown, editor output, or front-end page styles often lose class, id, <div>, flex, and grid. Code blocks, callouts, and music components can also break when tags or image domains are outside the allowed list. This skill targets those compatibility issues by converting Markdown into inline-style HTML that can be pasted directly into the Official Account editor, while generating a summary and an ending comment prompt.

How It Works

• Summary generation: Creates a 35–120-character summary using an emotional hook, core content, and value promise, adapted to tutorials, opinion pieces, personal writing, product notes, and similar article types.
• Structure conversion: Maps headings, paragraphs, quotes, lists, code blocks, images, and links to compatible tags; plain lists are usually split into multiple <p> elements, and tables are converted to paragraph or card-like paragraphs.
• Style injection: Uses inline styles only and avoids blacklisted CSS such as position, float, flex, grid, transform, and calc().
• Component support: Supports ::: tip and ::: warning callout containers, plus mpvoice and mpmusic music components; ordinary images should come from mmbiz.qpic.cn, while music covers may use y.gtimg.cn.
• Sanitized output: Removes disallowed tags, attributes, and styles in a second pass, then outputs only the summary and HTML without explaining the conversion process.

Boundaries

It fits articles that need Official Account compatibility, including technical tutorials, opinion pieces, and product documentation. If the content depends on complex responsive layouts, custom JavaScript, non-WeChat image domains, or external CSS, the skill may degrade output or replace unsupported elements, so it is not intended for exact reproduction of web page visuals.