CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

blog-chart

Internal capability, not user-invocable: the orchestrator calls it while running blog-write or blog-rewrite to turn research data into dark-mode compatible inline SVG charts (horizontal bar, grouped bar, donut, line, lollipop, area, radar) for HTML or MDX. Produces accessible markup (role=img, aria-labelledby, unique ids), source attribution and transparent backgrounds. Agents cannot call it.

Quality

87%

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

75%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 highly actionable, security-aware body: executable CLI with path guards, exact geometry and styling constants, JSX conversion rules, untrusted-data handling, and a final verification checklist. Its two weaknesses are token redundancy from duplicated SVG/MDX shell markup and the absence of an explicit end-to-end step ordering. The bundle split (schema in references, generator in scripts) is well signaled and one level deep.

Suggestions

Cut the duplicated full SVG and MDX shells in '## Output Format' — reference the earlier shell sections and show only the <figure>/<figcaption> wrapper to remove the largest block of repeated tokens.

Add a short numbered workflow near the top (select type from data pattern → build chart.json per references/chart-input-schema.md → run the CLI → verify against the checklist) so the sequence does not have to be inferred from section order.

Consider moving the per-type construction recipes to a reference file (e.g. references/chart-construction.md), keeping the type-selection table and one worked example inline in SKILL.md.

DimensionReasoningScore

Conciseness

Mostly efficient — tables and numbered construction steps carry real information — but the full SVG shell markup appears twice ('## Standard SVG Shell (HTML)' / '## JSX/MDX Shell' and again inside '## Output Format'), and the styling rules are restated a third time as checklist items. Removing the duplicated shells by having Output Format reference the earlier shells would tighten the body noticeably, which matches the 'could be tightened' anchor rather than 'minor instances that could be trimmed'.

3 / 5

Actionability

Fully executable throughout: a copy-paste CLI invocation with an absolute-path guard ('case "$BLOG_SKILLS_DIR" in /*) ;; *) echo "ERROR..."'), a data-pattern-to-chart-type table, exact geometry ('Center: cx=280, cy=180, outer radius=140, inner radius=80'), computed formulas ('bar width: (value / maxValue) * chartWidth'), a complete HTML-to-JSX attribute conversion table, and copy-ready HTML/MDX output shells. The common cases are covered end to end.

5 / 5

Workflow Clarity

The flow is discernible — resolve ${CLAUDE_SKILL_DIR} paths and read orchestration-details.md, prefer the deterministic CLI, give each chart a unique id, then run the 'Quality Checklist (Verify Before Returning)' as an explicit validation checkpoint. It falls short of the top anchor because the steps are never laid out as an explicit ordered sequence (the Input Format section arrives after the CLI section, and the order of selection → generation → verification must be inferred from section order); it clears the checkpoint-missing anchor because the closing checklist provides explicit verification.

4 / 5

Progressive Disclosure

Bundle structure is used well and matches the body's citations: the bulky chart.json schema is split into references/chart-input-schema.md ('The chart.json schema ... is in ${CLAUDE_SKILL_DIR}/references/chart-input-schema.md'), generation logic lives in scripts/generate_chart_svg.py, and the styling source of truth is delegated to ../blog/references/visual-media.md — all one level deep and clearly signaled. The minor gap is that ~75 lines of per-type construction recipes ('## Chart Type Construction') sit inline in SKILL.md where a reference file could hold them, keeping the main file a leaner overview.

4 / 5

Total

16

/

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 that states concrete capabilities (seven chart types, accessibility markup, attribution, transparent backgrounds), an explicit invocation condition tied to blog-write/blog-rewrite, and clear boundaries marking it as orchestrator-internal. Its only weakness is modest synonym coverage for natural trigger phrases. Since the skill is not user-invocable, trigger-term coverage matters less here, but the rubric evaluates the text as written.

Suggestions

Add one or two common synonyms such as 'graphs' or 'data visualization' to broaden natural keyword coverage, given 'chart' variants are the only family of trigger terms present.

DimensionReasoningScore

Specificity

Multiple concrete actions with comprehensive detail: 'turn research data into dark-mode compatible inline SVG charts (horizontal bar, grouped bar, donut, line, lollipop, area, radar) for HTML or MDX' and 'Produces accessible markup (role=img, aria-labelledby, unique ids), source attribution and transparent backgrounds'. All seven chart types, output formats, and output properties are enumerated in third-person voice; no gaps in coverage of what the skill produces.

5 / 5

Completeness

Both questions answered explicitly: what — 'turn research data into dark-mode compatible inline SVG charts... Produces accessible markup (role=img, aria-labelledby, unique ids), source attribution and transparent backgrounds'; when — 'the orchestrator calls it while running blog-write or blog-rewrite'. The trigger guidance is concrete ('while running blog-write or blog-rewrite') rather than weakly implied, matching the top anchor.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'charts', 'SVG', 'horizontal bar', 'donut', 'line', 'lollipop', 'area', 'radar', 'HTML', 'MDX', 'dark-mode', 'accessible markup'. A few common synonyms a user would naturally say are missing ('graph', 'plot', 'data visualization', 'figure'), keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

Clear niche with minimal conflict risk: 'Internal capability, not user-invocable: the orchestrator calls it while running blog-write or blog-rewrite' and 'Agents cannot call it' explicitly fence off wrong-invocation paths, and the enumerated chart types plus blog-specific context distinguish it from generic charting skills.

5 / 5

Total

19

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

AgriciDaniel/claude-blog

Path

skills/blog-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.