Claude Code の skill でブログ執筆を効率化した

---
name: create-blog-post
description: "ブログ記事 (MDX) を作成・下書きするスキル。ユーザーが「ブログ記事を書いて」「記事の下書きを作って」「〜について記事にしたい」「ポストを作成して」などと言ったときに使う。記事のトピックが会話中に出てきた場合 (例: 何かの設定作業をしていて「これを記事にしたい」) にも使う。"
---

# ブログ記事の作成

投稿する記事の下書きを作成する。

## ワークフロー

1. トピックと構成を確認する
2. MDX ファイルと画像ディレクトリを作成する
3. ユーザーにレビューしてもらう

## Step 1: トピックと構成を確認する

ユーザーに以下を確認する。ただし会話の文脈から明らかな場合は省略してよい。

- 記事のトピック (何について書くか)
- 記事のスラッグ (URL に使う英語の識別子。提案してよい)
- 大まかな構成・見出し (ユーザーが希望する場合)
- カバー画像の有無 (ユーザーが用意するか、プレースホルダーにするか)

## Step 2: MDX ファイルを作成する

### ファイルの配置

- 記事ファイル: `src/content/posts/<slug>.mdx`
- 画像ディレクトリ: `src/assets/blog/<slug>/` (カバー画像を置く場所)

### Frontmatter と MDX コンポーネント

README.md の「Adding a Blog Post」セクションに従う。補足:

- `date` は現在日時 (JST, +09:00) を設定する
- `coverImage.src` の画像がまだない場合はパスだけ書いておき、ユーザーに後で配置してもらう旨を伝える

### 本文の書き方

**文体のルール:**

このブログの文体には明確な特徴がある。以下を忠実に再現すること。

- **常体 (だ・である調)** で書く。です・ます調は使わない
  - 文末は「〜だ。」「〜た。」「〜だろう。」「〜と思う。」「〜かもしれない。」「〜だった。」など
  - 体言止めも使用して良い (「〜というツールを使用。」など)
- **一人称は「自分」** を使う。「私」「僕」は使わない
- **英単語・技術用語の前後にスペース**を入れる
  - 良い例: `1Password の SSH 機能を利用する`
  - 悪い例: `1PasswordのSSH機能を利用する`
- **括弧の前後にもスペース**を入れる
  - 良い例: `最近受けた (合格した)。`
  - 悪い例: `最近受けた(合格した)。`
- 句読点は「、」「。」を使う (カンマ・ピリオドは使わない)

**構成のパターン:**

- **導入**: 冒頭の1〜2段落で記事の概要を述べる。「〜について記す。」「〜残しておく。」「〜紹介したい。」のように締める
- **環境** (技術記事の場合): 使用したツールやバージョンを箇条書きにする `## 環境` セクション
- **本文**: `## セクション名` → `### サブセクション名` の階層構造
- **締め**: `## おわりに` セクションで、本題から少しずれた余談や感想を添える。ユーモアが混じることがある

**コードブロック:**

- 言語指定は正確に: ` ```typescript `, ` ```shellsession `, ` ```yaml `, ` ```diff ` など

**リンク:**

- 外部リンク: `[タイトル - サイト名](URL)`
- 内部リンク (他の記事): `[タイトル](/posts/<slug>)`

**脚注:**

- `[^1]` 形式で本文中に参照を置き、記事末尾に `[^1]: URL` でリンクを記載

**トーンの特徴:**

- 技術的で淡々としているが、個人的な感想や動機も率直に書く
- 冗長にならないよう簡潔に書くが、読み物として成立する程度の文量は保つ
- 謙遜しすぎず、自然体で書く
- 他のツールや技術を比較する際、特定の側面で優劣をつけることはあるが、一方的に貶めるようなことは書かない。「あくまで今の自分のニーズに合っていたのが〜だったという話だ。」のようなバランスの取れた表現を使う
- 記事の結びでは、若干のユーモアを交えることがある

## Step 3: レビュー

ファイルを作成したら、ユーザーに以下を伝える。

- 作成したファイルのパス
- カバー画像を配置する必要がある場合はその旨
- `pnpm check-exif` で画像の EXIF データをチェックする必要がある旨 (画像を追加した場合)

---
name: review-blog-post
description: "ブログ記事 (MDX) をレビューするスキル。ユーザーが「記事をレビューして」「記事をチェックして」「投稿前に確認して」「記事の内容を見て」などと言ったときに使う。記事作成後の品質チェックとして積極的に提案してもよい。"
---

# ブログ記事のレビュー

記事を複数の観点からレビューする。

## ワークフロー

1. 対象の記事ファイルを読む
2. 各チェック観点でレビューする
3. 指摘事項をまとめて報告する

## Step 1: 対象の記事を特定する

ユーザーにレビュー対象の記事を確認する。会話の文脈から明らかな場合は省略してよい。対象ファイルは `src/content/posts/<slug>.mdx` にある。

## Step 2: レビューを実施する

以下の 4 つの観点でチェックする。指摘は **観点ごとにグループ化** し、問題がない観点は「問題なし」と明記する。

### 観点 1: 文体・表記の統一性

このブログには明確な文体ルールがある。まず `.claude/skills/create-blog-post/SKILL.md` の「本文の書き方」セクション (文体のルール) を読み、そのルールに違反がないかチェックする。

加えて以下もチェックする:

- 誤字・脱字
- 同じ表現の不自然な繰り返し (例: 連続する文が同じ接続詞で始まる)

### 観点 2: 構成・内容の質

記事としての読みやすさ・論理性をチェックする。

**構成:**

`.claude/skills/create-blog-post/SKILL.md` の「構成のパターン」に沿っているかチェックする。

**内容:**

- 論理の飛躍や説明不足がないか
- 前提知識の説明が適切か
- セクション間の流れが自然か
- 冗長な繰り返しがないか

### 観点 3: 技術的正確性

技術記事の場合、内容の正確さをチェックする。

- コード例やコマンドに明らかな誤りがないか
- 技術用語が正しく使われているか
- バージョン情報が記載されている場合、内容と矛盾していないか
- 外部リンク先の URL がもっともらしいか (実際にフェッチして確認する必要はないが、明らかに壊れたパスでないか)

### 観点 4: フォーマット・MDX

README.md の「Adding a Blog Post」セクション (frontmatter、MDX コンポーネント) と `.claude/skills/create-blog-post/SKILL.md` の「本文の書き方」(コードブロック、リンク、脚注) に沿っているかチェックする。

## Step 3: 結果を報告する

指摘事項を以下の形式で報告する。

- 各観点ごとにセクションを分ける
- 指摘がある場合は、該当箇所の引用と修正案を示す
- 指摘の重要度を表示する: **[重要]** はリリース前に修正すべき問題、 **[軽微]** は修正が望ましいが必須ではない問題
- 問題がない観点は「問題なし」と簡潔に報告する
- 最後に全体の所感を1〜2文で添える