grafana-scenes
Build Grafana plugin pages using the @grafana/scenes framework. Use when creating new scene pages, adding panels/visualizations, setting up drilldown navigation, defining variables, configuring query runners, building table/timeseries/stat panels, or extending SceneObjectBase for custom scene objects. Triggers on any work involving SceneApp, SceneAppPage, EmbeddedScene, SceneQueryRunner, SceneDataTransformer, PanelBuilders, SceneFlexLayout, QueryVariable, or drilldown/tab configuration in Grafan
Security Assessment
About grafana-scenes
This skill guides developers in building Grafana plugin pages using the @grafana/scenes framework, a declarative, reactive model for data-driven dashboards and app pages. It solves the problem of assembling scene-based UIs correctly by teaching the core composition model, in which a tree of objects (SceneApp, SceneAppPage, EmbeddedScene, layouts, and panels) each own data, variables, time ranges, and behaviors that propagate down the tree.
The skill provides a quick-start walkthrough for creating a new scene page, from the scene file with a SceneQueryRunner and QueryVariable, to the SceneAppPage with routing and time range, to registration in the root SceneApp. It documents key patterns including drilldowns for click-through navigation, tabs for sub-pages, query transformations via SceneDataTransformer with Grafana transforms or custom RxJS operators, custom scene objects extending SceneObjectBase with a static Component, table column overrides through ConfigOverrideRule, and the PanelBuilders API for table, timeseries, stat, gauge, and barchart panels. It closes with common pitfalls (wildcard routePaths for pages with drilldowns or tabs, URL encoding of params, variable scoping, lazy getScene factories, and instant query configuration) and links to official documentation.
It is aimed at Grafana plugin developers working in TypeScript and React who are creating scene pages, adding visualizations, or wiring up variables and drilldown navigation. The content is a self-contained code-convention and API reference guide with example TypeScript snippets and no executable scripts.
FAQ
What does this skill help me build?
Grafana plugin pages with the @grafana/scenes framework, including scene pages, panels and visualizations, drilldown navigation, tabs, variables, query runners, transformations, and custom scene objects extending SceneObjectBase.
What is the core structure of a scene?
Scenes compose a tree: SceneApp then SceneAppPage then EmbeddedScene then layouts then panels. Each node can own data ($data), variables ($variables), time ranges ($timeRange), and behaviors ($behaviors) that propagate down the tree.
What are common pitfalls it warns about?
Use routePath with a wildcard on pages that have drilldowns or tabs, encode/decode URL params (K8s names can contain slashes), ensure variables referenced as $varName exist in an ancestor SceneVariableSet, avoid side effects in the lazy getScene factory, and set both instant and table format for instant queries.
Does it include runnable scripts?
No. It is a documentation and code-pattern reference with TypeScript examples and links to the official @grafana/scenes docs, npm package, and Grafana plugin tools.
Install grafana-scenes
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
grafana/skills