← ClaudeAtlas

artifact-testinglisted

Verify an artifact before publishing - the self-contained check, all three theme states, greyscale and print, responsive widths, every data state, keyboard and screen-reader passes, and the observe-before-you-publish rule for connector calls. Publishing distributes, so this is the gate before it. Trigger on "test the artifact", "before I publish", "check the page", "did I miss anything", "pre-publish", "verify the artifact", "review my artifact", "QA".
Lukehle/chartroom · ★ 0 · Testing & QA · score 70
Install: claude install-skill Lukehle/chartroom
# Artifact testing Publishing distributes. This is the gate before that, and "it rendered" is not a passing result — a page can render perfectly and still be wrong in the other theme, unreadable when printed, unusable by keyboard, and blank for anyone without the connector. Work the passes in order. Each one catches a different class of failure. --- ## Pass 1 — self-contained The strict CSP blocks every external host, so anything remote silently fails to load. - [ ] No `<script src="http…">`, no `<link href="http…">`, no `@import url(http…)` - [ ] No remote images; assets are inline SVG or `data:` URIs - [ ] No `fetch`/XHR/WebSocket to any origin (connector calls go through the capability API, not through `fetch`) - [ ] No web fonts — a system stack, or a base64-embedded font you have budgeted for ```bash grep -nE "https?://[^\"')]+" page.html | grep -vE "^\s*<!--|schema\.org|w3\.org" ``` Every surviving hit is either a link the user clicks (fine) or a resource that will not load (not fine). - [ ] `<title>` present **in the first 8KB** — a large inline `<style>` can push it out of range - [ ] Rendered size under 16MB, and realistically far under --- ## Pass 2 — all three theme states Not two. Explicit dark, explicit light, and system default which stamps no attribute. | # | State | Catches | |---|---|---| | 1 | System default, OS light | Baseline | | 2 | System default, OS dark | **Tokens defined only inside a `[data-theme]` block** | | 3 | `data-theme="lig