Typesetter

A Claude skill that turns any topic, conversation, or file into a single-file HTML document in one fixed reading design. Trigger it with /paper or /typeset.

Demo

See it in action: example output

Why

I find raw markdown daunting to read. Long explanations, plans, and guides sit better in a designed document than in a wall of # and -. I don't want to hand-design a new layout every time either, so the skill fixes one design system once and reuses it for every document after.

This is a reading document, not an app. No JavaScript, no controls, no state. If I want interaction, that's /aha or /crack, not this.

What

The skill accepts three kinds of input:

1. A topic. /paper why vector databases exist. Claude researches or draws on its own knowledge, then typesets the explanation.
2. Conversation content. /paper this plan, or "make what we just discussed readable". Typesets whatever we already worked out.
3. A file. Upload a markdown or text file. Claude reads it, restructures it for reading, typesets it.

If I invoke it bare with nothing to point at, it asks one question: what should the document teach, and who is it for.

Output is one .html file, saved and shared through present_files. No external requests, readable down to 360px.

How

The design is fixed in assets/template.html. The CSS never changes per invocation. Warm paper background, dark ink, a serif body for reading, monospace for labels and code, a blueprint teal and workshop amber accent pair. The one knob I can turn: ask for a different accent mood and it adjusts the three --accent-* hues, nothing else.

The process before writing anything:

1. Find the thesis first. Every document carries exactly one thesis panel, the single most important idea, stated in two sentences. If Claude can't state it that tight, it hasn't understood the content yet.
2. Outline as sections. One idea per section. Six to eight sections for a full document, fewer for a short one. Ordered as a reader's journey: the problem, the cast, the mechanics, the practice, the close.
3. Map content shape to component, not the other way around. This is the rule that matters most: structure must encode something true. A numbered flow claims "this is a sequence." Cards claim "these are parallel peers." Using a component where the claim is false makes the document lie. Full library and the shape-to-component table live in references/components.md.
4. Write in second person, active voice. The reader is "you". Things do things: "forge writes the plan," not "the plan is written." Bold sparingly, one signpost phrase per paragraph max. No em dashes anywhere, house style.
5. Fill the template, don't rebuild it. Copy assets/template.html, keep the CSS byte-identical, write only the HTML inside .wrap.

The component library

Shape	Component	Rule
The one central idea	Thesis panel	Exactly one, ever
2 to 4 parallel peers	Cards	Each keeps a color spine (rust, teal, olive) as identity
A true sequence	Numbered flow	Never for unordered lists, order must be real
Name + description pairs	Rows	Scales to many items without weight
Verbatim code or commands	Snippet	Escape < and >, always
One must-not-miss warning	Callout	Max one per section, or the reader stops trusting it
Abstract idea needing grounding	Analogy pull	Max one per section, skip if the idea is already concrete
Everything else	Plain prose	Correct default; not every section needs a costume

Quality floor

Before the file goes out, Claude checks: single file, no external requests, readable at 360px, all snippet brackets escaped, exactly one thesis panel, one h1 with sections as h2, CSS untouched except permitted accent hues.

Install

This is a Claude Code skill: a folder with a SKILL.md that Claude loads and triggers on. Claude Code looks for skills in .claude/skills/ (project-scoped) or ~/.claude/skills/ (available in every project).

1. Copy or clone this folder into one of those locations under the name typesetter:
   • Project-scoped: .claude/skills/typesetter/
   • Personal, all projects: ~/.claude/skills/typesetter/
2. Make sure the folder keeps its contents intact: SKILL.md, assets/template.html, and references/.
3. Start a new Claude Code session (or run /doctor in an existing one) so it picks up the new skill.
4. Invoke it with /paper <topic>, /typeset <topic>, or by asking Claude to make something "readable like my guide".

Suggested uses

• Turn a messy planning conversation into something I can actually reread. /paper this plan at the end of a long thread, instead of scrolling back through chat history.
• Explain a concept I want to internalize, not just skim. /paper how transformers attend to context. The thesis-first rule forces a real single idea out of it, not a wall of facts.
• Convert a rough markdown file into a guide worth sending someone else. Upload the file, ask for the html version, get something with an actual reading hierarchy instead of raw headers and bullets.
• Compare a small set of options side by side. Anything with 2 to 4 real peers (tools, approaches, tradeoffs) is what the card component is for. Don't force it past 4; that's what rows are for.

Don't reach for this when the output needs interaction or state. That's a different skill, and forcing it here would break the "reading document, not an app" rule that the whole design depends on.