html-artifacts

Purpose

Create a static, human-readable HTML document from the material the user provides or authorizes. Use html.template.html as the visual and structural starting point. The default deliverable opens directly from disk: embed CSS, use system fonts, and require no server, build step, JavaScript, or external network resource.

This skill is document-type neutral. It presents supplied content clearly; it does not prescribe a software workflow, a canonical source format, or a particular artifact type.

Workflow

1. Read the requested source material and any directly linked local assets. Identify the audience, document purpose, required sections, output path, and whether an existing source is authoritative.
2. Ask only when a missing choice materially changes content, audience, or output location. If the supplied material is incomplete, label gaps or use placeholders rather than inventing facts, commitments, data, or decisions.
3. Choose a scannable hierarchy suited to the content: a concise header and summary, then logical sections. Use visual structure to improve comprehension rather than mechanically reproducing source formatting.
4. Start from the template and write a complete semantic HTML document. Include only elements that serve the document; remove unused template examples and placeholders.
5. Apply the element guidance below whenever the document contains that content.
6. Open the local file when practical and check it at desktop and narrow viewport widths. Confirm links and local assets resolve, text is legible, and the page has no horizontal overflow outside intentionally scrollable code, diagrams, or tables.
7. When revising, preserve content that remains valid, apply the requested change, and update the displayed date only when the document itself says it was updated.

Document design

• Use semantic HTML: header, main, section, headings in order, nav only for real navigation, figure/figcaption, table, pre/code, and aside for supplementary notes.
• Use the template's calm, neutral technical-document style: restrained color, generous whitespace, clear hierarchy, readable line lengths, and accessible contrast. Do not apply an organization or product brand unless requested.
• Give the document a useful <title>, a single clear <h1>, and a short summary when the source supports one.
• Keep content width comfortable for reading. Use minmax(0, ...) for grid tracks. Long paths, identifiers, URLs, and code must wrap or scroll inside their own container rather than overflowing the page.
• Use cards only to group distinct, short items. Prefer normal sections for narrative. Use callouts for decisions, assumptions, warnings, risks, or blockers; do not rely on color alone.
• Use relative links for local files and assets. Give meaningful alt text to informative images. Do not add forms, hidden content, fabricated status, analytics, editing controls, or decorative illustrations unless requested.