artifact-testinglisted
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