diff --git a/.claude/skills/blog-to-docs/SKILL.md b/.claude/skills/blog-to-docs/SKILL.md new file mode 100644 index 00000000000..7733dde123e --- /dev/null +++ b/.claude/skills/blog-to-docs/SKILL.md @@ -0,0 +1,207 @@ +--- +name: blog-to-docs +description: > + Convert ClickHouse blog content into docs pages. Use when porting a feature + announcement, tutorial, or deep-dive from the blog into the docs site. + Covers content extraction, asset handling, structural transformation, and + voice conversion. +--- + +# Blog-to-Docs Skill + +Convert blog posts (or blog sections) into docs pages. Blog content is +marketing-adjacent and narrative; docs content is task-oriented and +scannable. This skill covers the transformation process. + +## When to use + +- A Linear issue or request asks you to port blog content into docs +- A new feature was announced in a blog post and needs a docs page +- A blog post contains technical depth that belongs in the docs + +## Process + +### 1. Extract content from the blog + +Fetch the blog URL and extract **all** content from the relevant section. +Request verbatim content, not a summary — you need every detail to avoid +losing information during the conversion. + +After extraction, build an **exhaustive numbered checklist** of every +distinct technical claim, fact, setting, default value, behavioral detail, +caveat, and recommendation in the blog. This is the source-of-truth +inventory — you will check every item against the docs later in step 8. +Don't summarize; enumerate. + +### 2. Download assets + +Download all images and videos from the blog to +`static/images/clickstack//` (or the appropriate path). + +**Images:** Download as `.png` or `.jpg`. Name descriptively +(`service-map-overview.png`, not `screenshot-1.png`). + +**Videos:** Download `.mp4` files. Keep them — MP4 at ~1MB is far better +than converting to GIF (which would be 5-15x larger and lower quality). + +**Import pattern:** Import assets as webpack modules, not static paths. +Static paths (`/images/...`) don't work reliably with the dev server. + +```jsx +// Images — use IdealImage +import Image from '@theme/IdealImage'; +import overview from '@site/static/images/clickstack/feature/overview.png'; +Description + +// Videos — import as module, self-closing tag +import demo from '@site/static/images/clickstack/feature/demo.mp4'; +