CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

91%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

88%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-crafted, lean body with a sequenced workflow, explicit validation and recovery steps, exact commands and paths, and a clean one-level reference file. Its main weakness is dependence on an external URL for the canonical workflow and the actual Chart.tsx code, which keeps the bundle from being fully self-contained.

Suggestions

Move the canonical step-by-step workflow (currently the external .claude/commands/portaljs-add-chart.md GitHub link) into a local bundle file such as references/workflow.md, so execution does not depend on fetching an external URL.

Include the actual components/Chart.tsx code (inline or in a reference file) so the skill is copy-paste executable end-to-end without the external document.

De-duplicate the rows shared between the Error Handling table (gaps from NaN coercion, sluggish render above ~2,000 points) and reference.md's Troubleshooting section, keeping the body table as the quick-scan summary and pointing to the reference for detail.

DimensionReasoningScore

Conciseness

The body is lean and table-driven with no explanations of concepts Claude already knows; constraints carry non-obvious justification ("added directly — never `@portaljs/components`"). Only trivial overlap exists between the Error Handling table and reference.md's troubleshooting, so it sits at the every-token-earns-its-place anchor rather than the minor-trimming one.

5 / 5

Actionability

Concrete, executable guidance throughout: "npm install recharts@^2.15.0", "npx tsc --noEmit", "npm run i18n:check", exact paths (components/Chart.tsx, pages/[owner]/[slug].tsx, locales/*.json), and three example invocations. However, the actual Chart.tsx code and gating JSX are delegated to an external GitHub URL ("the single source of truth"), so the bundle alone is not copy-paste complete — a minor gap that keeps it below the fully-executable anchor.

4 / 5

Workflow Clarity

Eight clearly sequenced steps with explicit validation checkpoints at both stages — "Validate that the X and every Y column exist in the data file's header" (step 3) and "Verify with `npx tsc --noEmit`" (step 7) — plus an explicit recovery loop ("Fix the first reported error before reporting success"). The operation is additive, so the destructive/batch cap does not apply, and it matches the feedback-loop anchor better than the minor-validation-gaps one.

5 / 5

Progressive Disclosure

Good structure: a single one-level-deep bundle reference (references/reference.md, verified to exist and to match its billing as a chart-type and prop reference) is clearly signaled in Resources, and sections are well organized. The gap is that the canonical full workflow lives at an external GitHub URL rather than in the bundle, so the most detailed layer of content sits outside the skill — good placement with a minor organization gap, not the fully self-contained split of the top anchor.

4 / 5

Total

18

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states concrete capabilities in third person, enumerates supported chart types, and closes with an explicit, specific 'Use when' trigger tied to datasets.json. The only weakness is modest synonym coverage (no 'graph'/'plot' variants).

DimensionReasoningScore

Specificity

"Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section" lists multiple concrete actions covering the full workflow, and all five chart types ("line, bar, area, pie, or scatter") are enumerated. It matches the comprehensive-coverage anchor rather than the minor-gaps anchor below it.

5 / 5

Completeness

Both questions are answered explicitly: the what ("Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section") and a concrete when ("Use when visualizing a dataset already registered in datasets.json"). The when-clause is specific rather than generic, so it fits the top anchor rather than the 4 anchor whose when is vague.

5 / 5

Trigger Term Quality

"chart", "visualizing", and the natural type names ("line, bar, area, pie, or scatter") are terms users would say, but common synonyms like "graph" or "plot" are absent. Good keyword coverage with a few natural terms missing — not the comprehensive synonym coverage of the top anchor.

4 / 5

Distinctiveness Conflict Risk

"a dataset's showcase in a PortalJS portal" and "datasets.json" carve a clear niche with distinct triggers and minimal conflict risk. The only overlap is with closely related sibling skills (e.g. portaljs-add-map), whose triggers differ, so the clear-niche anchor fits better than the minor-overlap anchor.

5 / 5

Total

19

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository

datopian/portaljs

Path

skills/portaljs-add-chart/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.