composing-html

Solid

Composes single-file HTML artifacts (PR review writeups, status reports, incident postmortems, slide decks, design systems, prototypes, flowcharts, module maps, feature explainers, kanban boards, prompt tuners) from a small JSON spec instead of hand-written HTML/CSS/JS. Use when the user asks to "compare options side-by-side", requests an HTML version of a report or review or deck, asks for a flowchart, status update, postmortem, design system reference, interactive prototype, custom editor — or explicitly says "HTML artifact", "single HTML file", "self-contained HTML". Skip for ad-hoc HTML snippets (forms, emails, embedded widgets) where there's no template fit.

Web & Frontend 134 stars 7 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
71
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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...

Details

Author
oaustegard
Repository
oaustegard/claude-skills
Created
9 months ago
Last Updated
yesterday
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

crafting-html

Use when producing a standalone HTML artifact that is not already covered by another workbench skill (writing-spec, writing-plans, brainstorming, systematic-debugging) or by research:research. Covers PR walkthroughs, code explainers, slide decks, status and incident reports, design prototypes, SVG illustrations, custom editing interfaces, and similar single-file HTML outputs. Bundles 20 reference examples plus an index file (21 files total) for inspiration; read individual files lazily, not all at once.

0 Updated 1 weeks ago
pgoell
Web & Frontend Listed

html-artifacts

Produce a self-contained HTML artifact instead of a markdown document when the request is for content that benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use this skill aggressively whenever the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer," "summary," "comparison," "review," "PR description," "mockup," "diagram," "flowchart," "deck," "slides," "status update," "post-mortem," "incident report," "playground," or a one-off "editor" or "tool" for triaging/reordering/tuning anything — even if they don't explicitly say "HTML" or "artifact." Also trigger when the user asks Claude to "explain," "summarize," "compare," "explore options for," "brainstorm directions for," or "walk through" a non-trivial topic. Stay in markdown only for short conversational replies, code-only outputs, terminal-style command answers, and content that's genuinely just a few sentences.

1 Updated yesterday
dovydaskarbutovskis20-art
Data & Documents Listed

generate-html-report

Generate a rich, self-contained HTML document instead of a long Markdown file — for specs & plans, PR/code-review explainers, design mockups & prototypes, research/status reports, or throwaway editing UIs. Use when the user asks to write a "report", wants a PR or piece of code explained visually, wants to compare design options, needs a research or status writeup, wants a diagram/flowchart, or when a Markdown plan/spec is getting too long to read comfortably.

1 Updated today
atman-33