# Media Publishing

> Content publishing platforms, CMS design, article layouts, reader experience, and editorial tools.

- Skill: `dragoon0x/media-publishing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/media-publishing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/media-publishing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/media-publishing

---


# Media & Publishing Design

## Article Layout
- **Optimal reading width:** 600-700px for body text
- **Font size:** 18-20px for comfortable reading
- **Line height:** 1.6-1.7 for body text
- **Paragraph spacing:** More than line spacing, less than section spacing
- **Pull quotes:** Full-width interruptions that break reading rhythm intentionally
- **Image captions:** Always. Context matters.

## Typography-First Design
- Headline hierarchy: Article title > Section heads > Subheads
- Byline and date: near title, subtle but findable
- Drop caps: optional, sets editorial tone
- Block quotes: visually distinct, attributed

## Reading Experience
- Estimated reading time
- Progress indicator (subtle bar or percentage)
- Dark mode / reader mode toggle
- Share buttons (at top and bottom, not floating)
- Related articles at the end
- Comment section (if applicable, moderated)

## CMS for Authors
- Distraction-free writing mode
- Real-time preview
- Scheduled publishing
- Version history
- SEO preview (title, description, URL)
- Image management with alt text prompts

## Performance
- Critical CSS inlined for first render
- Lazy load below-fold images
- Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
- Font loading: display swap, preload critical fonts