CtrlK
BlogDocsLog inGet started
Tessl Logo

plugin-bundle-size

Optimise Grafana app plugin bundle size using React.lazy, Suspense, and webpack code splitting. Use when the user asks to reduce plugin bundle size, optimise module.js, add code splitting, improve initial plugin load performance, split plugin chunks, lazy load plugin pages, or help implement lazy loading in a Grafana app plugin. Triggers on phrases like "optimise plugin bundle size", "module.js is too large", "plugin is slow to load", "code split the plugin", "reduce initial JS payload", or "help me with Suspense in my plugin".

72

Quality

88%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

77%

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

This is a high-quality, deeply actionable skill that provides expert-level guidance for a specific Grafana plugin optimization task. Its greatest strengths are the executable code examples, clear prioritization of splitting strategies by risk/impact, and well-defined verification steps with concrete metrics. The main weakness is length — some sections (particularly CI workflow YAML and detailed explanations) could be extracted to reference files to improve token efficiency.

Suggestions

Extract the CI workflow YAML configurations (Step 1) into a separate reference file like references/bundle-size-ci.md to reduce the main skill's token footprint — this is setup guidance that doesn't need to be in the core workflow.

Trim explanatory prose that Claude can infer, such as 'The smaller it is, the less impact the plugin has on Grafana's overall startup time' and 'A pre-split plugin commonly has a module.js of 1–3 MB with no other JS chunks' — these add context but not actionable value.

DimensionReasoningScore

Conciseness

The skill is generally well-targeted and avoids explaining basic React or webpack concepts, but it's quite long (~300+ lines) with some sections that could be tightened — e.g., the CI workflow YAML for both root and subdirectory plugins is verbose, and some explanatory prose ('A well-split plugin should have...') could be trimmed. However, most content is domain-specific knowledge Claude wouldn't have.

2 / 3

Actionability

Excellent actionability throughout — every step includes executable bash commands, complete TypeScript/TSX code blocks, specific YAML workflow configs, and concrete metrics/targets. The code examples are copy-paste ready with real imports, proper type annotations, and practical patterns like the `.then()` re-mapping for named exports.

3 / 3

Workflow Clarity

The 8-step workflow is clearly sequenced with explicit validation checkpoints: baseline measurement in Step 2, build verification in Step 7 with specific target metrics, and runtime testing in Step 8 with concrete verification steps (DevTools → Network → JS). The risk-level table provides clear prioritization, and the 'do not start implementing until you have read all of these' gate in Step 4 prevents premature action.

3 / 3

Progressive Disclosure

The skill references two external files (references/troubleshooting.md and references/datasource-plugins.md) which is good progressive disclosure, but no bundle files were provided to verify these exist. The main SKILL.md itself is quite long and some content (like the full CI workflow YAML for both root and subdirectory cases) could arguably be split into a reference file. The structure is well-organized with clear headers, but the inline density is high.

2 / 3

Total

10

/

12

Passed

Description

100%

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

This is an excellent skill description that clearly defines a narrow, specific domain (Grafana app plugin bundle optimization), lists concrete techniques and actions, and provides comprehensive trigger guidance with both a 'Use when' clause and explicit example phrases. It uses proper third-person voice throughout and would be easily distinguishable from other skills in a large skill library.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: 'React.lazy, Suspense, and webpack code splitting' as techniques, and mentions specific outcomes like 'reduce plugin bundle size', 'optimise module.js', 'lazy load plugin pages', and 'split plugin chunks'.

3 / 3

Completeness

Clearly answers both 'what' (optimise Grafana app plugin bundle size using React.lazy, Suspense, and webpack code splitting) and 'when' (explicit 'Use when...' clause with multiple trigger scenarios, plus a 'Triggers on phrases like...' section).

3 / 3

Trigger Term Quality

Excellent coverage of natural trigger terms including both technical ('React.lazy', 'Suspense', 'webpack code splitting', 'module.js') and user-language phrases ('plugin is slow to load', 'module.js is too large', 'reduce initial JS payload'). Covers many variations a user would naturally say.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive — scoped specifically to Grafana app plugins, bundle size optimization, and particular technologies (React.lazy, Suspense, webpack). Very unlikely to conflict with other skills due to the narrow domain focus.

3 / 3

Total

12

/

12

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
grafana/skills
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.