메뉴
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 직업 분류 기준
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.
| 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.
