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
88%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
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 serves as a strong example of a well-crafted description that would enable accurate skill selection from a large pool.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'React.lazy, Suspense, and webpack code splitting' as techniques, and describes concrete 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 terms ('React.lazy', 'Suspense', 'webpack code splitting', 'module.js') and natural user 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 niche: specifically targets Grafana app plugin bundle optimization with 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 |
Implementation
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 a complete, well-sequenced workflow for optimizing Grafana app plugin bundle sizes. Its greatest strengths are the executable code examples, clear prioritization of splitting strategies, and explicit measurement/verification steps. The main weaknesses are moderate verbosity (the CI workflow YAML and some explanatory text could be offloaded to reference files) and references to bundle files that weren't provided.
Suggestions
Move the full CI workflow YAML examples (root-level and subdirectory variants) to a reference file like `references/bundle-size-ci.md` to reduce the main skill's length.
Trim explanatory sentences that Claude already knows (e.g., 'React.lazy() requires a default export', what barrel files are) to brief inline comments or remove entirely.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient and domain-specific, but includes some unnecessary explanations (e.g., explaining what module.js is, what barrel files are, general React.lazy mechanics). The risk-level table and some contextual framing could be tightened. However, most content is genuinely instructive for this specific Grafana plugin context. | 2 / 3 |
Actionability | Excellent actionability throughout — every step includes copy-paste-ready bash commands, complete TypeScript/TSX code blocks, YAML CI configurations, and specific measurement targets. The code examples are executable and contextually complete with proper imports and type annotations. | 3 / 3 |
Workflow Clarity | The 8-step workflow is clearly sequenced with explicit validation checkpoints: baseline measurement before changes (Step 2), build verification after changes (Step 7), and runtime testing with specific verification criteria (Step 8). The risk-level table provides clear prioritization, and the 'stop after Priority 2' guidance creates a natural feedback loop. | 3 / 3 |
Progressive Disclosure | The skill references `references/troubleshooting.md` and `references/datasource-plugins.md` for advanced topics, which is good progressive disclosure. However, no bundle files were provided, so these references may be broken. The main content is quite long (~300+ lines) and some sections (like the full CI YAML for both root and subdirectory plugins) could potentially be moved to reference files. | 2 / 3 |
Total | 10 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- grafana/skills
- Commit
6311c4f
- 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.