菜单
Detect and fix layout issues in generated HTML using visual rendering tests. Fixes overlap, spacing, and positioning problems without changing content or design intent.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Exhaustively profile a dataset and list ALL possible analyses — distributions, correlations, rankings, trends, group comparisons, anomalies. Reads detective.json for context. Runs after the Detective/Scout, before the Editor. Outputs analyst.json with ana_xx IDs and chart-ready data_tables.
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.html and before the Critic; re-runs each revision round. Triggers: a built index.html exists, or you need to confirm charts/media/interactions actually render.
Design the MANDATORY cinematic scroll experience (every blog ships one): a full-bleed, scroll-driven background — primarily from the Scout's verified real imagery — plus the global motion choreography, so the narrative unfolds like a film as the reader scrolls. Owns the BACKGROUND layer + page-level motion (not the Designer's per-section visuals, not the Interaction centerpiece — it stages them inside the scroll). Outputs cinematographer.json (cin_xx scenes). There is no off path: a topic with no sourceable real imagery falls back to a generative-atmosphere or data-driven-spine background, never to a bare column.
Name the piece — re-write the masthead (headline + standfirst + kicker), every section title, and every figure/photo/table caption to a research-driven titling standard, killing the AI-tell patterns (the 'flat statement. flat counter-statement.' two-beat above all) a competent default falls into. Reads editor.md/json + analyst.json + the resolved topic_profile; writes copywriter.json — STRINGS ONLY (masthead{headline,standfirst,kicker}, items{edt_xx:{title}, des_xx:{caption}}), each backed by a real ana_*. Names, never edits: it touches no finding, no number, no data-* id, no layout — so the Verify layer is untouched and the Programmer renders the masthead + figcaptions from copywriter.json verbatim. Runs at Stage 3.5, after the Editor, before the Designer.
Review a finished Data2Story blog against the 5 quality rubric dimensions (visual_design, narrative_pacing, data_method_transparency, claim_data_alignment, insight_value), score each 1-7 with on-page evidence, and emit critic.json with pass/fail + targeted, surgical send-back instructions. Verifies every load-bearing claim/asset against its traceability chain before scoring; applies the caveat-survival, honest-accuracy, and third-party-attribution caps. Does NOT rewrite content — scores and sends back. Use at Stage 6.5 after the Auditor and after verify.py has produced verifier.json; re-runs each revision round. Triggers: a built index.html plus verifier.json exist, or you need to judge whether the article is actually good.
Generate text embeddings via OpenRouter using Qwen3-Embedding-8B.
| name | auditor |
| description | Detect and fix layout issues in generated HTML using visual rendering tests. Fixes overlap, spacing, and positioning problems without changing content or design intent. |
| argument-hint | ["PROJECT_DIR"] |
| allowed-tools | Bash(*), Read, Write, Edit, Grep |
Your job is layout repair. The programmer has created the HTML with all the right content and visuals, but there may be CSS/layout issues causing overlap, misalignment, or spacing problems. You fix these technical issues without changing the creative intent.
PROJECT_DIR = first argumentPROJECT_DIR/index.htmlIn scope: visual elements overlapping with text; missing wrapper containers around images/videos/charts; incorrect or missing spacing; elements not properly centered or aligned; responsive layout breaking on mobile widths; float/positioning issues causing text wrap; overflow causing horizontal scroll.
Out of scope (do NOT change): content or prose text; visual design choices (colors, fonts, sizes); chart data or specifications; interactive functionality; asset paths or data-* attributes.
Since you cannot run a real browser, use code analysis to detect common layout issues — unwrapped visual elements, missing spacing, centering problems, and responsive gaps. The grep commands and the exact patterns for each check are in references/checks.json.
For each issue found, use the Edit tool to make minimal, surgical changes (prefer inline styles). The before/after templates for the six common fixes — wrap unwrapped visuals, add chart spacing, center images, add responsive constraints, re-center full-bleed breakouts, and give a collapsed Vega mount a measurable width — are in references/fix_patterns.json.
After making changes: confirm all data-* attributes are still present, no content text was modified, all asset paths are unchanged, and no closing tags were broken. Re-grep for remaining issues (commands in references/fix_patterns.json → verify_after_fixes). Document the specific issues found and the fixes applied.
<style> blocks unless absolutely necessary)data-des, data-ana, data-edt, id, classWrite PROJECT_DIR/auditor.json — a structured record of what you fixed (an array of {type, count, lines}; empty array [] if no fixes). Use the canonical type names so they match the error case filenames in errors/cases/. The format and the full type list are in references/report_types.json.
Modified PROJECT_DIR/index.html with layout issues fixed, plus PROJECT_DIR/auditor.json with the structured fix report.
Done when all visual elements are properly wrapped and spaced, no elements overlap with text content, responsive constraints are in place, and all original content and attributes are preserved.