Blogposts Automatiseren met Claude Code Skills

Ik bouwde een custom claude code skill die het schrijven van blogposts verandert van een klusje van 30 minuten naar een commando van 30 seconden

Het Probleem

Elke keer als ik over een project wilde schrijven, doorliep ik dezelfde saaie stappen:

screenshots zoeken in de projectmap
ze kopiëren naar de blog assets-directory
een nieuw mdx-bestand aanmaken met de juiste frontmatter
de content schrijven
het juiste categorie- en tagformaat onthouden
alles committen
de dev server starten om te previewen

Het is niet moeilijk. Maar het is frictie. En frictie doodt momentum

Claude Code Skills 101

Skills leven in ~/.claude/skills/ als markdown-bestanden. Elk bestand definieert een slash command dat claude code kan uitvoeren. De structuur is simpel:

~/.claude/
├── CLAUDE.md          # globale instructies
└── skills/
    ├── blog.md        # /blog commando
    ├── rewrite.md     # /rewrite commando
    ├── tweet.md       # /tweet commando
    └── commit.md      # /commit commando

Als je /blog typt in claude code, laadt het het bijbehorende skill-bestand en volgt de instructies

Anatomie van een Skill

Dit is de structuur van mijn blog skill:

# Blog Post Skill

Create a new blog post for jovweb.dev about a project or topic.

## Usage
/blog [project-folder-or-topic]

## Arguments
- $ARGUMENTS: path to a project folder or a topic to write about

## Instructions

### 1. Determine the Subject
- Parse $ARGUMENTS to get the project folder or topic
- If a folder path is provided, explore it to understand:
  - What the project does (check README, package.json, main source files)
  - Key features and technologies used
  - Any screenshots or images in the repo

### 2. Find Images
- Search the project folder for potential cover images:
  - Look in: `/public`, `/assets`, `/images`, `/screenshots`
  - File types: `.png`, `.jpg`, `.jpeg`, `.webp`, `.gif`
- Copy the best image to `/path/to/blog/public/assets/blog/`

### 3. Write the Blog Post Content
- Create an outline based on:
  - What problem does this project solve?
  - How does it work?
  - Key features or interesting technical decisions
- Use the `/rewrite` skill to convert to personal style

### 4. Create the MDX File
- Location: `/path/to/blog/content/blog/`
- Filename: kebab-case based on topic
- Include frontmatter with title, description, date, category, tags

Het belangrijkste hier is $ARGUMENTS. Dit is hoe je input doorgeeft aan een skill. Alles wat na /blog komt, wordt daar geïnjecteerd

Skills aan Elkaar Koppelen

De blog skill roept een andere skill aan: /rewrite. Deze zet mijn drafts om naar mijn schrijfstijl

# Rewrite Skill

## Instructions
1. Parse the text from $ARGUMENTS
2. Rewrite using the style guide below
3. Show the rewritten version

## Style Guide
- start with lowercase
- use "I" not "I"
- no ending punctuation
- short, direct sentences
- stream of consciousness flow

Skills die skills aanroepen. Het is composable automation (samengestelde automatisering)

De Uitvoeringsstroom

Als ik /blog ~/Sites/hyperscalper uitvoer:

1. Claude code laadt ~/.claude/skills/blog.md
2. $ARGUMENTS = "~/Sites/hyperscalper"
3. Claude verkent de map:
   - leest README.md
   - checkt package.json voor dependencies
   - scant src/ voor de belangrijkste functionaliteit
4. Vindt afbeeldingen in ~/Sites/hyperscalper/public/
5. Kopieert de beste afbeelding naar blog assets
6. Schrijft de postcontent
7. Roept /rewrite aan om mijn stijl toe te passen
8. Maakt content/blog/building-hyperscalper.mdx aan
9. Voert uit: git add . && git commit -m "add hyperscalper blog post"
10. Voert uit: npm run dev (als het niet al draait)
11. Opent http://localhost:3000/blog/building-hyperscalper

Alles vanuit één commando

De MDX-Output

De skill weet precies welke frontmatter mijn blog nodig heeft:

---
Title: "Building Hyperscalper"
Description: "a real-time trading dashboard for crypto markets"
PublishedAt: "2026-01-13"
Author: "Jo Vinkenroye"
Category: "Development"
Tags: ["Trading", "Crypto", "Real-time", "Next.js"]
CoverImage: "/assets/blog/hyperscalper-cover.png"
Featured: false
---

Categorieën, tags, afbeeldingspaden. Allemaal gedefinieerd in de skill zodat ik ze niet hoef te onthouden

Het Meta-Gedeelte

Deze post is geschreven met de skill waar ik over schrijf. /blog over de blog skill :D

Je Eigen Skill Bouwen

Begin simpel. Maak ~/.claude/skills/jouw-skill.md aan met:

# Your Skill Name

Description of what it does.

## Usage
/your-skill [arguments]

## Instructions
1. First step
2. Second step
3. ...

Denk na over wat je steeds herhaalt:

PR's reviewen → /review skill met je checklist
projecten opzetten → /init skill met je favoriete stack
documentatie schrijven → /docs skill met je format
updates posten → /tweet skill met je stem

De Stack

Mijn blog draait op next.js 14 met mdx. Posts zijn gewoon bestanden:

Content/blog/
├── automating-blog-posts.mdx
├── building-hyperscalper.mdx
└── ...

Geen database. Geen CMS. Gewoon markdown en git. De skill schrijft direct naar de repo

Wat Komt Er Nog

Ik denk eraan om toe te voegen:

/imagen integratie voor automatisch genereren van coverafbeeldingen
automatisch relevante codefragmenten ophalen
cross-posting naar dev.to met /crosspost

Maar voor nu bespaart het me al tijd en — belangrijker nog — het verwijdert de frictie die me ervan weerhield om überhaupt te schrijven

Stay Updated

Get notified about new posts on automation, productivity tips, indie hacking, and web3.

No spam, ever. Unsubscribe anytime.