composing-htmllisted
Install: claude install-skill oaustegard/claude-skills
# composing-html
Produce single-file HTML artifacts without hand-writing the page chrome. The
composer supplies `<!DOCTYPE>`, `<head>`, inlined CSS, `base.js`, design
tokens, masthead, and colophon. You supply a title and the body content.
The product is the **chrome and inventory below** — primitives you can drop
into any artifact without re-deriving what a card, badge, or eyebrow looks
like. Templates are shortcuts on top of this, useful when the same artifact
shape repeats; see [Templates](#templates-shortcuts-for-repeat-structure)
near the end.
## Default workflow: freeform
`freeform` gives you the whole chrome with one content slot — `body_html` —
for the page body. Reach for it first. Reach for a template only when the
structure repeats across artifacts (see [Templates](#templates-shortcuts-for-repeat-structure)
near the end).
There are two ways to invoke it. **Use the `--set` flow for anything with a
substantial body** — it sidesteps the JSON-string escaping that bites
heredoc-style spec writing (newlines, quotes, `<`/`&` inside multi-line
HTML).
### Recommended: HTML in a file, metadata via `--set`
```
1. Write the body to a .html file directly (no JSON, no escaping).
2. python scripts/build.py build freeform \
--set title='My Page' \
--set subtitle='Optional subhead' \
--set body_html=@body.html \
--out artifact.html
```
`--set KEY=VALUE` assigns a literal string; `--set KEY=@FILE` loads the file
contents verbatim into that spec fi