Stars

Quickstart — the AI path

This is the fast path. You'll install the PortalJS skills into Claude Code, then drive the whole build from chat. Prefer to build by hand? See Manual setup instead.

Prerequisites

  • Node.js >= 18
  • Claude Code (or another
    agent that runs Claude Code skills)

1. Install the skills

The skills are Claude Code commands — /new-portal, /add-dataset, /add-chart, /add-map, /connect-ckan, /deploy. Install them once into your personal scope so they're available in every project:

curl -fsSL https://raw.githubusercontent.com/datopian/portaljs/main/scripts/install-portaljs-skills.sh | bash

Restart Claude Code (or open a new session) so it picks up the new commands.

Other install options

You can also run the skills straight from a clone of the
portaljs repo, or install them as a
versioned plugin. See the install guide
for all three paths.

2. Scaffold a portal

In Claude Code, describe the portal you want:

/new-portal Auckland Council Open Data Portal — public datasets for the Auckland region

/new-portal copies the canonical lightweight template, substitutes your project name and description, installs dependencies, and verifies the build. You get a real Next.js project — plain, editable code you own.

Start the dev server to see it:

cd auckland-council-open-data
npm run dev

3. Add your data

Point /add-dataset at a local file or a public URL. It copies the data into /public/data/, generates a dataset page, and registers it on the home page catalog:

/add-dataset ./data/population.csv — Auckland population by area

/add-dataset https://example.com/air-quality.csv — Air quality monitoring

Supported formats: CSV, TSV, JSON (array), and GeoJSON.

4. Make it richer (optional)

  • /add-chart — add a line, bar, area, pie, or scatter chart to a dataset page.
  • /add-map — render a GeoJSON dataset on an interactive Leaflet map.
  • /connect-ckan — wire the portal to a CKAN backend over its API instead of static files.

Every skill writes plain, readable code — nothing it produces is hidden behind a runtime you can't see or edit.

5. Deploy

When you're ready to go live:

/deploy

/deploy detects your target (Vercel or static hosting), builds the portal, and publishes it — you get a live URL at the end.

Where to go next

  • Core concepts — understand the model behind the skills so you can customize confidently.
  • Manual setup — the same project, built by hand.
PrevNext Lesson