用 Claude Code Skills 自动化写博客

~/.claude/
├── CLAUDE.md          # 全局指令
└── skills/
    ├── blog.md        # /blog 命令
    ├── rewrite.md     # /rewrite 命令
    ├── tweet.md       # /tweet 命令
    └── commit.md      # /commit 命令

# 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

# 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

1. Claude Code 加载 ~/.claude/skills/blog.md
2. $ARGUMENTS = "~/Sites/hyperscalper"
3. Claude 探索文件夹：
   - 读取 README.md
   - 检查 package.json 查看依赖
   - 扫描 src/ 了解核心功能
4. 在 ~/Sites/hyperscalper/public/ 找到图片
5. 把最合适的图片复制到博客素材目录
6. 起草文章内容
7. 调用 /rewrite 应用我的写作风格
8. 创建 content/blog/building-hyperscalper.mdx
9. 执行：git add . && git commit -m "add hyperscalper blog post"
10. 执行：npm run dev（如果没在运行的话）
11. 打开 http://localhost:3000/blog/building-hyperscalper

---
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
---

# Your Skill Name

Description of what it does.

## Usage
/your-skill [arguments]

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

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