원클릭으로
init-article
// Initialize a new blog article with interactive prompts for title, description, tags, and image. Automatically generates slug from title and validates uniqueness.
// Initialize a new blog article with interactive prompts for title, description, tags, and image. Automatically generates slug from title and validates uniqueness.
| name | init-article |
| description | Initialize a new blog article with interactive prompts for title, description, tags, and image. Automatically generates slug from title and validates uniqueness. |
| version | 1.0.0 |
| author | hiroppy/site |
| tags | ["blog","mdx","content-creation","interactive"] |
This skill guides you through creating a new blog article for the hiroppy/site project.
src/content/blog/{slug}.mdx with proper frontmatterWhen this skill is invoked, follow these steps exactly:
Ask the user for the following information in order. Be patient and handle errors gracefully.
Title (required)
Auto-generate Slug
- Convert to lowercase
- Remove Japanese characters (Hiragana \u3040-\u309F, Katakana \u30A0-\u30FF, Kanji \u4E00-\u9FFF)
- Remove special characters except hyphens and alphanumeric
- Replace spaces with hyphens
- Remove consecutive hyphens
- Trim hyphens from start/end
{slug} - Is this okay? (y/n)"Description (required)
Tags (required)
Image Path (required)
Available image directories:
- /images/brands/ (Technology logos: nodejs.png, react.png, nextjs.png, typescript.png, etc.)
- /images/blog/ (Custom blog images)
- /images/meta/ (Meta images)
/images/References (optional)
Use the Read tool to check if file exists at:
/Users/hiroppy/Programming/site/src/content/blog/{slug}.mdx
If file exists:
{slug} already exists!"Create file content with this exact structure:
---
title: "{title}"
date: {CURRENT_DATE_ISO_8601}
description: "{description}"
image: {image}
tags: {tags}
{if references array has items}
references:
{for each reference}
- {reference}
{endfor}
{endif}
---
[関連リンクのタイトル](url)
{title} についての導入文を書きます。
## 背景
[背景や文脈を説明]
## [主要セクション1]
[内容を書く]
## まとめ
- 重要なポイント1
- 重要なポイント2
- 重要なポイント3
Critical Requirements:
YYYY-MM-DDTHH:mm:ss.sssZnew Date().toISOString()2025-12-20T00:00:00.000ZUse the Write tool to create the file at:
/Users/hiroppy/Programming/site/src/content/blog/{slug}.mdx
Handle errors:
Display success message with helpful next steps:
✅ Successfully created: src/content/blog/{slug}.mdx
📝 Next Steps:
1. Open the file and start writing
2. Refer to .claude/context/writing-style.md for comprehensive style guidelines
3. Pick 2-3 recent articles from src/content/blog/ to mimic writing style
4. Choose appropriate template for article type:
- Technical Deep Dive: nodejs-strip-type.mdx, webpack-persistent-caching.mdx
- Personal/Career: 30-years-old.mdx, join-yuimedi.mdx, 2023.mdx
- Tutorial/How-To: create-feedle.mdx, nextjs-app-router-training.mdx
- Event/Experience: first-speech-abroad.mdx, ireland.mdx
5. Run `pnpm fmt` before committing
🎨 Writing Tips (from writing-style.md):
- Use conversational but professional Japanese tone
- Start with context: "さて、" "今回は、" "最近、"
- Technical articles: 30-50% code ratio with detailed explanations
- Personal articles: Narrative flow with specific dates and gratitude
- Include self-references to related past articles using [title](url) syntax
- End with "さいごに" (personal) or "まとめ" (technical) section
- Be humble: "かなと思う" "気がする" "正直"
📚 Key Files:
- Style guide: .claude/context/writing-style.md
- Development: CLAUDE.md
- Type definitions: src/mdx/types.ts
- Content loader: src/mdx/contentLoader.ts
❌ Error: Title is required and cannot be empty.\nPlease enter a valid title:❌ Error: Tags must be comma-separated with no spaces.\nExample: node.js,javascript,typescript\nPlease re-enter tags:❌ Error: Image path must start with /images/\nPlease enter a valid image path:⚠️ Could not generate meaningful slug from title.\nPlease enter a custom slug (kebab-case):❌ Article with slug '{slug}' already exists!\nEnter a different slug or type 'cancel' to abort:❌ Error: Cannot write to src/content/blog/\n{error message}\nPlease check permissions and try again.Cancelled. No file was created.User: /init-article
Claude: What is the article title? (Japanese or English)
User: Node.jsでTypeScriptのコードを実行できるようになるかも
Claude: Generated slug: `nodejs-typescript` - Is this okay? (y/n)
User: y
Claude: Enter a 1-2 sentence description:
User: Node.jsでTypeScriptのコードを実行できるような機能が提案されました
Claude: Enter tags (comma-separated, no spaces):
User: node.js,typescript
Claude: Available image directories:
- /images/brands/ (Technology logos)
- /images/blog/ (Custom blog images)
- /images/meta/ (Meta images)
Enter OG image path:
User: /images/brands/nodejs.png
Claude: Enter reference URLs (comma-separated, press Enter to skip):
User: https://github.com/nodejs/node/pull/53725
Claude: ✅ Successfully created: src/content/blog/nodejs-typescript.mdx
[... next steps ...]
User: /init-article
Claude: What is the article title? (Japanese or English)
User: 30歳という節目の振り返り
Claude: Generated slug: `30` - Is this okay? (y/n)
User: n
Claude: Enter custom slug (kebab-case):
User: 30-years-reflection
Claude: Enter a 1-2 sentence description:
User: 30歳になったので、これまでの7年を振り返ります
Claude: Enter tags (comma-separated, no spaces):
User: life,ポエム
Claude: Available image directories: [...]
Enter OG image path:
User: /images/meta/profile.png
Claude: Enter reference URLs (comma-separated, press Enter to skip):
User: [press Enter]
Claude: ✅ Successfully created: src/content/blog/30-years-reflection.mdx
[... next steps ...]
User: /init-article
Claude: What is the article title?
User: Secure Node.js
Claude: Generated slug: `secure-nodejs` - Is this okay?
User: y
Claude: ❌ Article with slug 'secure-nodejs' already exists!
Enter a different slug or type 'cancel' to abort:
User: secure-nodejs-2025
Claude: Enter a 1-2 sentence description:
[... continues ...]
/Users/hiroppy/Programming/sitesrc/content/blog/.mdx (MDX with YAML frontmatter)src/mdx/contentLoader.tssrc/mdx/types.ts