website/.claude/skills/blog-planner/SKILL.md
Interactive blog post authoring. Produces a draft blog post file with structured outline, inline guidance comments, and meta briefs that the author proses up in place. Supports pyramid principle, best sales deck, and release post formats.
npx skillsauth add electric-sql/electric blog-plannerInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Plan and outline blog posts for the Electric blog. The output is a draft
markdown file placed directly in website/blog/posts/ with
published: false. The author works through the outline in place, expanding
compressed bullets into prose and swapping in assets.
/blog-planner [optional: path to existing draft or reference material]
If the user provides a path to existing material (drafts, docs, PRDs, notes), read it for context and content. Understand what it contains but do not over-index on its structure — the outline's structure comes from the chosen format, not the source material.
Work through these phases in order. Ask one question at a time. Be clear, honest, and useful. Don't gamify the questioning or perform — add value and get out of the author's way.
Understand the raw idea.
thruflo,
kyle, samwillis, icehaunter, balegas, oleksii, purva)Nail down why this post deserves to exist. Push until each answer is crisp.
These answers form the Intent block in the output file's meta section.
Based on the intent, recommend one of the three formats and confirm with the author. If the author picks a format, use that format — don't second-guess.
| Format | When to use | |--------|-------------| | Pyramid Principle | You have a clear point to make and need to build a logical argument. Good for technical explanations, "how we built X", opinion pieces with substance. | | Best Sales Deck | You're introducing a concept or paradigm shift. A narrative flow that names a big change in the world, shows winners and losers, teases the promised land, and introduces the solution. Good for product launches that represent a category shift, thought leadership. | | Release Post | You shipped something. Communicate it clearly. The workhorse format for incremental releases and new features. Always be shipping. |
Once confirmed, load the corresponding reference file from references/.
Produce the section-level outline per the chosen format.
<!-- ASSET: description --> commentsWriting style for outline bullets:
For pyramid principle and best sales deck formats only.
Draw out the author's personal angle:
Weave this into the outline bullets for the Situation/Complication (pyramid) or Big Change (best sales deck) sections. Annotate with comments explaining how the creative element works structurally. This is done now, not left to the author to figure out during prose-up.
Assess whether the outline delivers on the intent from Phase 2.
Raise any issues and iterate with the author.
Return to the footer meta section. Draft briefs for:
/blog-image-brief command.Now that the outline is solid, inventory the assets needed:
Save the outline to website/blog/posts/YYYY-MM-DD-slug.md.
published: false in frontmatter... placeholders for frontmatter fields that need finalising
(title, description, excerpt) — the briefs in the commented footer
guide the author on what to writeThe output is a real blog post file that the author works through in place.
---
title: '...'
description: >-
...
excerpt: >-
...
authors: [author-key]
image: /img/blog/slug/header.jpg
tags: [...]
outline: [2, 3]
post: true
published: false
---
Use ... for title, description, and excerpt. These get filled in by the
author using the briefs in the meta footer. Tags can be populated from
the intent discussion.
All formats follow this pattern:
*** separatorUse HTML comments for:
<!-- ASSET: description --> where assets goComments don't render in markdown and the author deletes them as they prose up each section.
Include these as a checklist in the meta footer:
in HTML, \u00A0 in frontmatter)
and non-breaking hyphens where appropriate to avoid widows and orphansExisting posts by Electric authors that exemplify good execution. Use these to calibrate tone, structure, and quality.
Pyramid principle / narrative:
Best sales deck / concept:
Release post:
For a quick image direction, note in the meta footer:
#D0BCFF (purple), #00d2a0 (green), #75fbfd (cyan),
#F6F95C (yellow), #FF8C3B (orange)For a detailed image brief with reference image analysis and a full
ChatGPT DALL-E prompt, use the /blog-image-brief command separately.
Once the author has prosed up the outline, use /blog-review to review
the draft against the outline, format, and execution guidelines.
development
Set up ElectricProvider for real-time collaborative editing with Yjs via Electric shapes. Covers ElectricProvider configuration, document updates shape with BYTEA parser (parseToDecoder), awareness shape at offset='now', LocalStorageResumeStateProvider for reconnection with stableStateVector diff, debounceMs for batching writes, sendUrl PUT endpoint, required Postgres schema (ydoc_update and ydoc_awareness tables), CORS header exposure, and sendErrorRetryHandler. Load when implementing collaborative editing with Yjs and Electric.
tools
Configure ShapeStream and Shape to sync a Postgres table to the client. Covers ShapeStreamOptions (url, table, where, columns, replica, offset, handle), custom type parsers (timestamptz, jsonb, int8), column mappers (snakeCamelMapper, createColumnMapper), onError retry semantics, backoff options, log modes (full, changes_only), requestSnapshot, fetchSnapshot, subscribe/unsubscribe, and Shape materialized view. Load when setting up sync, configuring shapes, parsing types, or handling sync errors.
documentation
Design Postgres schema and Electric shape definitions together for a new feature. Covers single-table shape constraint, cross-table joins using multiple shapes, WHERE clause design for tenant isolation, column selection for bandwidth optimization, replica mode choice (default vs full for old_value), enum casting in WHERE clauses, and txid handshake setup with pg_current_xact_id() for optimistic writes. Load when designing database tables for use with Electric shapes.
testing
Set up a server-side proxy to forward Electric shape requests securely. Covers ELECTRIC_PROTOCOL_QUERY_PARAMS forwarding, server-side shape definition (table, where, params), content-encoding/content-length header cleanup, CORS configuration for electric-offset/electric-handle/ electric-schema/electric-cursor headers, auth token injection, ELECTRIC_SECRET/SOURCE_SECRET server-side only, tenant isolation via WHERE positional params, onError 401 token refresh, and subset security (AND semantics). Load when creating proxy routes, adding auth, or configuring CORS for Electric.