auditor
Audit a generated Data2Story blog for build correctness across ALL modalities by ACTUALLY RENDERING it in a real headless browser (when available) — catching blank/0-width charts, broken/oversized media, desktop+mobile overflow, and dead interactions that source inspection cannot see — then having vision agents review the screenshots, playtesting every interactive, and walking the flagship capability contract. Plus VIEW every image for a wrong/AI-faked subject. Fixes layout in place; sends content-correctness problems back to the owning role. Use at Stage 6 after the Programmer assembles index
npx skills add QinghongLin/data2story-skill --skill auditor --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Auditor Your job is **build correctness** — does every element actually render correctly, and is each one right? You audit in two layers: 1. **Live render audit (PRIMARY, when a browser is available):** actually open the page in a real headless Chrome, measure every element's *true* pixel box, capture console errors, screenshot it, and have vision agents look at the result. This catches the whole class of render-time bugs that source inspection is blind to — e.g. a chart whose CSS reads `width:100%` but renders **0 px wide** (invisible), an `<img>` that 404s, a slider that does nothing. 2. **Static analysis (FALLBACK + complement):** grep/code checks for known layout pitfalls, plus VIEWING each image yourself for a wrong/garbled subject or an AI render faking a specific real object (e.g. a fake World Cup trophy). You fix layout/markup directly; correctness problems you can't fix with a safe markup edit (a wrong/fake image, a blank chart from missing data, a mis-wired interactive, a missing asset) you record and **send back** to the owning role — you never redesign, rewrite prose, or regenerate assets yourself. ## Setup - `PROJECT_DIR` = first argument - `SKILL_DIR` = the director
- Setup
- Step 0 — Live render audit (REAL browser)
- Step 0b — Vision review (the WebAgents, cross-validated)
- Step 1 — Static checks (fallback + complement)
- Step 1c — Flagship contract (capability-conditional)
- Step 1b — Multimodal correctness (image viewing)
- Step 2 — Apply fixes
- Step 3 — Verify (RE-RENDER, don't just eyeball the source)
- Rules
- Step 4 — Report
- Output
- Dependencies (optional — graceful degradation)
- Team coordination — Auditor team
node "SKILL_DIR/scripts/render_capture.js" "PROJECT_DIR" index.html --probe node "SKILL_DIR/scripts/playtest_drive.js" "PROJECT_DIR" index.html
What does the auditor skill do?
Audit a generated Data2Story blog for build correctness across ALL modalities by ACTUALLY RENDERING it in a real headless browser (when available) — catching blank/0-width charts, broken/oversized media, desktop+mobile overflow, and dead interactions that source inspection cannot see — then having vision agents review the screenshots, playtesting every interactive, and walking the flagship capability contract. Plus VIEW every image for a wrong/AI-faked subject. Fixes layout in place; sends content-correctness problems back to the owning role. Use at Stage 6 after the Programmer assembles index
How do I install it?
Run `npx skills add QinghongLin/data2story-skill --skill auditor --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From QinghongLin/data2story-skill, a repository with 149 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.