← ClaudeAtlas

frontend-design-systemlisted

Dashboard conventions — single static HTML file, vanilla DOM APIs, strict XSS hygiene
sefaertunc/anthropic-watch · ★ 1 · Web & Frontend · score 67
Install: claude install-skill sefaertunc/anthropic-watch
# Frontend Design System — anthropic-watch The "frontend" is one file: `public/index.html`. It is a static dashboard that fetches `run-report.json` and `all.json` from GitHub Pages and renders them with vanilla DOM APIs. There is **no framework** (no React/Vue/Svelte), **no build step** (no bundler, no transpiler, no PostCSS), and **no component library**. These are intentional choices — the dashboard must be viewable by cloning the repo and opening the file, and deployable by copying the file to Pages. ## Rendering Rules 1. **Never use `innerHTML` for anything that includes data.** Build the DOM with `document.createElement(...)` and assign text via `textContent`. The v1.0.1 release replaced all `innerHTML` string templates specifically because they allowed `javascript:` URL XSS through `item.url`. 2. **URLs must be validated before use.** Use the `safeUrl()` helper (rejects anything that isn't `http://` or `https://`) before setting `href` on any element. This applies to `item.url`, `sourceName` links, anything that comes from the feed. 3. **External item links use `rel="noopener noreferrer"`** and `target="_blank"`. 4. **`textContent` over `innerText`** for consistency and performance. 5. **Dates:** format with `toLocaleString()` or equivalent at render time; never trust pre-formatted date strings from the feed (they are ISO 8601, not display-ready). 6. **Null handling:** `item.date` may be `null`; render a sensible placeholder (blank or dash), never "null" or "undefin