feat: slash commands for blog image generation tasks

## Summary

Add Claude Code slash commands for common image generation tasks in the blog workflow.

## Motivation

Technical blogs frequently need:
- Code screenshots for social sharing
- Diagrams for explaining architecture
- Optimized images for performance
- Consistent OG images for social media

Currently these tasks require manual tool invocation or external services.

## Proposed Commands

### Phase 1: Must-Have

#### `/blog-screenshot` - Code Screenshot Generation
Generate beautiful code screenshots for social sharing or embedding.

**Inputs:**
- `$1` - File path or code block
- `--lang` - Language for syntax highlighting
- `--theme` - Color theme (github-dark, dracula, etc.)
- `--title` - Window title/filename
- `--output` - Output path

**Tools:** Satori + Shiki (reuse existing infrastructure)

#### `/blog-diagram` - Diagram Generation
Generate diagrams from text descriptions (Mermaid, D2, Graphviz).

**Inputs:**
- `$1` - Diagram source file or inline definition
- `--format` - Input format (mermaid/d2/graphviz)
- `--theme` - Color theme
- `--output` - Output path

**Tools:** D2 recommended (modern, excellent output, self-contained binary)

### Phase 2: Nice-to-Have

#### `/blog-thumbnail` - Thumbnail Generation
Generate thumbnail versions of images for cards, lists, galleries.

**Tools:** Sharp (already installed)

#### `/blog-placeholder` - Blur Placeholder Generation
Generate low-quality placeholder images for lazy loading.

**Tools:** Sharp + optional thumbhash

#### `/blog-optimize` - Image Optimization
Compress and optimize existing images, convert to modern formats.

**Tools:** Sharp (already installed)

#### `/blog-og` - OG Image Customization
Generate or regenerate OG images with custom templates.

**Tools:** Satori + @resvg/resvg-js (already installed)

### Phase 3: Future

#### `/blog-favicon` - Favicon Set Generation
Generate complete favicon set from source image.

#### `/blog-hero` - Hero Image Generation
Generate or resize hero images, optionally AI-powered.

## Technical Approach

### Architecture

```
.claude/commands/
├── blog-screenshot.md
├── blog-diagram.md
├── blog-thumbnail.md
├── blog-placeholder.md
├── blog-optimize.md
├── blog-og.md
├── blog-favicon.md
└── blog-hero.md

scripts/
├── image-utils.ts # Shared utilities
├── screenshot.ts
├── diagram.ts
└── optimize.ts
```

### Existing Dependencies (Reuse)
- `sharp@0.34.5` - Image processing
- `satori@0.18.3` - HTML/CSS to SVG
- `@resvg/resvg-js@2.6.2` - SVG to PNG
- `shiki` (via Astro) - Syntax highlighting

### New Dependencies
| Command | Dependency | Install |
|---------|------------|---------|
| `/blog-diagram` | D2 | `brew install d2` |
| `/blog-placeholder` | thumbhash (optional) | `npm install thumbhash` |

## Implementation Tasks

### Phase 1
- [ ] Create shared `scripts/image-utils.ts` module
- [ ] Implement `/blog-screenshot` command
- [ ] Implement `/blog-diagram` command
- [ ] Add D2 installation documentation

### Phase 2
- [ ] Implement `/blog-thumbnail` command
- [ ] Implement `/blog-placeholder` command
- [ ] Implement `/blog-optimize` command
- [ ] Enhance `/blog-og` with custom template support

### Phase 3
- [ ] Implement `/blog-favicon` command
- [ ] Implement `/blog-hero` with optional AI generation

## Acceptance Criteria

- [ ] Commands work in Claude Code context
- [ ] Integration with existing blog structure
- [ ] Documentation in command files
- [ ] Examples in command descriptions

## Labels
enhancement, commands, images