Agent skill · design visual · jeremylongshore
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 Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json.
Why this skill is useful
Adds a reusable Chart component for visualizing datasets in PortalJS, which includes specific commands and integration patterns not commonly known.
What it needs
Requires recharts installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
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. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/portaljs-add-chart