CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

plannotator-visual-explainer

Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to nicobailon/visual-explainer.

68

Quality

86%

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

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-engineered routing skill body: clear content-type dispatch, explicit pre-read steps pointing to real one-level-deep references, copy-paste delivery commands, and unusually strong validation gates with feedback loops. The only real issues are minor: a partially redundant design-philosophy section and one unresolved cross-bundle reference inside pr-components.md.

DimensionReasoningScore

Conciseness

Efficient and dense: routing, per-path read lists, and structure specs with no explanation of concepts Claude already knows. Not 5 because the 'Design philosophy' section repeats guidance already stated in the Plan path ('No time estimates', 'One idea per viewport', whitespace advice) and the delivery section re-explains the gate already given per-path reference pointers; not 3 because the redundancy is minor and everything else earns its tokens.

4 / 5

Actionability

Fully actionable for an instruction-only skill: copy-paste commands ('plannotator annotate <file> --gate', 'npx skills add nicobailon/visual-explainer -g --yes'), exact check paths, enumerated failure signatures ('aria-roledescription="error"', 'Syntax error in text'), and concrete component specs (NEW/MOD/DEL badges, HIGH/MED/LOW severity badges, three risk tiers). Not 4 because no material executable gap remains in the body — the only command-less step (Mermaid rendering) is a competence assumption, and pattern details are correctly deferred to real reference files.

5 / 5

Workflow Clarity

Clear three-way routing by content type, numbered 'Before generating, read' sequences per path, an explicit validation hard gate with a feedback loop ('Fix the diagram or theme configuration and rerun both palettes until every SVG passes'), additional zoom/pan legibility checks for diagram shells, and a consent-gated install flow with defined stop conditions. Not 4 because validation checkpoints and error-recovery loops are explicit rather than implicit, matching the top anchor.

5 / 5

Progressive Disclosure

The body is a clean overview routing to five real, one-level-deep reference files, each named with a numbered read list and a description of its contents; all referenced paths exist. Not 5 because the bundle's references/pr-components.md points to '../../plannotator-visual-plan/references/design-system.md', a cross-bundle path that does not resolve within this bundle and creates ambiguity with the local references/design-system.md the PR path already directs you to read; not 3 because the body's own structure, signaling, and content split are otherwise exemplary.

4 / 5

Total

18

/

20

Passed

Description

78%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 with an explicit 'Use for' trigger list, a clear statement of what it produces, and an unusual but valuable explicit boundary showing how it divides work with nicobailon/visual-explainer. Its main weaknesses are thin action coverage (one verb) and missing natural synonyms or file-type cues.

Suggestions

Add natural trigger synonyms and variations users would say, e.g. 'presentations', 'infographics', 'flowcharts', or 'when asked to visually explain or summarize a plan/PR', to lift trigger term coverage toward comprehensive.

Enumerate more distinct concrete actions instead of one verb plus a content-type list (e.g., 'Build plan documents, render PR walkthroughs, create architecture diagrams and slide decks as self-contained HTML'), improving capability specificity.

Briefly ground 'Plannotator theming' in something concrete (e.g., theme tokens, light/dark palettes) so the what-clause is specific to readers who don't know Plannotator.

DimensionReasoningScore

Specificity

Names the domain ('self-contained HTML visualizations with Plannotator theming') and one concrete action ('Generate'), plus a delegation behavior, but enumerates content types rather than distinct actions. Not 4 because it does not list several specific concrete actions (no build/render/theme/convert-style verb list); not 2 because the actions given are concrete, not generic.

3 / 5

Completeness

Explicitly answers both: what ('Generate self-contained HTML visualizations with Plannotator theming') and when ('Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts') with concrete trigger phrases. Not 4 because the 'when' clause is already explicit and enumerated with a catch-all, leaving no specificity gap.

5 / 5

Trigger Term Quality

Good natural-term coverage: 'implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts' — phrases users would actually say. Not 5 because it lacks synonyms and variations (e.g., 'presentations', 'infographics', 'explain this PR visually', file extensions); not 3 because common content-type triggers are well covered.

4 / 5

Distinctiveness Conflict Risk

Mostly distinct: the 'Plannotator theming' niche and the explicit routing statement ('Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to nicobailon/visual-explainer') reduce conflict with the sibling skill. Not 5 because the broad catch-all 'any visual explanation of technical concepts' could still overlap generic visualization/diagramming skills; not 3 because the delegation boundary explicitly delineates the closest competitor.

4 / 5

Total

16

/

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

backnotprop/plannotator

Path

apps/skills/extra/plannotator-visual-explainer/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.