Publish Markdown articles to X (Twitter) Articles editor with proper formatting. Use when user wants to publish a Markdown file/URL to X Articles, or mentions "publish to X", "post article to Twitter", "X article", or wants help with X Premium article publishing. Handles cover image upload, converts

Publish X Article Publish Markdown content to X (Twitter) Articles editor, preserving formatting with rich text conversion. Automatically handles X Premium limitations by converting unsupported elements to images. Credits This skill is inspired by and based on [wshuyi/x article publisher skill](https://github.com/wshuyi/x article publisher skill). Thank you to the original author for the foundational work. Interactive Setup: Ask Subscription Type IMPORTANT : Before processing the article, ask the user about their X subscription type if not already known. Prompt the User For Chinese users: Remember the Answer Once the user answers, remember their subscription type for the rest of the session. Don't ask again unless they explicitly want to change it. X Subscription Feature Comparison Feature X Premium X Premium+ H1 headers ( ) Title only Title only H2 headers ( ) Yes Yes H3+ headers ( , etc.) No Yes Markdown tables No Yes Mermaid diagrams No No (not supported by X) Code blocks Blockquotes Blockquotes Bold, italic, links Yes Yes Lists Yes Yes Blockquotes Yes Yes Images Yes Yes Pre Processing Required by Subscription X Premium (Basic): Convert H3+ headers → H2 or bold Convert tables → PNG images Convert mermaid → PNG images X Premium+ (Plus): Keep H3+ headers as is Keep tables as is (rendered natively) Convert mermaid → PNG images (still not supported) Prerequisites Playwright MCP for browser automation User logged into X with Premium subscription Python 3.9+ with dependencies: macOS: pip install Pillow pyobjc framework Cocoa markdown Windows: pip install Pillow pywin32 clip util markdown diagram to image skill (for converting tables/mermaid to PNG via diagramless.xyz API) Scripts Located in ~/.claude/skills/publish x article/scripts/ : parse markdown.py Parse Markdown and extract structured data: Returns JSON with: title, cover image, content images (with block index for positioning), html, total blocks copy to clipboard.py Copy image or HTML to system clipboard: diagram to image.mjs (from diagram to image skill) Convert Mermaid diagrams and Markdown tables to PNG images via diagramless.xyz API: Pre Processing: Handle Unsupported Elements Before publishing, scan the Markdown for unsupported elements and convert them to images. Step 0: Analyze Content for Limitations Look for: 1. Deep headers (H3+) : , , etc. 2. Markdown tables : Lines with characters forming table structure 3. Mermaid code blocks : bash 1. Extract table to temp file cat /tmp/table.md << 'TABLE EOF' Column 1 Column 2 Column 3 Data 1 Data 2 Data 3 TABLE EOF 2. Convert to image via diagramless.xyz API node ~/.claude/skills/diagram to image/scripts/diagram to image.mjs /tmp/table.md o /tmp/table 001.png 3. Replace table in markdown with image reference ![Table description](/tmp/table 001.png) bash 1. Extract mermaid to temp file cat /tmp/diagram.mmd << 'MERMAID EOF' flowchart TD A[Start] B[Process] B C[End] MERMAID EOF 2. Convert to image via diagramless.xyz API node ~/.claude/skills/diagram to image/scripts/diagram to image.mjs /tmp/diagram.mmd o /tmp/diagram 001.png 3. Replace mermaid block in markdown with image reference ![Diagram description](/tmp/diagram 001.png) ❌ 错误做法： browser click → browser snapshot → 分析 → browser click → browser snapshot → ... ✅ 正确做法： browser click → 从返回结果中获取页面状态 → browser click → ... ✅ 可以并行：填写标题 (browser type) + 复制HTML到剪贴板 (Bash) 解析Markdown生成JSON + 生成HTML文件 ❌ 不能并行（有依赖）：必须先点击create才能上传封面图必须先粘贴内容才能插入图片理想流程（每步直接执行，不额外等待）： browser navigate → 从返回状态找create按钮 → browser click(create) → 从返回状态找上传按钮 → browser click(上传) → browser file upload → 从返回状态找应用按钮 → browser click(应用) → 从返回状态找标题框 → browser type(标题) → 点击编辑器 → browser press key(Meta+v) → ... I've adapted your article for X Premium. Here's what changed: Converted 2 tables to images Restructured 3 H3 headers to bold text for better flow Original preserved: /path/to/article.md Adapted version: /path/to/article for x.md bash Tables → PNG (auto detected as table) node ~/.claude/skills/diagram to image/scripts/diagram to image.mjs /tmp/table 1.md o /tmp/table 1.png Mermaid → PNG (auto detected as mermaid) node ~/.claude/skills/diagram to image/scripts/diagram to image.mjs /tmp/diagram 1.mmd o /tmp/diagram 1.png bash python ~/.claude/skills/publish x article/scripts/parse markdown.py /path/to/modified article.md json { "title": "Article Title", "cover image": "/path/to/first image.jpg", "content images": [ {"path": "/tmp/table 1.png", "block index": 5, "after text": "context..."}, {"path": "/tmp/mermaid 1.png", "block index": 12, "after text": "another context..."} ], "dividers": [ {"block index": 7, "after text": "context before divider..."}, {"block index": 15, "after text": "another context..."} ], "html": "<p Content...</p <h2 Section</h2 ...", "total blocks": 45 } bash python parse markdown.py modified article.md html only /tmp/article html.html browser navigate: https://x.com/compose/articles 1. 导航到页面 browser navigate: https://x.com/compose/articles 2. 获取页面快照，找到 create 按钮 browser snapshot 3. 点击 create 按钮（通常 ref 类似 "create" 或带有 create 标签） browser click: element="create button", ref=<create button ref 4. 现在编辑器应该打开了，可以继续上传封面图等操作 bash Copy HTML to clipboard python ~/.claude/skills/publish x article/scripts/copy to clipboard.py html file /tmp/article html.html browser click on editor textbox browser press key: Meta+v bash 1. Copy image to clipboard (with compression) python ~/.claude/skills/publish x article/scripts/copy to clipboard.py image /path/to/img.jpg quality 85 2. Click the block element at block index Example: if block index=5, click the 6th block element (0 indexed) browser click on the element at position block index in the editor 3. Paste image browser press key: Meta+v 4. Wait for upload (use short time, returns immediately when done) browser wait for textGone="正在上传媒体" time=2 1. Click the block element at block index position browser click on the element at position block index in the editor 2. Open Insert menu browser click on "Insert" button (Add Media button) 3. Click Divider menu item browser click on "Divider" menuitem Divider is inserted at cursor position bash Step 0: Analyze content Found: 1 table, 1 mermaid diagram, 2 H3 headers Step 0.1: Convert table to image node ~/.claude/skills/diagram to image/scripts/diagram to image.mjs /tmp/table 1.md o /tmp/table 1.png Step 0.2: Convert mermaid to image node ~/.claude/skills/diagram to image/scripts/diagram to image.mjs /tmp/mermaid 1.mmd o /tmp/mermaid 1.png Step 0.3: Create modified markdown with image refs and flattened headers Save to /tmp/article modified.md Step 1: Parse modified markdown python ~/.claude/skills/publish x article/scripts/parse markdown.py /tmp/article modified.md /tmp/article.json python ~/.claude/skills/publish x article/scripts/parse markdown.py /tmp/article modified.md html only /tmp/article html.html bash python ~/.claude/skills/publish x article/scripts/copy to clipboard.py html file /tmp/article html.html bash python copy to clipboard.py image /path/to/img.jpg quality 85 正确用法：短 time 值，条件满足立即返回 browser wait for textGone="正在上传媒体" time=2 错误用法：固定长时间等待 browser wait for time=5 无条件等待5秒，浪费时间封面图 vs 内容图封面图 : 使用 browser file upload（因为有专门的上传按钮）内容图 : 使用 Python 剪贴板 + 粘贴（更高效） Troubleshooting Table not rendering correctly Ensure Pillow is installed: pip install pillow Check table markdown syntax is valid Mermaid conversion fails Check that diagramless.xyz is reachable Check mermaid syntax is valid Try with explicit type: type mermaid Deep headers still showing Manually flatten → or bold Re run pre processing Image upload timeout Compress images with quality 70 Use shorter browser wait for time=2

publish-x-article