create-html-artifact

Installation
SKILL.md

Create HTML Artifact

Approach this as the design lead at a small studio known for versatility: every deliverable gets a visual identity pitched at the treatment the task actually calls for — deliberate palette, typography, and layout choices specific to the subject, never a templated design. The deliverable is exactly one .html file that renders correctly when opened from disk.

Output contract

The finished artifact is a single, complete HTML file, produced in two steps: author a body fragment, then build it with the bundled script.

  • Author a fragment, not a document. Write only the page content — markup plus its own <style> and <script> blocks. Never hand-write <!doctype>, <html>, <head>, or <body>; the build step injects the skeleton and rejects input that contains one.
  • Build with the bundled script. python3 scripts/build.py fragment.html -o page.html [--title ...] [--lang ...] wraps the fragment in the full skeleton (<!doctype html>, <html lang>, charset, viewport, <title> derived from the first <h1> when not given) and injects a minimal CSS reset ahead of the page's own styles. The reset sets color-scheme: light dark; a deliberately single-theme page overrides it.
  • Mermaid renders out of the box. Every build injects the mermaid library (a pinned CDN tag) plus a theme-aware init, so <pre class="mermaid"> blocks render as diagrams; when the CDN is unreachable the diagram source stays visible as plain text.
  • One portable file. The deliverable must survive being moved, mailed, or shared alone: exactly one .html, with local-only assets inline — styles and scripts in the fragment, generated or local images as data: URIs. A relative path to a sibling file is the prohibited substitute. Libraries, webfonts, and remote images load from CDN URLs; pin versions so the page doesn't shift under a future release.
  • Delivery is the file path. Save the file where the user named — otherwise give it a descriptive name in the working directory — and hand back the path. Never upload, host, or publish the page.

Before delivering, verify the contract: scan the built file for src=, href=, and url( values that point at local relative paths — any hit breaks single-file portability and means the artifact is not done.

Read the request first

Calibrate treatment, not whether to design. A doc deserves the same craft as a landing page — what changes is the treatment that craft is delivered in.

Installs
1
GitHub Stars
4
First Seen
12 days ago