agent-ks-artifactslisted

Use this skill to BUILD a self-contained HTML artifact as a content file in an agent-knowledge-system project — a report page, dashboard, data visualization, design-system swatch / type-specimen / component gallery, a variation set comparing N design options of one UI element, or a brand-guideline showcase — published as an `NN_`-prefixed `.html` page in a docs section (the `/artifacts` content type) or inside a tracker `brainstorm/` / `notes/` folder, with an optional `.meta.json` sidecar. Covers treatment calibration, honoring the host theme contract, dual-theme + self-containment discipline, the chart/dataviz procedure and the palette validator, design-system authoring flows, the variation-set / options-explorer pattern, and the pre-publish verify gate. Trigger eagerly whenever the user asks to build / design / generate an artifact, an HTML report, a dashboard, a chart, a data viz, a design system, a set of design options / variations to compare or pick from, or a brand guideline for THIS project. This is
sidhanthapoddar99/agent-knowledge-system · ★ 3 · Data & Documents · score 79

Install: claude install-skill sidhanthapoddar99/agent-knowledge-system

# agent-ks-artifacts — building HTML artifacts in this framework Operating manual for building **artifacts**: self-contained HTML pages — reports, dashboards, interactive data visualizations, design-system showcases — that ship as content files in an agent-knowledge-system project and render inline in the docs chrome plus full-page at their own URL. > **Scope fence — read this before anything else.** An *artifact* here is an > `.html` file in this repo, served by the framework at `/artifacts/<path>`. It is > **not** a claude.ai Artifact (the built-in `Artifact` tool, its gallery, its CSP, > its `<body>`-fragment wrapping). Everything about how one is published, themed, > and delivered is *this framework's* mechanism, not claude.ai's. If a habit from > claude.ai artifact design conflicts with what this skill says, this skill wins. ## What an artifact is *here* - **A first-class content file.** An `NN_`-prefixed `.html` in a docs section shows in the sidebar like any page; an `.html` inside a tracker `brainstorm/` / `notes/` / subtask folder is a thinking-artifact beside the deliberation that produced it. - **A complete document, not a fragment.** You own the whole `<!doctype html>` — `<head>`, `<style>`, `<script>`, `<body>`. There is no host wrapper injecting a skeleton around your `<body>`. (This is the single most common carryover mistake from claude.ai material — see `references/publishing.md`.) - **Embedded with chrome intact, and full-page at its own URL.**