CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

build-dashboard

Build an interactive HTML dashboard — a Data Schematic — with charts, filters, and tables. Use when creating a dashboard, an executive overview with KPI cards, turning query results into a shareable self-contained report, building a team monitoring snapshot, or needing multiple charts with filters in one browser-openable file.

Quality

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/build-dashboard/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

52%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 delivers highly actionable templates and commands within a clear 7-step workflow, but it is a ~950-line monolith. Most of the CSS and Chart.js boilerplate duplicates what Claude already knows, and none of the detailed pattern libraries are split into reference files, hurting both token efficiency and progressive disclosure.

Suggestions

Move the CSS styling section and the full Chart.js/filter/table implementations into references/ files (e.g., STYLING.md, CHARTS.md), keeping SKILL.md as a concise workflow overview with one-level-deep pointers.

Cut generic explanations of responsive design, print styles, and Chart.js options; retain only skill-specific conventions (the Data Schematic layout, the COLORS palette, the pre-aggregation size thresholds).

Replace placeholder code ('return true; // placeholder', '// ... methods for each section') with complete working implementations so the base template is copy-paste ready.

DimensionReasoningScore

Conciseness

The ~950-line body inlines large amounts of material Claude already knows well: full CSS blocks for headers/KPI cards/tables/responsive design (~250 lines) and complete Chart.js function implementations. This duplicates standard knowledge rather than adding skill-specific value, matching 'noticeably verbose; several unnecessary explanations or padded sections'. Not a 3 because the padding is not incidental — the majority of the file is boilerplate Claude can generate unaided.

2 / 5

Actionability

Guidance is mostly executable: concrete qsv commands ('qsv sqlp data.csv "SELECT month, SUM(revenue)..."'), a complete base HTML template, and full working JS functions for KPI rendering, filters, and sortable tables. It stops short of fully copy-paste ready because snippets reference an undefined COLORS array and the template contains placeholder methods ('// ... methods for each section', 'return true; // placeholder').

4 / 5

Workflow Clarity

A clear 7-step sequence (understand requirements → gather data → design layout → build → charts → interactivity → save/open) with a rendering check ('Confirm it renders correctly'). It misses the explicit feedback loops of the top anchor — no 'open the file and fix rendering errors before delivering' instruction — so it sits at 'clear sequence with most checkpoints present'.

4 / 5

Progressive Disclosure

The skill is a single monolithic file with no bundle files at all; content that clearly belongs in separate references — the full CSS stylesheet, Chart.js chart patterns, and filter/table implementations (~500 lines) — is inlined directly in SKILL.md. This matches 'content that clearly belongs in separate files is inlined'. Not a 1 because section headers provide navigable structure.

2 / 5

Total

12

/

20

Passed

Description

83%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: concrete deliverable, explicit 'Use when...' triggers covering several natural user scenarios, and a distinct self-contained-HTML niche. Minor room to add common synonyms and clarify the unusual 'Data Schematic' branding term, which no user would actually say.

Suggestions

Add common trigger synonyms users say, such as 'visualization', 'data viz', or 'executive report', to the Use-when clause.

Consider leading with the plain term 'dashboard' before the branded 'Data Schematic', since users will never type 'Data Schematic' when requesting this.

DimensionReasoningScore

Specificity

The description lists several concrete components — 'interactive HTML dashboard', 'charts, filters, and tables' — describing a specific deliverable rather than vague actions. It falls short of a 5 because it describes one artifact with parts rather than a comprehensive set of distinct capabilities (e.g., no mention of what analysis or formatting happens inside the dashboard).

4 / 5

Completeness

It explicitly answers both questions: the 'what' ('Build an interactive HTML dashboard — a Data Schematic — with charts, filters, and tables') and the 'when' via an explicit 'Use when...' clause with concrete trigger scenarios (dashboard creation, executive overview, query results to report, monitoring snapshot). Not a 4 because the 'when' clause is already concrete and multi-scenario, matching the anchor-5 example structure.

5 / 5

Trigger Term Quality

Natural phrases like 'creating a dashboard', 'executive overview with KPI cards', 'team monitoring snapshot', and 'multiple charts with filters' match how users would actually phrase requests. A few common synonyms ('visualization', 'data viz', 'report with charts') are missing, so it does not reach comprehensive coverage.

4 / 5

Distinctiveness Conflict Risk

The niche — self-contained browser-openable HTML dashboards — is fairly distinct, with triggers like 'shareable self-contained report' and 'browser-openable file'. Minor overlap risk remains with generic chart/plotting skills that could also claim 'multiple charts with filters'; not a 5 because of that adjacency.

4 / 5

Total

17

/

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

skill_md_line_count

SKILL.md is long (951 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

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

Warning

Total

14

/

16

Passed

Repository

dathere/qsv

Path

.claude/skills/build-dashboard/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.