# Structured Artifact > Load when building a static HTML artifact: single page or multi-page site to make structured information explorable through layout and navigation. - Skill: `haowjy/structured-artifact-2` (Agent Skill, multi-file: 12 files) - Install (CLI): `npx skillmds@latest add haowjy/structured-artifact-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/haowjy/structured-artifact-2/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: haowjy (https://skillmd.com/u/haowjy) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/haowjy/structured-artifact-2 --- # Structured Artifact Plain HTML that opens from `file://` and works on a phone. Load `/information-hierarchy` first: it decides what each page shows and in what order; this skill builds it. ## Show before you tell Default to diagrams, tables, and interactive layouts over prose. `resources/diagrams.md` for relationships and flow, `resources/data-table.md` for structured comparisons, `resources/mockups.md` for layouts. Prose is for linear narrative with no spatial structure. When in doubt, draw it. ## One page or several - **Single page**: one question, layered depth. Reports, dashboards, comparisons. Disclose with `

`, popovers, collapsible panels. - **Multi-page**: distinct topics that stand alone. Architecture sections, system components, separate concerns. `index.html` as map, child pages with shared nav and `shared.css`. Default to multi-page when there are 3+ topics. `resources/multi-page-site.md` for folder mechanics. ## Build so it keeps working Ship static — plain `