haowjy/structured-artifact
cw/skills/structured-artifact/SKILL.md
Load when building a static HTML artifact — single page or multi-page site — to make structured information explorable through layout and navigation.
$ install --global
skillsauthnpx skillsauth add haowjy/creative-writing-skills structured-artifactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 5, 2026, 2:50 AM276.3s12 files scanned
SKILL.md
- name:
- structured-artifact
- description:
- |
- disable-model-invocation:
- true
Structured Artifact
A structured artifact is 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.
One page or several
Start from one index.html. Its first viewport carries the answer, and depth
discloses in place — <details>, popovers, a collapsible detail panel. Grow
into a folder (index.html + child pages + shared.css) when readers need
whole pages per branch: the index becomes a map with links, and each child
page stands alone with its own lede. resources/multi-page-site.md has the
folder mechanics.
Build so it keeps working
Everything ships static — plain <script> tags, zero build step — so the
artifact opens anywhere, years later, with nothing installed. CDN tags are
the default; vendor the scripts into the folder when the artifact must work
offline (resources/layout-and-theme.md). Resource snippets show the shape
of each library's use, pinned only to a major version — before building,
web-search the library's current version and syntax when anything looks
dated, rather than trusting the snippet as frozen truth. Design for a
narrow viewport and let wider layouts be enhancements; touch targets stay
≥ 44px and diagrams pan and pinch. Drive colors from CSS custom properties on
:root, default light, with a ☀/🌙 toggle that adds .dark to <html> —
readers get a readable page in daylight and a choice at night.
resources/layout-and-theme.md has the concrete layout, theme, and mobile
patterns shared across everything below.
Verify the end state
Open the artifact in a browser before calling it done — a snippet that looked right in the editor still fails at runtime (a CDN URL 404s, a library changed its API, a diagram overflows). Check what a reader meets: the first viewport carries the answer, every page renders at ~375px width, the theme toggle flips both text and embedded content, links between pages resolve, and Mermaid diagrams render correctly.
Enrichments
Mix and match resources and patterns as needed, starting with the simplest pattern and adding complexity only when information hierarchy calls for it.
Load a resource when a beat calls for its pattern:
| Pattern | When a beat needs | Resource |
|---|---|---|
| Multi-page site | Index + child pages, nav, cross-links | resources/multi-page-site.md |
| Mockup | Wireframe or annotated plan the reader must see | resources/mockups.md |
| Diagram | Dependencies, flow, system maps | resources/diagrams.md |
| Data table | Records with sortable/filterable columns | resources/data-table.md |
| Data chart | Quantities, trends, distributions | resources/data-chart.md |
| Timeline | Chronological events with detail | resources/timeline.md |
| Tree / TOC | Hierarchy navigation, document outline | resources/tree-and-toc.md |
| Card grid | Items with summary + expandable detail | resources/card-grid.md |
| Diff / comparison | Before/after, version diff | resources/diff-view.md |
For custom node rendering, drag, or live filtering on graphs beyond what
Mermaid offers, see resources/experimental-react-flow.md.
Related Skills
haowjy/zoom-out
tools
VerifiedTrustedCommunity
Use when orienting in an unfamiliar area — fans out exploration across structure, knowledge, and history, then synthesizes one orientation map.
298SKILL.mdUpdated Jul 5, 2026
haowjy/reflect
testing
VerifiedTrustedCommunity
User-invoked pause before reporting to check intent vs literal completion, surface adjacent wins, and route knowledge capture.
298SKILL.mdUpdated Jul 5, 2026
haowjy/qi-layer
development
VerifiedTrustedCommunity
Use when exploring or changing the codebase: read AGENTS.md first, use .context/CONTEXT.md for detail, keep intent docs succinct.
298SKILL.mdUpdated Jul 5, 2026
haowjy/md-validation
data-ai
VerifiedTrustedCommunity
Use when validating markdown links or Mermaid diagrams.
298SKILL.mdUpdated Jul 5, 2026