grafana/grafana's Claude Code Plugin for Frontend Test Conventions

What is the grafana/grafana plugin, actually

grafana/grafana is the source repository for Grafana, the observability and data visualization platform that renders metrics, logs, and traces from sources like Prometheus, Loki, Elasticsearch, InfluxDB, and Postgres, and it carries 76,414 GitHub stars. Flowy is not indexing that platform here. Inside the same repository sits a small Claude Code plugin: 3 skills, and all three are about writing and maintaining tests for Grafana's own frontend code, not about building dashboards, panels, or data sources the way a Grafana user would. Flowy files this listing under testing rather than observability for exactly that reason.

If you came here hoping for something that helps you build a dashboard or wire up a new data source, this plugin will not help with that. It is written for people working inside the grafana/grafana repository's own React and TypeScript codebase, matching the test conventions that codebase already expects.

What the 3 skills cover

All three concern Grafana's frontend test suite, but they split into different jobs.

frontend-testing-strategy is the general case. It writes unit and end-to-end tests for Grafana frontend code, in any package or feature area, to the conventions the repository expects, and its own description names the exact smell it exists to catch: a test that only asserts something rendered, or that a value is defined. It applies when you are adding tests, backfilling missing ones, or reviewing tests someone else wrote.

panel-testing-strategy narrows that same job to Grafana's visualization panels and the viz utilities behind them: panel types such as bar chart, time series, table, xy chart, heatmap, and canvas, plus shared grafana-ui visualization pieces including its table and uPlot based components. Reach for it specifically when the code under test renders a chart or a panel, rather than an ordinary interface component.

add-e2e-selectors is narrower still. It adds reliable end-to-end selectors, the @grafana/e2e-selectors kind, to interactive elements and key containers in the Grafana frontend. Its description gives two clear triggers: adding e2e selectors, data-testid attributes, or test selectors to a React component, and a file or component that has no selectors for testing yet.

When does this plugin actually pay off

This plugin only does something if you have the grafana/grafana repository checked out and are changing its frontend source. Writing a new React component for the Grafana interface, adding tests for a panel type, or making an existing component reliably findable in end-to-end tests are exactly the moments these 3 skills were written for.

It gives you nothing if you are a Grafana user rather than a Grafana contributor. Building a dashboard, connecting a Prometheus or Loki data source, writing a community plugin against Grafana's own plugin SDK, or running Grafana in production never touches these skills. None of the 3 components read your dashboards or your data, they read Grafana's own test files and component source, and that is the whole scope of what they know how to do.

Is this the same as Grafana's plugin SDK for building panels

No, and the difference matters if you build panels or data source plugins for Grafana as a third party. That work uses Grafana's own plugin tooling and documentation, published separately from this repository. The 3 skills here are internal to the grafana/grafana codebase itself: they assume you are editing files inside that repository, not publishing a panel plugin that runs inside someone else's Grafana instance.

How do I install it

Flowy indexes grafana/grafana from its public GitHub repository, and the plugin's 3 skills live inside that same codebase, so you can read them directly before deciding whether they apply to what you are working on. Flowy does not own, bundle, or host them. Install from the listing page linked at the top of this guide, and the 3 skills above become available in that session.