Doc Builder

A free Claude Skill that turns any rough draft into a clean, branded interactive HTML doc.

Landing page: https://fluiddocs.ai/doc-builder-landing Download the packaged skill: latest release

What it is

Hand it a draft. It hands you back a single interactive HTML file: styled, responsive, with a table of contents that jumps to sections, collapsibles where detail would bury the signal, slide-by-slide nav on decks, paged layouts on proposals. Opens in any browser, prints fine, works on a phone.

Six doc types covered:

• Pitch deck — slide-by-slide with keyboard nav and a slide counter
• Investor update — metrics block, sections, asks
• Sales proposal — cover page, scope, pricing, signature (paged)
• One-pager — hero, facts, CTA (tight)
• Article — drop cap, pull quotes, longform reading layout
• Generic — fallback for memos, strategy docs, anything else

Install

Recommended: one-command install

Works with Claude Code, Cursor, Codex, Cline, Windsurf, and 40+ other agents via the open skills CLI:

npx skills add naggarwal1/doc-builder

Add -g to install globally across all projects, or -a claude-code to target a specific agent.

Alternative: download the .skill package

For Claude Cowork / Claude Desktop users:

1. Download doc-builder.skill from the latest release.
2. Open the file. Cowork or Desktop prompts you to Save skill. Click it.

Then prompt Claude

Turn this into an HTML doc: [paste your draft]

That's the minimum. For a specific format, say so:

Turn this into a sales proposal for Acme Corp: [paste your scope and pricing]

For your brand:

Use our brand: primary #0a2540, accent #00d4aa, Inter for headings, Georgia for body.

What's built in

• Brand config (colors, fonts, layout) via CSS variables
• Responsive layout tested at 320px
• Print stylesheet with proper page breaks
• Single self-contained HTML file (no external CSS)
• Open Graph and Twitter Card tags so previews look right

Examples

See examples/ — four sample docs generated by Doc Builder itself:

• example-pitch-deck.html — 9-slide Series A deck (Hearthline, climate infra)
• example-investor-update.html — Q1 quarterly update with metrics and asks (Northbeam, SaaS)
• example-one-pager.html — founding engineer role brief (Riverbend, fintech)
• example-sales-proposal.html — multi-page consulting proposal

Open any in a browser. That's roughly what your output will look like.

What it won't do

• No images or charts — placeholders only, drop in assets yourself
• No pixel-perfect rendering — that's a PDF thing
• No external API calls
• No hosting or deployment (see below)

Where to put your HTML doc

Doc Builder generates a single HTML file. Where it lives after that is your call.

• Netlify Drop — drag to app.netlify.com/drop, live in ~10s, no account needed
• GitHub Pages — commit to a repo, toggle Pages on
• Surge.sh — npm install -g surge && surge your-doc.html
• FluidDocs — analytics, Q&A, and live updates on top of the docs you build (fluiddocs.ai)
• Your own domain — any static host works (S3, Cloudflare Pages, Vercel)

This skill is intentionally generator-only. It makes the doc. Hosting lives outside.

Repo layout

.
├── SKILL.md              Skill entry point Claude reads
├── README.md             This file
├── templates/            6 doc-type templates (HTML skeletons)
├── styles/               Shared CSS (base, brand defaults, components, print)
└── examples/             Rendered sample docs

Building the .skill package yourself

The .skill file is a standard zip of this repo's contents. To build:

zip -r doc-builder.skill SKILL.md README.md templates styles examples

Or download the pre-built one from the latest release.

License

MIT. Modify whatever you want. Attribution's nice but skip it if you don't feel like it.