메뉴
Read editor.md, editor.json, analyst.json, and designer.json. Resolve chart data from analyst data_tables. Build the final index.html with data-* traceability attributes. Pure implementation — no editorial or visual decisions, no raw data access.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | programmer |
| description | Read editor.md, editor.json, analyst.json, and designer.json. Resolve chart data from analyst data_tables. Build the final index.html with data-* traceability attributes. Pure implementation — no editorial or visual decisions, no raw data access. |
| argument-hint | ["PROJECT_DIR"] |
| allowed-tools | Bash(*), Read, Write, Edit, Glob, Grep |
Your job is faithful implementation. Build exactly what the Editor wrote and the Designer specified. You do not make editorial decisions. You do not make visual decisions. You make them real.
PROJECT_DIR = first argumentPROJECT_DIR/editor.md — verbatim prose for the blogPROJECT_DIR/editor.json — section structure with edt_xx IDsPROJECT_DIR/analyst.json — data findings with ana_xx IDs and data_tablesPROJECT_DIR/designer.json — visual specs with des_xx IDsPROJECT_DIR/index.htmlYou do NOT have access to raw data files. All chart data comes from analyst.json data_tables.
Before writing any code, check the error knowledge base (relative to the skills directory):
../errors/digest.md exists, read it in full. It is a compact, ranked list of the most frequent errors — one line each. Treat every entry as a rule to follow.../errors/base_css.css exists, you will copy its contents verbatim in Step 2 (see below).editor.md verbatim — do not paraphrase, shorten, or rewritedesigner.json — do not substitute or simplifyeditor.mdFor every des_xx chart in designer.json, read content.data_source (an ana_xx ID or array), look up that item's data_table in analyst.json, and convert its columns + rows into Vega-Lite inline values. Stat callouts read content.value directly; interactives with a data_source resolve like charts. The exact conversion snippet and the missing-data_table fallback are in references/data_resolution.json.
Single self-contained HTML file. No build step, no framework. Allowed CDNs: Vega-Embed, Leaflet.js (plus PDF.js / D3.js where a component needs them).
Base CSS injection — if ../errors/base_css.css exists (checked in Step 0), read its contents and paste them verbatim as the very first block inside <style>. Do not modify, reformat, or omit any rule. This is auto-generated defensive CSS from past error patterns.
Page structure:
edt_01, edt_02, ...). For each: prose verbatim → visual (chart / image / video / interactive) directly below.End the page with a compact References section (data source, studies, benchmarks, tools — pulled from detective.json). See references_section in references/component_implementations.json.
Traceability — tag every element with its source IDs. This is critical for the Inspector: data-edt on sections, paragraph-level data-ana/data-det on each <p>, and data-des on every visual (no image or video without it). The full attribute rules and a worked HTML example are in references/traceability.json.
Layout. Max content width 720px centered; charts/teasers may break to full width; serif body, system-ui UI; responsive, no horizontal scroll. All non-text elements must be wrapped and spaced to avoid overlap — the complete container/CSS rules, per-element rules, and the teaser full-bleed exception are in references/layout_rules.json.
Components. Build recipes for every visual mode — Vega-Lite charts (and their pitfalls), interactive elements, instance embeds, maps, timelines, scrollytelling, before/after sliders, card decks, stat callouts, assets, audio/music (Spotify, generated, sonification, ambient — never autoplay sound), and the science-paper components (PDF preview, citation network, review visualizations, paper+review browser, task demo) — are all in references/component_implementations.json.
Before finishing, walk through every section and confirm:
max-width); multi-view charts and timelines fit the column and read on mobiledata-edt; every chart/visual has data-des; every data-driven element has data-anaPROJECT_DIR/index.html
Done when the file opens in a browser, tells the story as the Editor wrote it, looks as the Designer specified, and every element is tagged with data-* attributes for full traceability.
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.