New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Portaljs Add Chart

by datopian in datopian/portaljs

Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal.

MITAuto-check passedData & Analytics

Install Portaljs Add Chart

skills CLI
$ npx skills add datopian/portaljs --skill portaljs-add-chart -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install datopian/portaljs portaljs-add-chart --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/datopian/portaljs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/portaljs-add-chart .claude/skills/portaljs-add-chart && rm -rf skills-src

Use ~/.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/

Facts

Skill name
portaljs-add-chart
GitHub stars
2.4k
Used in
1 other repo
Token cost
~1.1k tokens
SKILL.md length
382 words
Files
2 (incl. references)
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal.

  • Works in 8 steps: Gather input — dataset slug, X column, Y… → Resolve the dataset from datasets.json… → Validate that the X and every Y column… → …
  • Visualizing a dataset already registered in datasets.json
  • SKILL.md covers Overview, Prerequisites, Instructions and Output, plus 3 more sections
  • Calls npx and npm

What it does

Portaljs Add Chart is an agent skill from datopian/portaljs. Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/reference.md`). Compatibility notes: Claude Code with PortalJS portals (Next.js 14, React 18, Node 18+). Runs from any project via the plugin, a personal ~/.claude/commands install, or a portaljs…

It sits in Data & Analytics. It works with npm. The repository describes itself as: 🌀 AI-native framework for building data portals. Scaffold a full portal from a brief and load datasets in minutes with agentic skills — any backend (CKAN, GitHub, Frictionless). The licence is MIT.

When your agent uses it

  • Visualizing a dataset already registered in datasets.json

Example prompts

  • “/portaljs-add-chart”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Claude Code with PortalJS portals (Next.js 14, React 18, Node 18+). Runs from any project via the plugin, a personal ~/.claude/commands install, or a portaljs clone.
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(npm:*), Bash(npx:*)

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Gather input — dataset slug, X column, Y column(s), chart type (default line), portal
  2. Resolve the dataset from datasets.json (namespace, file, format).
  3. Validate that the X and every Y column exist in the data file's header; warn on
  4. Install the chart library: npm install recharts@^2.15.0.
  5. Write components/Chart.tsx (idempotent — do not overwrite a customized component).
  6. Render into the Views section, gated on the dataset's (namespace, slug)` so
  7. Verify with npx tsc --noEmit.
  8. Report the component, route, and dependency added.

What it can do on your machine

Read from SKILL.md and the folder at commit d5c096a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(npm:*)
    • Bash(npx:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • recharts.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Claude Code with PortalJS portals (Next.js 14, React 18, Node 18+). Runs from any project via the plugin, a personal ~/.claude/commands install, or a portaljs clone.

    From compatibility in the SKILL.md frontmatter.

Context cost

Portaljs Add Chart loads about 1.1k tokens when it runs, and up to ~1.6k if it reads all its reference files. Until then it costs about 70 tokens; SKILL.md has 382 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~70
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.6k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from datopian/portaljs at commit d5c096a, republished under its MIT licence (© datopian). 382 words, ~1,053 tokens.

Download SKILL.mdSave it as .claude/skills/portaljs-add-chart/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
portaljs-add-chart
description
Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json.
allowed-tools
Read, Write, Edit, Bash(npm:*), Bash(npx:*)
compatibility
Claude Code with PortalJS portals (Next.js 14, React 18, Node 18+). Runs from any project via the plugin, a personal ~/.claude/commands install, or a portaljs clone.
version
1.0.0
author
Datopian <hello@datopian.com>
license
MIT
tags
portaljs, data-portal, chart, recharts, dataviz, nextjs

PortalJS — Add Chart

Overview

Add a visualization to a dataset's showcase in a PortalJS portal. The skill installs recharts (added directly — never @portaljs/components), writes a reusable client-side Chart component into components/, and renders a <Chart /> into the Views section of the showcase route pages/[owner]/[slug].tsx for one chosen dataset. The chart reads the same /public/data/<file> the showcase <Table /> already uses, so no data is duplicated. Five chart types are supported: line, bar, area, pie, and scatter.

Prerequisites

  • A scaffolded PortalJS portal (see portaljs-new-portal).
  • The target dataset already registered in datasets.json (see portaljs-add-dataset).
  • components/ui/parseCsv.ts present (ships with the template).
  • Node 18+ and npm available in the portal directory.

Instructions

The canonical, full step-by-step workflow is .claude/commands/portaljs-add-chart.md — the single source of truth. Read and follow it when executing. Summary:

  1. Gather input — dataset slug, X column, Y column(s), chart type (default line), portal directory. If any is missing, interview the user; never dead-end on a missing value.
  2. Resolve the dataset from datasets.json (namespace, file, format).
  3. Validate that the X and every Y column exist in the data file's header; warn on non-numeric Y columns (values are coerced with Number()).
  4. Install the chart library: npm install recharts@^2.15.0.
  5. Write components/Chart.tsx (idempotent — do not overwrite a customized component).
  6. Render <Chart /> into the Views section, gated on the dataset's (namespace, slug) so other showcases are unaffected. Extend an existing view-dispatch block, do not overwrite.
  7. Verify with npx tsc --noEmit.
  8. Report the component, route, and dependency added.
Show full SKILL.md (136 more words)Show less

Output

  • Created: components/Chart.tsx (recharts wrapper, if absent).
  • Modified: pages/[owner]/[slug].tsx (import + gated <Chart /> in Views); package.json (recharts@^2.15.0).
  • Verified: npx tsc --noEmit passes.
  • Result: the chart renders at /@<namespace>/<slug> under a "Views" heading.

Error Handling

SymptomCauseFix
Missing dataset/columnsSlug or column not in manifest/headerList available slugs/headers and re-prompt; do not error out.
Gaps in the chartNon-numeric cells coerced to NaNClean the source data or pick a numeric Y column.
tsc failureBad column prop or import pathFix the first reported error before reporting success.
Sluggish renderOver ~2,000 SVG pointsPre-aggregate the series (e.g. yearly buckets).

Examples

Example 1 — Single line series
/portaljs-add-chart co2-emissions x=year y=emissions type=line
Example 2 — Multi-series bar chart
/portaljs-add-chart trade x=year y=imports,exports type=bar
Example 3 — Pie chart of a categorical breakdown
/portaljs-add-chart budget x=department y=amount type=pie

Resources

© datopian, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in skills/portaljs-add-chart of datopian/portaljs.

  • SKILL.md
  • references/reference.md

Open the folder on GitHubat commit d5c096a

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in datopian/portaljs, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Portaljs Add Chart 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.

Portaljs Add Chart compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Portaljs Add Chart this skilldatopian/portaljs2.4k1 repos~1.1kAutomated safety check: PassMIT
Chrome Devtoolseinverne/dotfiles1212 repos~1.6kAutomated safety check: NotesApache-2.0
Mvizmatsonj/mviz226—~11kAutomated safety check: PassNone
Deployduyet/pricetrack139—~338Automated safety check: PassMIT
Pricing Data Pipelinejqknono/coding-plans-for-copilot138—~263Automated safety check: NotesMIT
Multi Account Scrapingantibrow/anti-detect-browser-skills932—~3.7kAutomated safety check: WarnMIT

Similar skills

  • Chrome Devtools

    einverne/dotfiles

    Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.

    121 GitHub starsUsed in 2 repos~1.6k tokens
    Data & AnalyticsAuto-check: notes

  • Mviz

    matsonj/mviz

    A chart & report builder for AI. An agent skill from matsonj/mviz.

    226 GitHub stars~11k tokensUpdated 4 mo ago
    Data & AnalyticsAuto-check passed

  • Deploy

    duyet/pricetrack

    Deploy functions, hosting, or full release to Firebase. An agent skill from duyet/pricetrack.

    139 GitHub stars~338 tokensUpdated 3 days ago
    Data & AnalyticsAuto-check passed

  • Pricing Data Pipeline

    jqknono/coding-plans-for-copilot

    更新编码套餐与 OpenRouter 指标/套餐 JSON、修复抓取失败或 pending。Use when: pricing:fetch, metrics:fetch, openrouter:plans:fetch, provider-pricing.json, dashboard 数据过期或 CI 定价 issue。

    138 GitHub stars~263 tokensUpdated yesterday
    Data & AnalyticsAuto-check: notes

  • Multi Account Scraping

    antibrow/anti-detect-browser-skills

    Run the same scrape or task across many accounts at once - each in its own browser profile with its own fingerprint, cookies and exit IP - and read data from sites that need a session or that answer…

    932 GitHub stars~3.7k tokensUpdated 1 mo ago
    Data & AnalyticsAuto-check: warnings

  • Create Dashboard

    gooseworks-ai/goose-skills

    Create a custom web dashboard (React + Vite + Express) inside your sandbox to visualize the agent's Turso database.

    1.2k GitHub starsUsed in 1 repo~4.1k tokens
    Data & AnalyticsAuto-check passed

More from datopian/portaljs

All 14 skills in this repo

  • Arcgis To Portaljs

    datopian/portaljs

    Migrate a whole ArcGIS Hub site into a PortalJS Arc portal end-to-end.

    2.4k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Portaljs Add Dataset

    datopian/portaljs

    Add a dataset (CSV, TSV, JSON, or GeoJSON) to an existing PortalJS portal.

    2.4k GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

  • Portaljs Add Dcat

    datopian/portaljs

    Make a PortalJS portal harvestable by national/EU/US open-data portals — emit standards-compliant DCAT catalog feeds (DCAT 2/3, DCAT-AP, DCAT-US, national profiles) in JSON-LD, Turtle, and RDF/XML…

    2.4k GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • Portaljs Add Geo

    datopian/portaljs

    Auto-ingest a geospatial file (GeoJSON, Shapefile, GeoPackage, KML/KMZ, FlatGeobuf, CSV-with-geometry) into a PortalJS portal on the user's own machine, with no server.

    2.4k GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed

  • Portaljs Add Map

    datopian/portaljs

    Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase.

    2.4k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed

  • Portaljs Add Resource

    datopian/portaljs

    Add another file (resource) to an EXISTING dataset in a PortalJS portal — a data dictionary, methodology, or an additional data file.

    2.4k GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Works with

Categories

Questions about Portaljs Add Chart

What does Portaljs Add Chart do?

Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Portaljs Add Chart is an agent skill from datopian/portaljs. Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal.

When should I use Portaljs Add Chart?

Portaljs Add Chart fits situations like: visualizing a dataset already registered in datasets.json.

How do I install Portaljs Add Chart in Claude Code?

Run `npx skills add datopian/portaljs --skill portaljs-add-chart -a claude-code`. Or copy the skill folder (skills/portaljs-add-chart in datopian/portaljs) into .claude/skills/portaljs-add-chart in your project. Claude Code loads it when a task matches its description.

How do I install Portaljs Add Chart in Codex?

Run `npx skills add datopian/portaljs --skill portaljs-add-chart -a codex`. Or copy the skill folder (skills/portaljs-add-chart in datopian/portaljs) into .agents/skills/portaljs-add-chart in your project. Codex loads it when a task matches its description.

Can I use Portaljs Add Chart in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add datopian/portaljs --skill portaljs-add-chart -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/portaljs-add-chart, .gemini/skills/portaljs-add-chart, .github/skills/portaljs-add-chart and .opencode/skills/portaljs-add-chart in your project.

What does Portaljs Add Chart need to run?

Going by SKILL.md and its folder, Portaljs Add Chart needs the command-line tools its instructions call (npx and npm). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(npm:*), Bash(npx:*). Compatibility (from SKILL.md): Claude Code with PortalJS portals (Next.js 14, React 18, Node 18+). Runs from any project via the plugin, a personal ~/.claude/commands install, or a portaljs clone..

Does Portaljs Add Chart access the network?

SKILL.md names 1 domain. As links in the text: recharts.org. This is read from the text; nothing was executed.

Is Portaljs Add Chart safe to install?

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.

What licence does Portaljs Add Chart use?

Portaljs Add Chart is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Portaljs Add Chart use?

About 1.1k tokens (SKILL.md is roughly 4.2k 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 564 tokens, read only when the agent opens those files.

What are the alternatives to Portaljs Add Chart?

Skills that share tags, products or a category with Portaljs Add Chart: Chrome Devtools (einverne/dotfiles, 121 stars), Mviz (matsonj/mviz, 226 stars), Deploy (duyet/pricetrack, 139 stars) and Pricing Data Pipeline (jqknono/coding-plans-for-copilot, 138 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Portaljs Add Chart?

datopian (a GitHub organization) maintains it in datopian/portaljs, which has 2,358 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on September 7, 2026.

Source: datopian/portaljs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.