mirror-editor-block-styles

name	mirror-editor-block-styles
description	Keep every render surface of a block in sync with the editor. Use whenever you create a new block type or change an existing block in components/Blocks/ — styling (margins, padding, font size/weight, line-height, color, alignment) or structure — so the published post and the email newsletter keep matching the editor, and copy/paste keeps working. Unless the user says otherwise, block work isn't done until all surfaces are checked.
user-invocable	true

Keep Block Surfaces in Sync with the Editor

Leaflet renders every block from three disconnected code paths, plus a clipboard round-trip:

1. Editor (components/Blocks/…) — the interactive doc you write in. This is the source of truth for how a block looks and behaves.
2. Published post (app/(app)/(published)/lish/[did]/[publication]/[rkey]/…) — the read-only version served at leaflet.pub, rendered from the AT-Protocol record (facets + block fields), not from the editor components.
3. Email newsletter (emails/post.tsx) — the version sent to subscribers, rendered with react-email and inline pixel styles.
4. Copy/paste (src/utils/getBlocksAsHTML.tsx + src/utils/paste/) — the editor's clipboard serializer and parser, which must round-trip the block.

There is no shared styling layer between them beyond a few global CSS classes. A change in the editor does not automatically show up anywhere else — it has to be mirrored by hand. This skill is the checklist.