Magazine
Turn any content into a single self-contained HTML magazine where each item gets its own full-viewport spread with distinct typography, color, and layout treatment. Inspired by editorial design (NYT Magazine, The Atlantic, Wired, Pitchfork, MIT Technology Review).
When to use
- User asks for a "morning edition," "daily digest," "newsletter," "magazine," "zine," or "editorial" version of any content
- User wants a list of items (stories, projects, meetings, links) rendered with real visual variety, not as a markdown list
- User wants meeting minutes, research, or reports presented as if for publication, not for a tracker
- User wants something to feel "designed" — different background colors, layout, numeral treatment per item
- User specifically references the previous Morning Edition output and asks to recreate the format for a different topic
Don't use for
- Plain working documents (memos, code review, technical specs) — use plain markdown / Google Docs
- Single-screen things — magazine layout is for multi-spread digests and lists
- When the user wants editable Google Docs — magazine output is HTML, not Docs-friendly
Required reading before generating
Before writing any output, read these in order:
references/design-system.md — fonts, color palettes, type scales, layout chromereferences/spreads.md — full library of spread treatments with copy-paste CSSreferences/print-pdf.md — MANDATORY print stylesheet + --pdf flag handling (every magazine HTML must include it so Chrome → PDF produces no blank pages)references/examples.md — how to invoke for HN / minutes / research / link roundups
The treatments library is the value. Don't reinvent — pick from the catalog.
Core flow
- Identify source — what is being rendered? A live feed (HN, RSS), a document (minutes, transcript), or a curated list?
- Curate / score — if the source is a feed, apply taste filters (skip lists, lean-into lists). If the source is a document, extract 8–12 items worth their own spread.
- Pick treatments — assign each item a spread treatment from the catalog based on its tone (security → dark midnight, creative → magazine cover, civic → poster, dev tools → terminal, science → scientific, urgent issue → rose alert stamp, etc.).
- Generate HTML — single self-contained file using the design-system shell. Each item is its own
<section class="spread sNN"> with full viewport height.
- Save — to
~/Downloads/<slug>.html by default unless user specifies a path. Optionally upload to Google Drive folder if user asks.
- Open / report —
open the file in the user's browser and report the path + a one-line summary of treatments used.
Style commitments (non-negotiable)
- Document order:
<body> → <script> → <style> (NOT the traditional <head> with style/script before body). Write the body content first, then any <script>, then <style> last. Browsers reparent these correctly. This order ships dramatically better magazines than the traditional layout — it forces content-first generation and prevents running out of attention on scaffolding before the spreads exist. See "Document skeleton" below.
- Fonts: Fraunces (serif display) + Inter (sans body) loaded via Google Fonts. Optional: JetBrains Mono for terminal/code spreads, Space Grotesk for scientific spreads.
- No small text anywhere. Body minimum 22px. Spread display sizes use
clamp() ranging from 48px → 200px+.
- Each spread is its own world. No two spreads share the same background color, type treatment, AND numeral treatment. Variety is the whole point.
- Self-contained. All CSS inline in
<style>. No external JS required (except Google Fonts link). User opens one file, it works forever.
Document skeleton (MANDATORY)
Every magazine file uses this exact order — body content first, scripts second, styles last:
<!doctype html>
<html lang="en">
<title>The Morning Edition — 2026-05-18</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:...&family=Inter:...&display=swap" rel="stylesheet">
<body>
<header class="masthead">...</header>
<section class="spread s01">...</section>
<section class="spread s02">...</section>
<!-- ... more spreads ... -->
<footer class="colophon">...</footer>
</body>
<script>
// Optional: print mode toggle, ?pdf= flag handling, anchor smooth-scroll, etc.
</script>
<style>
/* All CSS lives here, last. See references/design-system.md and references/spreads.md. */
</style>
</html>
Notes:
- No
<head> wrapper. <title>, <meta>, and <link rel="stylesheet"> for Google Fonts go at the top of the document before <body> — browsers parse them into the implicit head.
<style> at the end of the document still applies to all preceding content (CSS is order-agnostic for selector matching). The trailing position is the whole point — body comes first.- This is non-traditional but valid HTML5. Do not "fix" it back to the standard
<head><style><script></head><body> order.
- Numerals matter. Every spread has a giant numeral (01, 02, 03…) with its own treatment per the spreads catalog.
- Source line on every spread. Small (but not tiny — 18px+) attribution line at the bottom: source name + URL + any metadata.
Curation rules (when input is a feed)
If the user has previously stated a taste profile (love list / skip list), apply it. Otherwise infer from context:
- Lean in: AI tools, dev tools, privacy, security, weird science, creative software, civic transparency, infrastructure, anything actionable.
- Skip: crypto pumps, generic political flame wars, layoff hot-takes, "I quit my job," dating apps, fundraising press releases, generic Show HN unless useful.
- Flag "applies to you" when a story directly intersects something the user is actively working on — use the red rotated badge from the design system.
If you're unsure of taste, ask once at the start. Don't ask per-item.
Output requirements
- File path:
~/Downloads/<slug>-YYYY-MM-DD.html unless overridden
- Title in
<title> should be evocative ("The Morning Edition — April 15, 2026", "Field Notes — SFPUC CAC, April 14")
- Include a masthead spread (cover) and a colophon spread (sign-off) — these are part of the form
- After generation:
open the file, then in chat give a 5-line max summary (file path, what's in it, treatment list)
Mandatory follow-up
After the file opens, ask the user if they want a recurring routine to generate this on a schedule (cron, Claude Code Routine, or loop skill). Magazine output is high-effort — automating the recurring case is the whole win.
1---2name: magazine3description: Render any content as a magazine-style HTML editorial — single self-contained file, Fraunces + Inter typography, each section gets its own distinct full-viewport spread (hero, dark midnight, rose alert stamp, terminal, academic drop-cap, big-stat, vinyl vintage, poster, scientific, etc.). Use when the user asks to 'magazine-style', 'editorial layout', 'morning edition', 'render as a zine', or wants any list / digest / report / minutes / curated content rendered as a designed publication instead of raw text. Triggers: 'magazine', 'morning edition', 'editorial', 'newsletter', 'zine', 'magazine-style', 'render this as a magazine', 'make it look like a magazine', 'beautiful html', 'designed digest'. Especially good for: HN/RSS feeds, meeting minutes, research summaries, project status reports, op-ed drafts, link roundups, daily briefings.4---56# Magazine78Turn any content into a single self-contained HTML magazine where each item gets its own full-viewport spread with distinct typography, color, and layout treatment. Inspired by editorial design (NYT Magazine, The Atlantic, Wired, Pitchfork, MIT Technology Review).910## When to use1112- User asks for a "morning edition," "daily digest," "newsletter," "magazine," "zine," or "editorial" version of any content13- User wants a list of items (stories, projects, meetings, links) rendered with real visual variety, not as a markdown list14- User wants meeting minutes, research, or reports presented as if for publication, not for a tracker15- User wants something to feel "designed" — different background colors, layout, numeral treatment per item16- User specifically references the previous Morning Edition output and asks to recreate the format for a different topic1718## Don't use for1920- Plain working documents (memos, code review, technical specs) — use plain markdown / Google Docs21- Single-screen things — magazine layout is for multi-spread digests and lists22- When the user wants editable Google Docs — magazine output is HTML, not Docs-friendly2324## Required reading before generating2526Before writing any output, read these in order:27281. `references/design-system.md` — fonts, color palettes, type scales, layout chrome292. `references/spreads.md` — full library of spread treatments with copy-paste CSS303. `references/print-pdf.md` — **MANDATORY** print stylesheet + `--pdf` flag handling (every magazine HTML must include it so Chrome → PDF produces no blank pages)313. `references/examples.md` — how to invoke for HN / minutes / research / link roundups3233The treatments library is the value. Don't reinvent — pick from the catalog.3435## Core flow36371. **Identify source** — what is being rendered? A live feed (HN, RSS), a document (minutes, transcript), or a curated list?382. **Curate / score** — if the source is a feed, apply taste filters (skip lists, lean-into lists). If the source is a document, extract 8–12 items worth their own spread.393. **Pick treatments** — assign each item a spread treatment from the catalog based on its tone (security → dark midnight, creative → magazine cover, civic → poster, dev tools → terminal, science → scientific, urgent issue → rose alert stamp, etc.).404. **Generate HTML** — single self-contained file using the design-system shell. Each item is its own `<section class="spread sNN">` with full viewport height.415. **Save** — to `~/Downloads/<slug>.html` by default unless user specifies a path. Optionally upload to Google Drive folder if user asks.426. **Open / report** — `open` the file in the user's browser and report the path + a one-line summary of treatments used.4344## Style commitments (non-negotiable)4546- **Document order: `<body>` → `<script>` → `<style>`** (NOT the traditional `<head>` with style/script before body). Write the body content first, then any `<script>`, then `<style>` last. Browsers reparent these correctly. This order ships dramatically better magazines than the traditional layout — it forces content-first generation and prevents running out of attention on scaffolding before the spreads exist. See "Document skeleton" below.47- **Fonts**: Fraunces (serif display) + Inter (sans body) loaded via Google Fonts. Optional: JetBrains Mono for terminal/code spreads, Space Grotesk for scientific spreads.48- **No small text anywhere.** Body minimum 22px. Spread display sizes use `clamp()` ranging from 48px → 200px+.49- **Each spread is its own world.** No two spreads share the same background color, type treatment, AND numeral treatment. Variety is the whole point.50- **Self-contained.** All CSS inline in `<style>`. No external JS required (except Google Fonts link). User opens one file, it works forever.5152## Document skeleton (MANDATORY)5354Every magazine file uses this exact order — body content first, scripts second, styles last:5556```html57<!doctype html>58<html lang="en">59<title>The Morning Edition — 2026-05-18</title>60<meta charset="utf-8">61<meta name="viewport" content="width=device-width,initial-scale=1">62<link rel="preconnect" href="https://fonts.googleapis.com">63<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>64<link href="https://fonts.googleapis.com/css2?family=Fraunces:...&family=Inter:...&display=swap" rel="stylesheet">6566<body>67 <header class="masthead">...</header>68 <section class="spread s01">...</section>69 <section class="spread s02">...</section>70 <!-- ... more spreads ... -->71 <footer class="colophon">...</footer>72</body>7374<script>75 // Optional: print mode toggle, ?pdf= flag handling, anchor smooth-scroll, etc.76</script>7778<style>79 /* All CSS lives here, last. See references/design-system.md and references/spreads.md. */80</style>81</html>82```8384Notes:85- No `<head>` wrapper. `<title>`, `<meta>`, and `<link rel="stylesheet">` for Google Fonts go at the top of the document before `<body>` — browsers parse them into the implicit head.86- `<style>` at the end of the document still applies to all preceding content (CSS is order-agnostic for selector matching). The trailing position is the whole point — body comes first.87- This is non-traditional but valid HTML5. Do not "fix" it back to the standard `<head><style><script></head><body>` order.88- **Numerals matter.** Every spread has a giant numeral (01, 02, 03…) with its own treatment per the spreads catalog.89- **Source line on every spread.** Small (but not tiny — 18px+) attribution line at the bottom: source name + URL + any metadata.9091## Curation rules (when input is a feed)9293If the user has previously stated a taste profile (love list / skip list), apply it. Otherwise infer from context:9495- **Lean in**: AI tools, dev tools, privacy, security, weird science, creative software, civic transparency, infrastructure, anything actionable.96- **Skip**: crypto pumps, generic political flame wars, layoff hot-takes, "I quit my job," dating apps, fundraising press releases, generic Show HN unless useful.97- **Flag "applies to you"** when a story directly intersects something the user is actively working on — use the red rotated badge from the design system.9899If you're unsure of taste, ask once at the start. Don't ask per-item.100101## Output requirements102103- File path: `~/Downloads/<slug>-YYYY-MM-DD.html` unless overridden104- Title in `<title>` should be evocative ("The Morning Edition — April 15, 2026", "Field Notes — SFPUC CAC, April 14")105- Include a masthead spread (cover) and a colophon spread (sign-off) — these are part of the form106- After generation: `open` the file, then in chat give a 5-line max summary (file path, what's in it, treatment list)107108## Mandatory follow-up109110After the file opens, ask the user if they want a recurring routine to generate this on a schedule (cron, Claude Code Routine, or `loop` skill). Magazine output is high-effort — automating the recurring case is the whole win.
barkleesanders