Offline component reference

HTML Artifact Component Specimen

All nine copy-ready components are shown with repository-verifiable content, the full bundled token system, and no remote dependencies.

Metric cards

Source snippet: assets/components/metric-card.html

9

Component snippets

The first-party component set has nine focused files.

3

Fast-path steps

Start from the template, add snippets, then validate.

0

Remote dependencies

Every artifact remains self-contained and offline.

Comparison table

Source snippet: assets/components/comparison-table.html

HTML artifact composition layers
Layer Decision Bundled source
Page Choose the narrative skeleton. Template references
Section Match the information shape to a component. Component snippets
Foundation Apply layout primitives and semantic tokens. Starter and tokens

Data table

Source snippet: assets/components/data-table.html

Bundled sources used by the component layer
Source Role Loading rule
style-tokens.css Defines the visual token system. Inline before component CSS.
starter-template.html Provides the semantic shell and layout primitives. Copy as the artifact baseline.
assets/components Provides section-level assembly snippets. Copy only the components in use.

timeline

Source snippet: assets/components/timeline.html

  1. Step 1

    Start with the artifact skeleton

    Copy the starter template and retain its semantic structure.

  2. Step 2

    Assemble section components

    Add only the snippets needed by each information shape.

  3. Step 3

    Run the bundled validator

    Fix failures and account for every remaining warning.

Checklist

Source snippet: assets/components/checklist.html

  • Complete Inline the token systemComponent CSS resolves against the bundled variables.
  • Complete Keep the page self-containedNo remote stylesheet, font, script, or request is required.
  • Next Validate the finished pageResolve failures and explain accepted warnings.

Quote card

Source snippet: assets/components/quote-card.html

Every artifact must be self-contained, semantic, accessible, and reviewable.

HTML Artifact output contract

Code block

Source snippet: assets/components/code-block.html

Validate the self-contained component specimen
python skills/development-workflows/html-artifact/scripts/check_html_artifact.py skills/development-workflows/html-artifact/assets/demo-all.html

Details

Source snippet: assets/components/details.html

Why comparison tables reuse starter classes

The starter already defines matrix, decision, and evidence table behavior, so the component snippets only assemble semantic examples.

Badges

Source snippet: assets/components/badge.html

Ready Needs review Reference Supporting detail