Dev.to Optimizer Skill

This skill transforms Zenn-specific Markdown into a polished, high-quality Dev.to post. It ensures that all technical components (embeds, math, code blocks) are correctly rendered and that the post follows Dev.to's Jekyll-style front matter and heading hierarchy conventions.

🚀 When to Use This Skill

• When a user wants to cross-post a Zenn article to Dev.to.
• When you see Zenn-specific notation like @[youtube](id) or :::message.
• When the user explicitly asks to "convert to dev.to" or "optimize for dev.to".

🛠 Preparation

Before converting, refer to the detailed conversion rules in: references/conversion_rules.md

📝 Workflow

Step 1: Jekyll Front Matter Construction

Dev.to requires a specific YAML header. If the source article has Zenn front matter, convert it as follows:

• title -> title (Keep it catchy! Dev.to titles often perform better with a "How to" or "Ultimate Guide" feel).
• emoji -> (Remove, Dev.to doesn't use these in front matter).
• type -> (Remove).
• topics -> tags (Max 4 tags, lowercase, no spaces).
• published -> published: true (or false for drafts).
• Add canonical_url: The original Zenn article URL to avoid SEO penalties.
• Add cover_image: If available.

Step 2: Content Transformation

Apply the following surgical changes to the markdown body:

1. Heading Shift:

   • CRITICAL: Dev.to uses the title as the H1. The first heading in the body MUST be H2 (##).
   • If the Zenn article uses # Header inside the body, demote all headers by one level (# -> ##, ## -> ###, etc.).

2. Liquid Tag Embeds:

   • Convert @[youtube](id) -> {% youtube id %}
   • Convert @[twitter](id) -> {% twitter id %}
   • Convert @[gist](id) -> {% gist id %}
   • Convert @[card](url) -> {% link url %}
   • For general URLs that Zenn automatically turns into cards, use {% embed URL %}.

3. Math Blocks (KaTeX):

   • Block: $$ ... $$ -> {% katex %} ... {% endkatex %}
   • Inline: $ ... $ -> {% katex inline %} ... {% endkatex %}

4. Callout (Message) Blocks:

   • Convert :::message -> > **Note** + > content
   • Convert :::message alert -> > **Warning** + > content

5. Details/Accordions:

   • Convert :::details Title -> <details><summary>Title</summary>
   • Convert ::: -> </details>

6. Code Blocks:

   • Remove filenames from language identifiers (e.g., js:index.js -> javascript).
   • Add the filename as a comment on the first line of the code block.

7. Mermaid Diagrams:

   • Since Dev.to doesn't support Mermaid, wrap the Mermaid code in a <details> block or provide a link to the Mermaid Live Editor via {% embed %}.

Step 3: Polish for Global Audience

Dev.to is a global platform. While the user may post in Japanese, consider:

• Suggesting an English translation of the title and tags.
• Ensuring links use descriptive text (avoid "Click here").
• Placing emojis at the end of sentences for better screen reader compatibility.

🏁 Final Output

The skill should output the complete, converted Markdown code block, ready to be pasted into the Dev.to editor.