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.
SkillScore91Maintained
Automatic
◆Frontend / UI pack
Last verified 8/13/2026
What it changes
Passed 19 of 21 test cases with the skill, and 10 of 21 without it.
Without skill45%
With skill91%
Checks it passed that the model alone missed
Creates components/Chart.tsx
Updates pages/[owner]/[slug].tsx
Coerces Y-column cell values using Number()
and 14 more in the full report
10 fixed10 passed either way2 still failing0 broke
Pass-rate lift
+45 pp
Tokens
+15%
Agent turns
0%
Response time
-35%
Model gemini-3.6-flashMeasured 8/13/2026v120 of 22 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 10
Prompt
Which Next.js dynamic route file in a standard PortalJS portal codebase needs to be modified to display the Chart component inside the Views section?
What was checked, without and with the skill
Checked
Without skill
With skill
Identifies pages/[owner]/[slug].tsx as the showcase route file
Missed
Passed
case-06 · gemini-3.6-flash · 8/13/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md79 lines2 files
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:
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.
Resolve the dataset from datasets.json (namespace, file, format).
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()).
Install the chart library: npm install recharts@^2.15.0.
Write components/Chart.tsx (idempotent — do not overwrite a customized component).
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.
Verify with npx tsc --noEmit.
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);