CtrlK
BlogDocsLog inGet started
Tessl Logo

blog-chart

Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).

72

Quality

89%

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

82%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.

The body is highly actionable with concrete code, coordinates, and tables, and is well-organized with a verification checklist. It loses points on conciseness due to repeated SVG shell examples and on workflow clarity for lacking an explicit end-to-end sequence with error-recovery feedback.

Suggestions

Deduplicate the SVG shell: present the HTML and JSX shells once and have the Output Format section reference them rather than restating the full markup a third time.

Add an explicit top-level workflow (Input request → select chart type → build SVG → run quality checklist → return) with a feedback loop for when checklist items fail.

Either ship the referenced bundle files (visual-media.md, generate_chart_svg.py) in ./references and ./scripts, or drop the references if the skill is meant to be self-contained.

DimensionReasoningScore

Conciseness

Efficient with terse tables and section headers, but the SVG shell and source-attribution markup are repeated across the HTML shell, JSX shell, and Output Format sections, which could be deduplicated.

4 / 5

Actionability

Fully executable: a deterministic CLI command, exact coordinates and formulas per chart type, hex color codes, and an HTML-to-JSX attribute conversion table make the guidance copy-paste ready for all common cases.

5 / 5

Workflow Clarity

A selection table plus per-type numbered construction steps and a 'Quality Checklist (Verify Before Returning)' provide a clear sequence with verification, though the top-level input→select→build→verify flow is implicit and lacks an explicit error-recovery feedback loop.

4 / 5

Progressive Disclosure

Well-sectioned single-file structure with clearly signaled one-level-deep pointers to the styling source-of-truth and the generation script, though no bundle files actually exist in ./references, ./scripts, or ./assets to back those references.

4 / 5

Total

17

/

20

Passed

Description

96%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.

The description is comprehensive and well-constructed, clearly stating concrete capabilities and an extensive set of natural trigger phrases with both what and when answered explicitly. Only minor overlap risk with generic data-visualization skills keeps distinctiveness just below the top anchor.

DimensionReasoningScore

Specificity

Lists seven concrete chart types plus platform detection, accessibility enforcement, source attribution, and transparent backgrounds — comprehensive coverage of specific actions.

5 / 5

Completeness

Explicitly answers both what ('Generate dark-mode-compatible inline SVG data visualization charts') and when ('Use whenever the user mentions...'; 'Use when user says...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Comprehensive natural terms including synonyms and explicit quoted phrases a user would say ('data visualization', 'charts', 'graphs', 'blog chart', 'generate chart', 'svg chart', 'visualize data').

5 / 5

Distinctiveness Conflict Risk

Clear niche scoped to inline SVG blog charts with distinct triggers, but 'data visualization'/'graphs' terms are broad enough to overlap with general charting skills.

4 / 5

Total

19

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository
AgriciDaniel/claude-blog
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.