Banner Design System
nextlevelbuilder/ui-ux-pro-max-skill
Walks through designing a banner for social media, ads, a website hero or print, from gathering requirements to building 2 or 3 art-direction options in HTML and CSS.
Read analyst.json and detective.json, make all editorial decisions — what the blog argues, which findings matter, narrative arc and section structure.
$ npx skills add QinghongLin/data2story-skill --skill editor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install QinghongLin/data2story-skill editor --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/editor .claude/skills/editor && 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 "editor" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/editor into .claude/skills/editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editor", 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/editorType 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 editor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install QinghongLin/data2story-skill editor --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/editor .agents/skills/editor && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "editor" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/editor into .agents/skills/editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editor", 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 editor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install QinghongLin/data2story-skill editor --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/editor .cursor/skills/editor && 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 "editor" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/editor into .cursor/skills/editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editor", 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/editor--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 editor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install QinghongLin/data2story-skill editor --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/editor .gemini/skills/editor && 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 "editor" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/editor into .gemini/skills/editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editor", 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 editorInstalls 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 editor -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/editor .github/skills/editor && 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 "editor" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/editor into .github/skills/editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editor", 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 editor -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 editor --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/editor .opencode/skills/editor && 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 "editor" agent skill from https://github.com/QinghongLin/data2story-skill/tree/main/skills/data2story-pro/editor into .opencode/skills/editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "editor", 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.
editorRead analyst.json and detective.json, make all editorial decisions — what the blog argues, which findings matter, narrative arc and section structure.
Editor is an agent skill from QinghongLin/data2story-skill. Read analyst.json and detective.json, make all editorial decisions — what the blog argues, which findings matter, narrative arc and section structure. Runs after the Analyst/Imagineer, before the Designer. No visual design. Outputs editor.md (prose) and editor.json (structure with edtxx IDs).
Its SKILL.md is about 3.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/editor_md_template.json`, `references/field_rules.json` and `references/media_hints.json`).
It sits in Frontend & Design, covering UI design. The repository describes itself as: Data Journalist Agent: Transforming Data into Verifiable Multimodal Story. The licence is MIT.
5 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:
ReadWriteFrom allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are json).
From 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.
Editor loads about 3.9k tokens when it runs, and up to ~7.2k if it reads all its reference files. Until then it costs about 75 tokens; SKILL.md has 1,916 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 found no risky patterns in SKILL.md.
Automated 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,916 words, ~3,868 tokens.
.claude/skills/editor/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.Your job is editorial judgment. You decide what this blog says, what it argues, and in what order. You do not touch visual design — that is the Designer's job.
Think of yourself as the editor of a data journalism outlet. You have a pile of findings and a pile of context. You need to shape them into a piece a real person would want to read.
PROJECT_DIR = first argumentPROJECT_DIR/analyst.json, PROJECT_DIR/detective.json, and PROJECT_DIR/scout.json (if present) before doing anythingPROJECT_DIR/imagineer.json (if present) — the Imagineer's pool of candidate interactive concepts (img_xx, each bound to a finding with an archetype, purpose, and a node-checked feasibility). You curate this pool in Step 3 into the hero + supporting set. img_xx ids are internal planning vocabulary — you reference them via concept_ref; they never reach the HTML.PROJECT_DIR/editor.md, PROJECT_DIR/editor.jsonBoth input files use the same envelope: { "meta": {...}, "items": { "id": {...}, ... } }.
detective.json: items keyed by det_01, ... — label, content (prose), category, sources. The external context.scout.json (if present): items keyed by sct_01, ... — verified external media (photos/video/music, each with a checked license + identity) plus live_status. Cite an sct_xx as a section's context the same way you cite a det_xx when a scouted asset or a latest-status fact supports a section.analyst.json: items keyed by ana_01, ... — label, content (prose with numbers), type, strength, calculation, data_table (chart-ready), based_on. The data findings.imagineer.json (if present): items keyed by img_01, ... — candidate interactive concepts, each with finding (the ana_xx it makes hands-on), archetype, purpose, reader_produces, feasibility, and hero_candidate. A deliberately over-generated pool you curate (Step 3). img_xx ids are internal — reference them via concept_ref, never on the page.Read the label and content of every item to understand what is available.
Go through every ana_xx item in analyst.json. Assign each one a role:
Only one finding can be Lead. Be ruthless about Cut.
Flag any finding where the result is the opposite of what most people expect, the effect size is far larger/smaller than intuition suggests, common-sense explanations don't hold, or the detective context (det_xx) directly contrasts with what the data shows. These are your strongest hooks.
Write three things:
../../frontend-design-pro/references/interaction_playbook.json → craft_principles + centerpiece_doctrine.) Flag it in editor.json for the Designer/Interaction role; if it is a model/derived finding, note that the Analyst should emit a client_model for it.Then curate the interactive set (writes editor.json.interactives). The prose hero nomination above stays — it names the spine. Now turn the Imagineer's candidate pool (imagineer.json, if present) into the curated set the Interaction Engineer builds:
hero — the ONE centerpiece, the same finding you nominated above. Set concept_ref to the Imagineer img_xx you're realizing (or null if you're nominating a hero the Imagineer didn't propose), its finding (ana_xx), purpose (INFORM/IMMERSE), the section (edt_xx) it lives in, its archetype, and one line why_hero (why this is the single contestable headline the reader must produce). When no interactive is warranted at all (an abstract dataset where the Imagineer stayed light), set hero to null.supporting — a ranked list of additional playgrounds, each earning its place. The cap is qualitative, never numeric. On a visual OR computational topic (topic_profile.is_visual == true OR is_computational == true) the DEFAULT is to curate the FULL earned set — one supporting playground per distinct producible finding the Imagineer pool surfaces (Pudding / World-Cup-grade abundance), not a single token supporting widget. Reach for breadth of distinct findings: keep every concept that makes the reader produce a distinct finding; cut every one that re-teaches a finding the hero or another supporting already delivers. The distinct-finding rule is the only thing that caps the set. Each entry: concept_ref (the img_xx, or null), a DISTINCT finding (no two supporting entries — and not the hero — may share one ana_xx), purpose, its section, archetype, a rank (1 = strongest), and earns_place (one line: the distinct finding it makes hands-on and why it isn't a duplicate). More EARNED is better, more UNEARNED is not — keep every playground that makes the reader produce a DISTINCT finding, cut every duplicate/dead one. Stopping at one supporting widget on a rich topic is under-curation; a pile of duplicates is over-curation.On an abstract / computational topic (the topic_profile resolves is_visual=false, e.g. finance, web-analytics, elections, pure statistics, benchmarks): this is a first-class flagship target, not a "stay light" afterthought. Read ../../frontend-design-pro/references/abstract_excellence.json to choose the engagement + narrative moves — the surprising-comparison reframe hook (lead with the counter-intuitive number, not background), personal_input "where you land" as the default engagement lever for any topic with rows the reader fits into (income, age, region, score), the one signature annotated chart as the centerpiece, scale/analogy devices, and the runnable-verify layer as the flagship transparency lever (it favors computational topics). Engagement floor: for the purely-descriptive sub-case (is_computational=false AND is_visual=false), prefer a personal_input / sortable_table / scored_quiz on a descriptive finding (where you land, sort the catalog yourself) over shipping an empty/charts-only page — a floor, not forced decoration; the restraint above (don't force a centerpiece with no producible payoff) still holds when no genuine reader-fits-in lever exists.
Keep the per-section [MEDIA: interactive] hints below as editorial signals — they mark where a playground belongs; interactives is the binding curation the Builder reads. The full field rules are in references/field_rules.json.
Define the full section sequence. For each section, decide:
edt_01, edt_02, ... (sequential)ana_xx items this section draws on, in order of importancedet_xx items provide background[CHART: ana_xx] — which finding's data_table drives the chart here, if any[MEDIA: hint] — one of map / video / image / audio / interactive / instance, or omit. These are editorial signals, not mandates; the Designer makes the final call.[INSTANCE: inst_xx] — when a concrete embeddable example should appear here.Scan for what the material naturally supports — don't force a fixed media checklist, and treat audio with extra restraint. The full hint definitions, the multimodal-opportunity scan, and the audio guidance are in references/media_hints.json.
live_status[] (scout) in prose, present it as a short, display-only "since the snapshot, as of <date>" summary, not a prominent list of many specific (and possibly forward-dated, confusing) results. It is dated context, never the lead, and never fed to a model.controversy/limitation item bearing on it — that limitation MUST appear as at least one clear sentence in the body. Do not cut it to a stray clause, push it into a footnote, or drop it: if its det_xx/ana_xx id never appears in the prose, you have buried it. (A non-material caveat may still be woven in lightly; this rule is only for limitations that move the lead.)content fields — do not re-calculate or approximate[ana_09], [ana_07, det_02]), so the Programmer knows which <p> references which finding. Pure connective prose is tagged [editorial].PROJECT_DIR/editor.md — the prose document the Programmer copies verbatim. Section headers carry the edt_xx ID and list evidence + context. Full format and example in references/editor_md_template.json.PROJECT_DIR/editor.json — machine-readable section structure. Structure in references/schema.json; field-by-field semantics in references/field_rules.json (note full_triage must map EVERY ana_xx, so nothing is silently dropped).Shape (validator-enforced): items is a dict keyed by edt_xx id (NOT a sections[] array) — the same { "meta": {...}, "items": { "id": {...} } } envelope as the input JSONs. validate.py/verify.py read editor.items as {id: {...}}:
{
"meta": {...},
"items": {
"edt_01": { "label": "...", "purpose": "hook",
"findings": ["ana_01"], "context": ["det_01"] }
},
"full_triage": { "ana_01": "lead" },
"interactives": {
"hero": { "concept_ref": "img_01", "finding": "ana_01", "purpose": "INFORM",
"section": "edt_03", "archetype": "explorable_recompute",
"why_hero": "the single contestable headline number" },
"supporting": [
{ "concept_ref": "img_02", "finding": "ana_05", "purpose": "IMMERSE", "section": "edt_05",
"archetype": "guess_then_reveal", "rank": 1, "earns_place": "distinct finding; not a dup of the hero" }
]
}
}The top-level interactives block (hero + ranked supporting[]) is the curation the Interaction Engineer builds from. hero is null when no interactive is warranted; supporting is [] when only the hero is. Full rules in references/field_rules.json.
When analyst.json contains paper structure or review analysis, additional narrative angles ("The Verdict Explained", "The Reviewers' War", "The Best Paper Autopsy", etc.) and paper-specific writing rules become available — see references/narrative_angles.json. Choose the angle that creates the most tension.
Done when a Designer can read editor.md and editor.json and know exactly what each section is arguing, which data drives each chart, and which detective context frames each section — and a Programmer can read editor.md and produce the copy verbatim.
You are the lead of the Editor team. Your member is the Copywriter (titling + captioning). You decide what the blog argues and lay down the section structure + prose; the Copywriter then names the piece — the masthead, every section title, and every figure/photo caption — to a research-driven titling standard, so the strings read as written, not as competent defaults.
Skill copywriter PROJECT_DIR at Stage 3.5, after your editor.md/editor.json are complete (and before the Designer). The Copywriter reads your editor.md, editor.json, and analyst.json, so finish and save them first.data-* id, no layout, and no body prose — it reuses your existing edt_/des_ ids and adds none, writing only strings (masthead + items{edt_xx:{title}, des_xx:{caption}}, each backs-ed to a real ana_*). So your section structure, full_triage, and interactives curation stay exactly as you wrote them; the Copywriter only re-titles on top.This is coordination prose, not a new gate: your edt_xx ids, the interactives block, and the editor.md/editor.json shapes are unchanged.
© 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 5 other files (references) in skills/data2story-pro/editor of QinghongLin/data2story-skill.
Open the folder on GitHubat commit 63a55c1
Editor 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 |
|---|---|---|---|---|---|---|
| Editor this skillQinghongLin/data2story-skill | 156 | — | ~3.9k | Automated safety check: Pass | MIT | |
| Banner Design Systemnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~1.8k | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause |
nextlevelbuilder/ui-ux-pro-max-skill
Walks through designing a banner for social media, ads, a website hero or print, from gathering requirements to building 2 or 3 art-direction options in HTML and CSS.
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
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
Generate music (NOT speech) via OpenRouter using Google Lyria 3 Pro.
QinghongLin/data2story-skill
Run sentence-level traceability verification on a blog, then generate viewer.html with interactive evidence panel.
Categories
Read analyst.json and detective.json, make all editorial decisions — what the blog argues, which findings matter, narrative arc and section structure. Editor is an agent skill from QinghongLin/data2story-skill.json, make all editorial decisions — what the blog argues, which findings matter, narrative arc and section structure.
Editor fits situations like: tasks that involve UI design.
Run `npx skills add QinghongLin/data2story-skill --skill editor -a claude-code`. Or copy the skill folder (skills/data2story-pro/editor in QinghongLin/data2story-skill) into .claude/skills/editor in your project. Claude Code loads it when a task matches its description.
Run `npx skills add QinghongLin/data2story-skill --skill editor -a codex`. Or copy the skill folder (skills/data2story-pro/editor in QinghongLin/data2story-skill) into .agents/skills/editor 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 editor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/editor, .gemini/skills/editor, .github/skills/editor and .opencode/skills/editor in your project.
SKILL.md names no scripts, command-line tools or credentials: Editor is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write.
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 no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Editor 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.9k tokens (SKILL.md is roughly 15k 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 3.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Editor: Banner Design System (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k 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 156 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.