programmer
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.
npx skills add QinghongLin/data2story-skill --skill programmer --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.
What it does
Implements faithful, editor-driven page construction: reads editor.md, editor.json, analyst.json, designer.json (and optionally copywriter.json and hero.json), resolves chart data from analyst data_tables, and outputs a single self-contained index.html with data-* traceability attributes. It performs no editorial or visual decisions beyond what is specified in the input files and converts chart data into inline Vega-Lite values for interactive charts.
How it works
- Output is a single self-contained index.html built from the provided PROJECT_DIR.
- Reads and copies prose from editor.md verbatim, and applies visuals exactly as specified in designer.json. If copywriter.json is present, uses its masthead values verbatim for the page title, standfirst, and kicker; otherwise uses editor.md/editor.json values.
- For every edt_xx section in editor.json, renders the section title (from copywriter.json when present, else from editor.json) and then the corresponding content visuals (chart/image/video/interactive) exactly as specified, with each visual carrying data-des traceability and, where applicable, figcaptions from copywriter.json items.
- Chart data is derived from analyst.json data_tables according to the designer.json structure; all numbers on the page come from analyst.json (no raw data access by the skill).
- Builds a single index.html without any build steps or frameworks; uses allowed tools for file I/O and text handling as specified (Bash, Read, Write, Edit, Glob, Grep).
- If interaction.json is present, includes interactive playgrounds following the stated verification, accessibility, and safety guidelines (but only to the extent described by the input files).
When to use it
Use when you need a faithful, client-side HTML page built strictly from the Editor/Designer/Analyst inputs, with data-derived charts sourced from analyst.json and complete data-* traceability across sections and visuals.
What it can touch
- Reads:
PROJECT_DIR/editor.md,PROJECT_DIR/editor.json,PROJECT_DIR/analyst.json,PROJECT_DIR/designer.json, and optionallyPROJECT_DIR/copywriter.json,PROJECT_DIR/hero.json. - Outputs:
PROJECT_DIR/index.html. - Uses allowed-tools: Bash, Read, Write, Edit, Glob, Grep.
Caveats
- All numbers in the HTML must come from analyst.json; no invented values.
- If copywriter.json is present, masthead elements are verbatim from copywriter.json; otherwise editor.md/editor.json titles are used.
- The implementation avoids any editorial/visual decisions beyond the provided specifications and preserves data provenance via data-* attributes.
# Programmer 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. ## Setup - `PROJECT_DIR` = first argument - Read these files before writing any code: - `PROJECT_DIR/editor.md` — verbatim prose for the blog - `PROJECT_DIR/editor.json` — section structure with `edt_xx` IDs - `PROJECT_DIR/analyst.json` — data findings with `ana_xx` IDs and `data_table`s - `PROJECT_DIR/designer.json` — visual specs with `des_xx` IDs - `PROJECT_DIR/copywriter.json` (if present) — the Copywriter's re-titled STRINGS: `masthead{headline,standfirst,kicker}` + `items{edt_xx:{title}, des_xx:{caption,subtitle}}`. Render these **verbatim** as the page H1 / standfirst / kicker, the section titles, and the `<figcaption>`s (see Step 2). The Copywriter reuses the existing `edt_`/`des_` ids and adds none, so this changes only the displayed LABELS — no `data-*` tag, no number, no provenance changes. - `PROJECT_DIR/hero.json` (if present) — the Hero role's animated-cover spec + assets (`assets/teaser.webm`/`_web.mp4`/`.jpg`); reuses `data-des="des_hero_video"`. Build the hero
- Setup
- Step 0: Learn from Past Mistakes
- Rules
- Step 1: Resolve Chart Data from analyst.json
- Step 2: Build index.html
- Step 2.5: Author the verify layer (MANDATORY on every blog)
- Step 3: Verify
- Output
What does the programmer skill do?
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.
How do I install it?
Run `npx skills add QinghongLin/data2story-skill --skill programmer --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.