Htmlvspec
disler/pi-agent-observability
Creates a visual engineering implementation plan as a single self-contained HTML page saved to specs/<name.html — the plan authored directly in styled HTML, with one AI-generated diagram image per…
Fan out MANY candidate interactive concepts from the data + narrative — the ideation pool the Editor curates a hero + supporting set from.
$ npx skills add QinghongLin/data2story-skill --skill imagineer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install QinghongLin/data2story-skill imagineer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/data2story-pro/imagineer .claude/skills/imagineer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "imagineer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineer into .claude/skills/imagineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "imagineer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add QinghongLin/data2story-skill --skill imagineer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install QinghongLin/data2story-skill imagineer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/data2story-pro/imagineer .agents/skills/imagineer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "imagineer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineer into .agents/skills/imagineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "imagineer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add QinghongLin/data2story-skill --skill imagineer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install QinghongLin/data2story-skill imagineer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/data2story-pro/imagineer .cursor/skills/imagineer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "imagineer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineer into .cursor/skills/imagineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "imagineer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/QinghongLin/data2story-skill.git --path skills/data2story-pro/imagineer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add QinghongLin/data2story-skill --skill imagineer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install QinghongLin/data2story-skill imagineer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/data2story-pro/imagineer .gemini/skills/imagineer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "imagineer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineer into .gemini/skills/imagineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "imagineer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install QinghongLin/data2story-skill imagineerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add QinghongLin/data2story-skill --skill imagineer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/data2story-pro/imagineer .github/skills/imagineer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "imagineer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineer into .github/skills/imagineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "imagineer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add QinghongLin/data2story-skill --skill imagineer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install QinghongLin/data2story-skill imagineer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/data2story-pro/imagineer .opencode/skills/imagineer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "imagineer" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/imagineer into .opencode/skills/imagineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "imagineer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
imagineerFan out MANY candidate interactive concepts from the data + narrative — the ideation pool the Editor curates a hero + supporting set from.
Imagineer is an agent skill from QinghongLin/data2story-skill. Fan out MANY candidate interactive concepts from the data + narrative — the ideation pool the Editor curates a hero + supporting set from. Deliberate over-generation: one concept per finding worth making hands-on, each declaring its archetype, purpose, what the reader produces, and an honest feasibility (node-checked against the Analyst's clientmodel). Builds NOTHING on-page — imgxx concepts are internal and never reach HTML. Outputs imagineer.json after the Analyst, before the Editor.
Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/schema.json`).
It sits in Agent Workflows, covering Brainstorming and HTML artifacts. The repository describes itself as: Data Journalist Agent: Transforming Data into Verifiable Multimodal Story. The licence is MIT.
3 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 63a55c1. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
Bash(*)ReadWriteGlobFrom allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
nodeFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Imagineer loads about 3.2k tokens when it runs, and up to ~4.3k if it reads all its reference files. Until then it costs about 126 tokens; SKILL.md has 1,426 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Bash(*), Read, Write, GlobAutomated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from QinghongLin/data2story-skill at commit 63a55c1, republished under its MIT licence (© QinghongLin). 1,426 words, ~3,196 tokens.
.claude/skills/imagineer/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.Your job is ideation, not construction. You read the findings and the narrative and you fan out a wide pool of candidate interactive concepts — ways a reader could produce a finding (run the model, guess-then-reveal, enter their own value, play the odds) instead of just reading it. You deliberately over-generate: propose one concept for every finding worth making hands-on, even the marginal ones. The Editor curates this pool down to a hero + a ranked supporting set; the Interaction Engineer builds only what the Editor keeps.
You build nothing on the page. Your img_xx ids are internal — a planning vocabulary the Editor reads. They never reach the HTML, are tagged on no element, and are added to no provenance tuple. Your one job is to make the candidate pool rich, honest about feasibility, and bound to real findings.
PROJECT_DIR = first argument.SKILL_DIR = the directory containing this SKILL.md (.../skills/data2story-pro/imagineer).PROJECT_DIR/analyst.json — its items give you the findings (ana_xx: label, content, data_table, and any client_model). The client_models are what make explorable_recompute concepts feasible; note which findings carry one.PROJECT_DIR/detective.json — for the shared topic_profile (the S3 classifier: is_computational / is_visual / tags) that gates how hard you fan out.PROJECT_DIR/editor.md + editor.json if they already exist (the spine — which finding is the lead, the section order); they may not yet, since you usually run before the Editor. When absent, work straight from analyst.json and mark the lead candidate yourself.PROJECT_DIR/imagineer.json (write incrementally).Key this off the shared topic_profile (the same two-condition default the Cinematographer uses, read from detective.json; if absent, classify the dataset yourself the same way and record it). The pool's size should track what the data can actually support:
is_computational is true (the headline is a reproducible calculation — a probability, rate, ranking, model output, aggregate): these are the findings a reader can re-run, so explorable_recompute / tune_the_assumption / scored_quiz concepts are all on the table. Propose several.is_visual is true but the lead is not computational: guess_then_reveal / personal_input / scrollytelling concepts still let the reader produce a finding without a model.../../frontend-design-pro/references/abstract_excellence.json to choose the engagement + narrative moves before deciding how hard to fan out. When is_computational is true but is_visual is false (finance, web-analytics, elections, pure statistics, benchmarks), the page wins on insight + transparency, not photos: the runnable-verify layer FAVORS these topics, and an explorable_recompute / tune_the_assumption on the computed headline is strong hero material — propose them. Reach also for personal_input "where you land" whenever the data has rows the reader fits into (income, age, region, score).is_computational and is_visual are false (no computed headline to re-run, no imagery): you MUST propose ≥1 simple engagement-floor concept — a personal_input / personal_input_where_you_land or a sortable (sortable_table) (a scored_quiz also qualifies) on a descriptive finding (where you land in the distribution, sort the catalog yourself) — so the Editor isn't forced to ship an empty/charts-only page. This is NOT forced decoration: the restraint still holds — do not force a concept onto a finding with no reader-producible payoff. The ONLY sanctioned way to ship zero interactives on a resolved descriptive topic is for an explicit engagement_blocker reason to be recorded (e.g. the data has no row a reader fits into AND no entity set to sort). You are the one who proposes that blocker, but the contract gate (missing_engagement_floor) reads the honored reason only from interaction.meta (NOT from your imagineer.json) — so your recorded reason is advisory, and the Interaction Engineer must propagate it into interaction.meta.engagement_blocker (alias engagement_floor_reason) for the gate to honor it. "Ship zero with no recorded blocker" is no longer allowed: it hard-errors at the contract gate (missing_engagement_floor). (privacy_sensitive topics are auto-exempt.) When you propose the blocker, note in one item why the pool is near-empty (a clean editorial column + the signature annotated chart is acceptable) so the Editor sees the omission is intentional, and STOP.Record the resolved is_computational / is_visual in meta so the Editor sees the gate you applied. On a resolved descriptive topic where you propose shipping zero interactives, also record an advisory copy of the escape field in meta — engagement_blocker (the honest reason no reader-fits-in lever exists; the alias engagement_floor_reason is also read here) — as your proposed blocker for the downstream roles. This recorded copy is advisory only: the contract gate (missing_engagement_floor) does NOT read it from imagineer.json — it reads the honored reason from interaction.meta. The Interaction Engineer must write the honored engagement_blocker / engagement_floor_reason into interaction.meta for the gate to pass.
Go through every ana_xx. For each finding a reader could plausibly produce rather than read, draft a candidate img_xx. Be generous — a marginal concept the Editor cuts costs nothing; a finding you never imagined can't be curated. Pick the archetype from the interaction taxonomy:
client_model: the reader changes an input and the output re-derives live. The strongest hero material.data_table) lands.data_table → "you're here."Mark exactly the concepts that could carry the whole piece with hero_candidate: true (usually the explorable on the lead finding); the rest false. The Editor makes the final hero call.
Every concept must be earnable, not aspirational:
finding = the single ana_xx the reader produces. (Two concepts may target the same finding — that's fine here; the Editor's curation forbids two built supporting elements sharing one finding, but the ideation pool may explore alternatives.)needs.data_table = the ana_xx whose data_table supplies the at-rest published numbers.needs.client_model = the exact code/<file>.js:fn reference when the archetype recomputes, else null.reader_produces = one line on what the reader generates (not what they see) — "nudge a team's Elo, watch champion odds re-derive", not "a chart of odds."sketch = a one-line build hint (controls → output): "slider(Elo)+dropdown(team)+button -> animated bars."For any concept whose needs.client_model is set, confirm the model is real and runnable the way the Interaction Engineer does (interaction/SKILL.md Step 4): node a quick call to the referenced function with a plausible input shape, e.g.
node -e "const m=require('PROJECT_DIR/code/client_model.js'); console.log(m.simulate(200,{}))"Set feasibility:
data_table is present and chart-ready);data_table needs reshaping;Don't inflate. A low concept the Editor sees and cuts is better than a high claim the Builder can't deliver. If a referenced client_model doesn't exist yet but the finding warrants one, record the concept at medium and note in sketch that the Analyst should emit it.
imagineer.jsonWrite incrementally (read-add-write). Shape (consumed by the Editor + Interaction Engineer): items is a dict keyed by img_xx (NOT a list). Full schema in references/schema.json:
{
"meta": { "role": "imagineer", "is_computational": true, "is_visual": true },
"items": {
"img_01": {
"label": "Re-run the champion-odds model",
"finding": "ana_01",
"archetype": "explorable_recompute",
"purpose": "INFORM",
"reader_produces": "nudge a team's Elo, watch champion odds re-derive",
"needs": { "client_model": "code/client_model.js:simulate", "data_table": "ana_01" },
"feasibility": "high",
"sketch": "slider(Elo)+dropdown(team)+button -> animated bars",
"hero_candidate": true
},
"img_02": {
"label": "Guess the gap before the reveal",
"finding": "ana_05",
"archetype": "guess_then_reveal",
"purpose": "IMMERSE",
"reader_produces": "commit a guess for the gap, feel the correction when the real value lands",
"needs": { "client_model": null, "data_table": "ana_05" },
"feasibility": "high",
"sketch": "slider(your guess) -> reveal guess bar vs real bar from data_table",
"hero_candidate": false
}
}
}purpose is INFORM (the reader produces a number/insight the prose can't hand over) or IMMERSE (the reader produces a feeling — the correction lands, the odds shift under their hands). A concept that is neither is decoration — don't propose it.
references/schema.json — full imagineer.json structure + field notes.../references/topic_profile.json — the shared S3 classifier the "When to run" gate keys off (is_computational / is_visual).../../frontend-design-pro/references/interaction_playbook.json — the interaction_taxonomy + recipes the archetype values name; read it to keep archetypes real.../../frontend-design-pro/references/abstract_excellence.json — the POSITIVE flagship playbook for dry / abstract / computational topics (is_visual=false): the reframe hook, personal_input "where you land", the signature annotated chart, scale/analogy, the runnable-verify transparency lever, and the descriptive engagement floor. Read it whenever the topic is abstract.../interaction/SKILL.md Step 4 (node a client_model call).Done when the Editor has a rich, honest pool of candidate interactive concepts — each bound to a real finding, declaring its archetype + purpose + what the reader produces, with a node-checked feasibility — to curate a hero + supporting set from. The pool deliberately over-generates; the Editor decides what survives, and only what the Editor curates is ever built.
© QinghongLin, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file (references) in skills/data2story-pro/imagineer of QinghongLin/data2story-skill.
Open the folder on GitHubat commit 63a55c1
Imagineer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Imagineer this skillQinghongLin/data2story-skill | 155 | — | ~3.2k | Automated safety check: Notes | MIT | |
| Htmlvspecdisler/pi-agent-observability | 145 | — | ~4.7k | Automated safety check: Notes | MIT | |
| Idea Signal MapperWILLOSCAR/research-units-pipeline-skills | 513 | — | ~336 | Automated safety check: Pass | None | |
| ReflectNikiforovAll/claude-code-rules | 141 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Write PlanArman-Kudaibergenov/1c-ai-development-kit | 166 | — | ~1.3k | Automated safety check: Notes | AGPL-3.0 | |
| Solo Artifactssolo-agent/solo | 698 | — | ~961 | Automated safety check: Pass | MIT |
disler/pi-agent-observability
Creates a visual engineering implementation plan as a single self-contained HTML page saved to specs/<name.html — the plan authored directly in styled HTML, with one AI-generated diagram image per…
WILLOSCAR/research-units-pipeline-skills
Map paper notes + taxonomy into a signal table of tensions, missing pieces, and promising academic axes for brainstorm discussion.
NikiforovAll/claude-code-rules
Analyze a Claude Code session for "wrong-turn" moments (corrections, retries, waste, reversals, dead-ends) and produce an interactive HTML dashboard with copy-able recommendations (CLAUDE.md rules…
Arman-Kudaibergenov/1c-ai-development-kit
Этот скилл MUST быть вызван когда есть design.md и нужно разбить доработку на атомарные задачи (2-5 мин) с точными путями файлов и критериями проверки в tasks.md.
solo-agent/solo
A skill your agent uses when a Solo task or thread should become an interactive, reviewable, self-contained HTML artifact for progress/status, review/decision, or comparison/leaderboard work inside…
stablyai/orca
Show a chart, diagram, table, report or mockup inline in this Orca chat as an HTML page.
QinghongLin/data2story-skill
Run sentence-level traceability verification on a Data2Story blog (verify.py - verifier.json), then emit the in-page Inspector panel (the reader-facing runnable verifier) + the verify/ artifacts…
QinghongLin/data2story-skill
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…
QinghongLin/data2story-skill
Review a finished Data2Story blog against the 5 quality rubric dimensions (visualdesign, narrativepacing, datamethodtransparency, claimdataalignment, insightvalue), score each 1-7 with on-page…
QinghongLin/data2story-skill
Research external context for a dataset — domain background, history, related studies, and why this data matters.
QinghongLin/data2story-skill
Run sentence-level traceability verification on a blog, then generate viewer.html with interactive evidence panel.
QinghongLin/data2story-skill
A skill your agent uses to turn a dataset into a verifiable multimedia blog (a data story / data-driven article / interactive dashboard from a dataset).
Categories
Fan out MANY candidate interactive concepts from the data + narrative — the ideation pool the Editor curates a hero + supporting set from. Imagineer is an agent skill from QinghongLin/data2story-skill. Fan out MANY candidate interactive concepts from the data + narrative — the ideation pool the Editor curates a hero + supporting set from.
Imagineer fits situations like: tasks that involve Brainstorming; tasks that involve HTML artifacts.
Run `npx skills add QinghongLin/data2story-skill --skill imagineer -a claude-code`. Or copy the skill folder (skills/data2story-pro/imagineer in QinghongLin/data2story-skill) into .claude/skills/imagineer in your project. Claude Code loads it when a task matches its description.
Run `npx skills add QinghongLin/data2story-skill --skill imagineer -a codex`. Or copy the skill folder (skills/data2story-pro/imagineer in QinghongLin/data2story-skill) into .agents/skills/imagineer in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add QinghongLin/data2story-skill --skill imagineer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/imagineer, .gemini/skills/imagineer, .github/skills/imagineer and .opencode/skills/imagineer in your project.
Going by SKILL.md and its folder, Imagineer needs the command-line tools its instructions call (node). Its frontmatter pre-approves these tools: Bash(*), Read, Write, Glob.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
Imagineer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.1k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Imagineer: Htmlvspec (disler/pi-agent-observability, 145 stars), Idea Signal Mapper (WILLOSCAR/research-units-pipeline-skills, 513 stars), Reflect (NikiforovAll/claude-code-rules, 141 stars) and Write Plan (Arman-Kudaibergenov/1c-ai-development-kit, 166 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
QinghongLin (a GitHub user) maintains it in QinghongLin/data2story-skill, which has 155 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on July 5, 2026.
Source: QinghongLin/data2story-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.