UI Styling
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.
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/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/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/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/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/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/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/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/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/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/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/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/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/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/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. No visual design. Outputs editor.md (prose) and editor.json (structure with edtxx IDs).
Its SKILL.md is about 1.4k 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.
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 1.4k tokens when it runs, and up to ~3.7k if it reads all its reference files. Until then it costs about 62 tokens; SKILL.md has 655 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). 655 words, ~1,364 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 and PROJECT_DIR/detective.json before doing anythingPROJECT_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.analyst.json: items keyed by ana_01, ... — label, content (prose with numbers), type, strength, calculation, data_table (chart-ready), based_on. The data findings.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:
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.
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).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.
© 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/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 | — | ~1.4k | 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 | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
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.
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
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
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/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/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 1.4k tokens (SKILL.md is roughly 5.5k 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 2.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Editor: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 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.