Skip to content

/portaljs-new-portal

Scaffold a new PortalJS data portal from a brief. Copies the canonical template from examples/portaljs-catalog and substitutes project tokens. Use when starting a brand-new data portal project from scratch.

From plugin
portaljs
2.4k14 skills25 commands

Claude Code

$ npx -y skills add datopian/portaljs --skill portaljs-new-portal --agent claude-code

SKILL.md

portaljs-new-portal.SKILL.md
name: portaljs-new-portal
description: Scaffold a new PortalJS data portal from a brief. Copies the canonical template from examples/portaljs-catalog and substitutes project tokens. Use when starting a brand-new data portal project from scratch.
allowed-tools: Read, Write, Edit, Bash(npm:*), Bash(npx:*), Bash(cp:*), Bash(mkdir:*), Bash(git:*)
version: 1.0.0
author: Datopian <hello@datopian.com>
license: MIT
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.
tags:
  - portaljs
  - data-portal
  - scaffold
  - nextjs
  - template
  - catalog

PortalJS โ€” New Portal

Overview

Scaffold a production-ready PortalJS data portal from a brief. The skill is **interactive**: if the brief is thin it interviews the user in three short rounds (mapped to the template's three surfaces โ€” Home, Catalog, Showcase), echoes a brief back for confirmation, then copies `examples/portaljs-catalog` (locally or via a remote `tiged` fetch), substitutes placeholder tokens, sets the namespace mode and the UI language, seeds any datasets named in the interview, installs dependencies, and verifies the scaffold with a type check.

Prerequisites

  • Node.js >=22 and npm available on `PATH`.
  • Network access, unless a current local checkout of the portaljs repo is available

(the resolver defaults to a remote fetch of the template).

  • A destination directory name that does not already contain files (or user consent

to overwrite one that does).

Instructions

The canonical, full step-by-step workflow is [`.claude/commands/portaljs-new-portal.md`](https://github.com/datopian/portaljs/blob/main/.claude/commands/portaljs-new-portal.md) โ€” the single source of truth. Read and follow it when executing. Summary:

1. Interview the user in up to three rounds โ€” Home/basics (incl. the UI language, default English), Catalog & discovery (datasets, namespace mode `theme` vs `owner`), Showcase/views โ€” skipping any round already answered by the input brief. Accept "use defaults" at any point. 2. Confirm a short brief (name, slug, description, language, namespace, datasets, views) before building. 3. Resolve the template source: prefer a remote `tiged` fetch of `examples/portaljs-catalog` at `main` (or `PORTALJS_TEMPLATE_REF`); use a local checkout only when it is current (has `pages/[owner]/[slug].tsx`) and the destination is outside that repo. 4. Materialize the template into `./PROJECT_SLUG`, asking first if the destination already exists and is non-empty. 5. Substitute `__PROJECT_NAME__`, `__PROJECT_SLUG__`, `__DESCRIPTION__` tokens across all files with `perl -pi`, escaping `/`, `\`, and `&` in the values. 6. Set `NAMESPACE_TYPE` (`'theme'` or `'owner'`) in `lib/datasets.ts` per the interview. 7. Set the UI language (skip for English): translate `locales/en.json` into `locales/<code>.json` (every key, `{placeholders}` verbatim, the plural forms the language uses, `_intl` BCP 47 tag such as `it-IT`), register it in `lib/i18n.ts`, set `DEFAULT_LOCALE` in `next.config.js`, and run `npm run i18n:check`. 8. Seed datasets captured in Round 2 (via `/portaljs-add-dataset` or by hand), or clear `datasets.json` to `[]` if none were named. 9. Run `npm install` inside the scaffolded portal. 10. Verify with `npm run i18n:check` and `npx tsc --noEmit` (never `next build` here โ€” it would corrupt a running dev server's `.next/` directory). 11. Report the scaffolded routes, namespace mode, language, and next steps.

Output

  • **Created:** a new directory `./PROJECT_SLUG/` containing the full

`examples/portaljs-catalog` template with tokens substituted.

  • **Modified:** `lib/datasets.ts` (`NAMESPACE_TYPE`); `datasets.json` (seeded

datasets or cleared to `[]`); for a non-English portal, `locales/<code>.json` (created), `lib/i18n.ts` (registered) and `next.config.js` (`DEFAULT_LOCALE`).

  • **Verified:** `npm run i18n:check` and `npx tsc --noEmit` pass inside the scaffolded

portal.

  • **Result:** a runnable portal at `./PROJECT_SLUG` with Home (`/`), Catalog

(`/search`), and Showcase (`/@<namespace>/<slug>`) surfaces wired up.

Error Handling

| Symptom | Cause | Fix | | --- | --- | --- | | `DIR_EXISTS` | `./PROJECT_SLUG` already exists and is non-empty | Ask the user for a different name or consent to remove it; then proceed. | | Remote fetch fails | Bad `PORTALJS_TEMPLATE_REF`, network outage, or `tiged` unavailable | Tell the user plainly and ask to retry, use a different ref, or check network. | | Stale local scaffold (`pages/datasets/[slug].tsx`) | Old local clone missing `pages/[owner]/[slug].tsx` | Resolver already falls back to remote in this case โ€” do not force local mode. | | `npm install` fails | Node <22 or no network | Report the error and ask the user to check Node version and connectivity. | | `tsc --noEmit` fails | Token substitution or manifest error | Print the log and fix before reporting success โ€” never report success with a failing type check. |

Examples

Example 1 โ€” Full brief up front

/portaljs-new-portal Auckland Open Data Portal โ€” datasets published by several council
departments (multiple publishers). Start with ./data/parks.csv and ./data/budget.csv.

Infers name + description, picks `NAMESPACE_TYPE = 'owner'`, asks for namespace values (e.g. `parks-dept`, `finance`), confirms the brief, scaffolds the template, and seeds both datasets at `/@parks-dept/parks` and `/@finance/budget`.

Example 2 โ€” No arguments, full interview

/portaljs-new-portal

Runs all three interview rounds from scratch, accepting "use defaults" for any round, then confirms the brief before scaffolding.

Example 3 โ€” Single-publisher portal with no datasets yet

/portaljs-new-portal Reference Data Hub โ€” a single-team reference catalog, no data yet.

Picks `NAMESPACE_TYPE = 'theme'` with namespace `reference`, clears

Read more
@datopian
Ships withportaljs

๐ŸŒ€ 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).

Stars on GitHub

Momentum

stars in total
2.4k
Star history of datopian/portaljs on GitHub, a chart by star-history.com

Other skills on portaljs.

arcgis-to-portaljs
Auto-invoked

arcgis-to-portaljs

Migrate a whole ArcGIS Hub site into a PortalJS Arc portal end-to-end. Harvests the Hub /data.json (DCAT-US) inventory, exportsโ€ฆ

@datopian@datopianInstall Skill
portaljs-add-chart
Auto-invoked

portaljs-add-chart

Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusableโ€ฆ

@datopian@datopianInstall Skill
portaljs-add-dataset
Auto-invoked

portaljs-add-dataset

Add a dataset (CSV, TSV, JSON, or GeoJSON) to an existing PortalJS portal. Appends an entry to datasets.json so the catalog andโ€ฆ

@datopian@datopianInstall Skill
portaljs-add-dcat
Auto-invoked

portaljs-add-dcat

Make a PortalJS portal harvestable by national/EU/US open-data portals โ€” emit standards-compliant DCAT catalog feeds (DCAT 2/3,โ€ฆ

@datopian@datopianInstall Skill
portaljs-add-geo
Auto-invoked

portaljs-add-geo

Auto-ingest a geospatial file (GeoJSON, Shapefile, GeoPackage, KML/KMZ, FlatGeobuf, CSV-with-geometry) into a PortalJS portal onโ€ฆ

@datopian@datopianInstall Skill
portaljs-add-map
Auto-invoked

portaljs-add-map

Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Installs react-leaflet and aโ€ฆ

@datopian@datopianInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, orโ€ฆ

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android โ€” semantic ARIA roles and labels,โ€ฆ

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commitsโ€ฆ

react2d252k
@facebook@facebookInstall Skill

Questions about portaljs-new-portal.

Which coding agents can use portaljs-new-portal?
portaljs-new-portal installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.