Agent skill

Portaljs Add Map

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

MITAuto-check passed

Install Portaljs Add Map

skills CLI

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

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

GitHub CLI

$ gh skill install datopian/portaljs portaljs-add-map --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-map .claude/skills/portaljs-add-map && 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/

Paste into Claude Code

Install the "portaljs-add-map" agent skill from https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map into .claude/skills/portaljs-add-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portaljs-add-map", 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

$skill-installer install https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map

Type 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.

skills CLI

$ npx skills add datopian/portaljs --skill portaljs-add-map -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install datopian/portaljs portaljs-add-map --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

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

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "portaljs-add-map" agent skill from https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map into .agents/skills/portaljs-add-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portaljs-add-map", 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.

skills CLI

$ npx skills add datopian/portaljs --skill portaljs-add-map -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install datopian/portaljs portaljs-add-map --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

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

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "portaljs-add-map" agent skill from https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map into .cursor/skills/portaljs-add-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portaljs-add-map", 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

$ gemini skills install https://github.com/datopian/portaljs.git --path skills/portaljs-add-map

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add datopian/portaljs --skill portaljs-add-map -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install datopian/portaljs portaljs-add-map --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

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

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

Paste into Gemini CLI

Install the "portaljs-add-map" agent skill from https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map into .gemini/skills/portaljs-add-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portaljs-add-map", 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.

GitHub CLI

$ gh skill install datopian/portaljs portaljs-add-map

Installs 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).

skills CLI

$ npx skills add datopian/portaljs --skill portaljs-add-map -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

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

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

Paste into GitHub Copilot

Install the "portaljs-add-map" agent skill from https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map into .github/skills/portaljs-add-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portaljs-add-map", 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.

skills CLI

$ npx skills add datopian/portaljs --skill portaljs-add-map -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install datopian/portaljs portaljs-add-map --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

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

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "portaljs-add-map" agent skill from https://github.com/datopian/portaljs/tree/main/skills/portaljs-add-map into .opencode/skills/portaljs-add-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portaljs-add-map", 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.

Facts

Skill name: portaljs-add-map
GitHub stars: 2.4k
Used in: 1 other repo
Token cost: ~1.3k tokens
SKILL.md length: 520 words
Files: 2 (incl. references)
Skills in repo: 14
Repo updated: Sep 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

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

Works in 8 steps: Gather input — dataset slug (or a… → Validate the portal directory… → Resolve the dataset from datasets.json,… → …
A datasets data is geographic and a map view is needed alongside the showcases default metadata and download
SKILL.md covers Overview, Prerequisites, Instructions and Output, plus 3 more sections
Calls npm and npx

What it does

Portaljs Add Map is an agent skill from datopian/portaljs. Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Installs react-leaflet and a Map component, then renders the map for the chosen dataset. Use when a dataset's data is geographic and a map view is needed alongside the showcase's default metadata and download.

Its SKILL.md is about 1.3k 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 works with React and 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

A datasets data is geographic and a map view is needed alongside the showcases default metadata and download

Example prompts

“s data is geographic and a map view is needed alongside the showcase”
“/portaljs-add-map”

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:*), WebFetch

Workflow steps

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

Gather input — dataset slug (or a GeoJSON source to register), portal directory. If any
Validate the portal directory (datasets.json, package.json,
Resolve the dataset from datasets.json, or validate and register a new GeoJSON
Install map dependencies: npm install react-leaflet@^5 leaflet@^1.9 and
Write components/MapView.tsx and components/Map.tsx (idempotent — skip if
Render into the Views section, gated on the dataset's (namespace, slug)` so
Verify with npx tsc --noEmit (never next build against a live dev server).
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:*)
- WebFetch
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
- npx
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):
- react-leaflet.js.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 Map loads about 1.3k tokens when it runs, and up to ~2k if it reads all its reference files. Until then it costs about 82 tokens; SKILL.md has 520 words of instructions outside code blocks.

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

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). 520 words, ~1,343 tokens.

Download SKILL.mdSave it as .claude/skills/portaljs-add-map/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: portaljs-add-map
description: Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Installs react-leaflet and a Map component, then renders the map for the chosen dataset. Use when a dataset's data is geographic and a map view is needed alongside the showcase's default metadata and download.
allowed-tools: Read, Write, Edit, Bash(npm:*), Bash(npx:*), WebFetch
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, map, geojson, leaflet, dataviz

PortalJS — Add Map

Overview

Add an interactive Leaflet map as a view on a dataset's showcase in a portaljs-catalog portal. The skill installs react-leaflet/leaflet (added directly — never @portaljs/components), writes a reusable Map component split across MapView.tsx (the Leaflet code) and Map.tsx (a dynamic(..., { ssr: false }) wrapper, since Leaflet touches window at module load), and renders <Map /> into the Views section of the showcase route pages/[owner]/[slug].tsx for one chosen GeoJSON dataset. The dataset should already carry format: "geojson" in datasets.json; if it doesn't exist yet, the skill can copy the file and register it first.

Prerequisites

A scaffolded PortalJS portal (see portaljs-new-portal).
The target dataset registered in datasets.json with format: "geojson" (see portaljs-add-dataset), or a GeoJSON source file/URL to register.
Node 18+ and npm available in the portal directory.

Instructions

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

Gather input — dataset slug (or a GeoJSON source to register), portal directory. If any is missing, interview the user; never dead-end on a missing value.
Validate the portal directory (datasets.json, package.json, pages/[owner]/[slug].tsx must exist).
Resolve the dataset from datasets.json, or validate and register a new GeoJSON source (copy to /public/data/, append a manifest entry).
Install map dependencies: npm install react-leaflet@^5 leaflet@^1.9 and npm install -D @types/leaflet (skip if already present).
Write components/MapView.tsx and components/Map.tsx (idempotent — skip if Map.tsx already exists).
Render <Map /> 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 it.
Verify with npx tsc --noEmit (never next build against a live dev server).
Report the component, route, and dependency added.

Output

Created: components/MapView.tsx and components/Map.tsx (Leaflet wrapper, if absent); public/data/<slug>.geojson (only when registering a new dataset).
Modified: pages/[owner]/[slug].tsx (import + gated <Map /> in Views); datasets.json (only when registering a new dataset); package.json (react-leaflet, leaflet, @types/leaflet).
Verified: npx tsc --noEmit passes.
Result: the map renders at /@<namespace>/<slug> under a "Views" heading.

Show full SKILL.md (189 more words)Show less

Error Handling

Symptom	Cause	Fix
Dataset not found or not GeoJSON	Slug missing from `datasets.json` or `format` is tabular	List GeoJSON datasets and re-prompt; suggest `portaljs-add-chart` for tabular data.
Source fetch/copy fails	URL returns non-200 or local path missing	Report the HTTP status or missing path; ask for a corrected source.
"Not valid GeoJSON"	Parsed JSON `type` isn't a Feature/geometry type	Tell the user and point to `portaljs-add-dataset` for tabular data.
`tsc` failure	Bad import path or gating condition	Fix the first reported error before reporting success.
Map appears on every dataset	View not gated on `(namespace, slug)`	Wrap the `<Map />` render in the dataset check shown in the Instructions.
Features render in the wrong place	Data isn't WGS84 (EPSG:4326) lon/lat	Reproject the source data to WGS84 before adding.
Slow render	Thousands of features in one file (>5MB)	Simplify geometries (e.g. `mapshaper`) before adding.

Examples

Example 1 — Map an already-registered dataset

/portaljs-add-map dataset=park-boundaries

Example 2 — Register a local GeoJSON file and map it

/portaljs-add-map source=./data/bike-routes.geojson slug=bike-routes name="Bike Routes"

Example 3 — Register a remote GeoJSON URL and map it

/portaljs-add-map source=https://example.com/districts.geojson slug=districts namespace=reference

Resources

Full workflow: .claude/commands/portaljs-add-map.md
Map props and troubleshooting reference: references/reference.md
Related skills: portaljs-add-dataset, portaljs-add-chart, portaljs-define-schema
react-leaflet documentation: https://react-leaflet.js.org/

Files

SKILL.md and 1 other file (references) in skills/portaljs-add-map 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.

jeremylongshore/tons-of-skills-marketplaceplugins/community/portaljs/skills/portaljs-add-map

Compare with similar skills

Portaljs Add Map 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 Map compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Portaljs Add Map this skilldatopian/portaljs	2.4k	1 repos	~1.3k	Automated safety check: Pass	MIT	1 mo ago
GSAP for Reactgreensock/gsap-skills	16k	4 repos	~1.6k	Automated safety check: Pass	MIT	2 mo ago
Review Dep Upgradereact-cosmos/react-cosmos	8.7k	—	~1.1k	Automated safety check: Pass	MIT	16 days ago
Frontend Build Timing Auditopenops-cloud/openops	1.1k	—	~2.3k	Automated safety check: Pass	Custom licence	today
Antigravity ManagerDraculabo/AntigravityManager	2.4k	—	~793	Automated safety check: Pass	Custom licence	today
Convex Quickstartspokvulcan/poker-planning	114	6 repos	~3.5k	Automated safety check: Notes	MIT	4 days ago

Similar skills

GSAP for React
greensock/gsap-skills
Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.
16k GitHub starsUsed in 4 repos~1.6k tokens
Frontend & DesignAuto-check passed
Review Dep Upgrade
react-cosmos/react-cosmos
Review npm dependency upgrade diffs. An agent skill from react-cosmos/react-cosmos.
8.7k GitHub stars~1.1k tokensUpdated 16 days ago
DevelopmentAuto-check passed
Frontend Build Timing Audit
openops-cloud/openops
Detects and diagnoses chunk-evaluation timing bugs in the Vite/rolldown production build of react-ui (works-in-dev / broken-in-build i18n regressions, missing UI labels, module-scope t()…
1.1k GitHub stars~2.3k tokensUpdated today
Frontend & DesignAuto-check passed
Antigravity Manager
Draculabo/AntigravityManager
Comprehensive guide to Antigravity Manager architecture, workflows, and development.
2.4k GitHub stars~793 tokensUpdated today
Frontend & DesignAuto-check passed
Convex Quickstart
spokvulcan/poker-planning
Creates or adds Convex to an app. An agent skill from spokvulcan/poker-planning.
114 GitHub starsUsed in 6 repos~3.5k tokens
Frontend & DesignAuto-check: notes
React Email
viclafouch/meme-studio
A skill your agent uses when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
110 GitHub starsUsed in 2 repos~3.6k tokens
Backend & APIsAuto-check passed

Questions about Portaljs Add Map

What does Portaljs Add Map do?

Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Portaljs Add Map is an agent skill from datopian/portaljs. Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase.

When should I use Portaljs Add Map?

Portaljs Add Map fits situations like: A datasets data is geographic and a map view is needed alongside the showcases default metadata and download.

How do I install Portaljs Add Map in Claude Code?

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

How do I install Portaljs Add Map in Codex?

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

Can I use Portaljs Add Map 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-map -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-map, .gemini/skills/portaljs-add-map, .github/skills/portaljs-add-map and .opencode/skills/portaljs-add-map in your project.

What does Portaljs Add Map need to run?

Going by SKILL.md and its folder, Portaljs Add Map needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(npm:*), Bash(npx:*), WebFetch. 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 Map access the network?

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

Is Portaljs Add Map 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 Map use?

Portaljs Add Map 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 Map use?

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

What are the alternatives to Portaljs Add Map?

Skills that share tags, products or a category with Portaljs Add Map: GSAP for React (greensock/gsap-skills, 16k stars), Review Dep Upgrade (react-cosmos/react-cosmos, 8.7k stars), Frontend Build Timing Audit (openops-cloud/openops, 1.1k stars) and Antigravity Manager (Draculabo/AntigravityManager, 2.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Portaljs Add Map?

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.

Install Portaljs Add Map

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Compatibility

Context cost

Safety

SKILL.md

PortalJS — Add Map

Overview

Prerequisites

Instructions

Output

Error Handling

Examples

Example 1 — Map an already-registered dataset

Example 2 — Register a local GeoJSON file and map it

Example 3 — Register a remote GeoJSON URL and map it

Resources

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from datopian/portaljs

Related

Questions about Portaljs Add Map