القائمة
Load when building a static HTML artifact: single page or multi-page site to make structured information explorable through layout and navigation.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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.
Produce a transition brief and launch command for the user's next interactive primary.
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.
Anchor work in a work item: artifacts on disk, not in context.
Use when grilling should be grounded primarily in project artifacts. Loads `/grill`, checks project vocabulary and prior decisions first, and spawns bounded explorers when the answer should come from docs.
Load for large human-facing outputs: reports, docs, multi-section explanations, artifacts. Choose the right form for each beat (prose, diagram, table, mockup) and put the answer first, depth behind it. If the medium allows, use progressive disclosure.
