DEV Community

naoki_JPN
naoki_JPN

Posted on

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

#claudecode #zenn #devto #ai

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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": "..." } }'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Changelog

Version Date Changes
v0.1.0 2026-04-16 Initial release (Zenn posting only)
v0.2.0 2026-04-17 Added dev.to simultaneous posting and Mermaid CLI support

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!

Top comments (0)