I Built a Claude Code Plugin That Simultaneously Posts to Zenn and dev.to With Just "Publish the article"

I built a plugin for Claude Code that simultaneously posts to Zenn (in Japanese) and dev.to (in English translation) just by saying "publish the article."

What I Built

zenn-post — Claude Code Plugin / Skill

https://github.com/bokuno-studio/zenn-post-cc-plugin

This plugin handles the entire article publishing workflow — creating drafts, formatting Markdown, running git push, and calling the dev.to API — all delegated to Claude Code.

What It Can Do

• "Publish the article" → simultaneously posts to Zenn (Japanese) and dev.to (English translation)
• Pass a Notion page URL → reads the content, converts it to an article, and posts it
• Just describe a topic verbally → fully automated from writing to git push
• Automatically converts Mermaid diagrams to PNG locally (no external services)
• Preview before publishing → runs git push after your OK

"Upload this Notion page to Zenn"
"Publish the article"          ← Posts to both Zenn + dev.to
"Post to Zenn only"            ← Zenn only

Why I Built It

The Zenn posting workflow was quietly tedious:

1. Create a Markdown file
2. Write the frontmatter
3. Write the content
4. Change published: true
5. git commit & push
6. (If also posting to dev.to) Translate to English and call the API

Doing this every time felt like a chore, so I thought "let Claude Code handle all of it."

Technical Highlights

Implemented as a Claude Code Skill (SKILL.md)

Claude Code has a plugin/skill feature where you can register a skill just by writing a prompt in SKILL.md. No code needed at all — you just define "how it should behave" in natural language.

skills/zenn-post/SKILL.md  ← that's it

Direct POST to dev.to via curl

The dev.to API is simple — a single curl request does the job. Claude Code reads the API key from .env and assembles the request.

curl -X POST https://dev.to/api/articles \
  -H "api-key: $DEVTO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "article": { "title": "...", "published": true, "body_markdown": "..." } }'

Mermaid Diagrams Converted to PNG Locally

Since dev.to doesn't render Mermaid, this plugin uses mermaid-cli for local conversion into images. The converted PNG is stored in the images/ directory of the zenn-content repository and served via raw.githubusercontent.com — no external services involved.

npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png -t default -b white

Installation

Prerequisites:

• Claude Code installed
• A Zenn account and zenn-content repository (public) on GitHub
• A dev.to account and API key

Steps:

git clone https://github.com/bokuno-studio/zenn-post-cc-plugin ~/.claude/plugins/zenn-post

Edit the environment info section in skills/zenn-post/SKILL.md with your own paths, then register it with Claude Code.

claude plugin marketplace add ~/.claude/plugins/zenn-post
claude plugin install zenn-post

Changelog

Wrapping Up

Using Claude Code's Skill feature, you can take a new approach to automation: "define Claude's behavior without writing code." Extracting routine tasks like article publishing into a skill makes it satisfying to complete everything with just a verbal instruction.

Feel free to give it a try — feedback welcome!