菜单
Load when building a static HTML artifact: single page or multi-page site to make structured information explorable through layout and navigation.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/haowjy/meridian-base --skill structured-artifact命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when deciding where knowledge goes or reading/writing durable docs: AGENTS.md, .context/, KB, docs/, and work directories.
Use when writing or maintaining AGENTS.md, .context/CONTEXT.md, or CLAUDE.md mirrors: keep intent docs minimal and load-bearing.
Always load on agents that make durable source changes: keep colocated agent-facing knowledge synchronized with the source.
基于 SOC 职业分类
正在显示 SKILL.md
| name | structured-artifact |
| type | reference |
| description | Load when building a static HTML artifact: single page or multi-page site to make structured information explorable through layout and navigation. |
| model-invocable | false |
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.
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.
Single page: one question, layered depth. Reports, dashboards,
comparisons. Disclose with <details>, 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.
Ship static — plain <script> tags, zero build step. CDN tags by default;
vendor scripts when the artifact must work offline
(resources/layout-and-theme.md).
Resource snippets are pinned to a major version. Web-search the library's current version before building rather than trusting the snippet.
Narrow viewport first; wider layouts are enhancements. Touch targets ≥ 44px.
Colors from CSS custom properties on :root, default light, ☀/🌙 toggle
adds .dark to <html>.
resources/layout-and-theme.md has layout, theme, and mobile patterns.
meridian artifact serve ., tailscale serve, python -m http.server,
etc. Pick a random or incremented high port — don't claim 443 or other
well-known ports.
Check in a browser: first viewport carries the answer, pages render at
~375px, theme toggle works on both text and embedded content, cross-links
resolve, Mermaid passes meridian mermaid check (/md-validation).
| Pattern | When | Resource |
|---|---|---|
| Multi-page site | 3+ distinct topics | resources/multi-page-site.md |
| Mockup | Layout the reader must see | resources/mockups.md |
| Diagram | Relationships, flow, system maps | resources/diagrams.md |
| Data table | Sortable/filterable records | resources/data-table.md |
| Data chart | Quantities, trends, distributions | resources/data-chart.md |
| Timeline | Chronological events | resources/timeline.md |
| Tree / TOC | Hierarchy, document outline | resources/tree-and-toc.md |
| Card grid | Items with expandable detail | resources/card-grid.md |
| Diff / comparison | Before/after, version diff | resources/diff-view.md |
For custom node rendering or live filtering beyond Mermaid, see
resources/experimental-react-flow.md.
