Official agent skill

Grafana Scenes

Build Grafana plugin pages using the @grafana/scenes framework.

OfficialApache-2.0Auto-check passedDevOps & Cloud

Install Grafana Scenes

skills CLI

$ npx skills add grafana/skills --skill grafana-scenes -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install grafana/skills grafana-scenes --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/grafana/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/grafana-plugins/grafana-scenes .claude/skills/grafana-scenes && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "grafana-scenes" agent skill from https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes into .claude/skills/grafana-scenes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "grafana-scenes", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add grafana/skills --skill grafana-scenes -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install grafana/skills grafana-scenes --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/grafana/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/grafana-plugins/grafana-scenes .agents/skills/grafana-scenes && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "grafana-scenes" agent skill from https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes into .agents/skills/grafana-scenes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "grafana-scenes", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add grafana/skills --skill grafana-scenes -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install grafana/skills grafana-scenes --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/grafana/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/grafana-plugins/grafana-scenes .cursor/skills/grafana-scenes && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "grafana-scenes" agent skill from https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes into .cursor/skills/grafana-scenes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "grafana-scenes", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/grafana/skills.git --path skills/grafana-plugins/grafana-scenes

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add grafana/skills --skill grafana-scenes -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install grafana/skills grafana-scenes --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/grafana/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/grafana-plugins/grafana-scenes .gemini/skills/grafana-scenes && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "grafana-scenes" agent skill from https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes into .gemini/skills/grafana-scenes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "grafana-scenes", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install grafana/skills grafana-scenes

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add grafana/skills --skill grafana-scenes -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/grafana/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/grafana-plugins/grafana-scenes .github/skills/grafana-scenes && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "grafana-scenes" agent skill from https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes into .github/skills/grafana-scenes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "grafana-scenes", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add grafana/skills --skill grafana-scenes -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install grafana/skills grafana-scenes --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/grafana/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/grafana-plugins/grafana-scenes .opencode/skills/grafana-scenes && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "grafana-scenes" agent skill from https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes into .opencode/skills/grafana-scenes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "grafana-scenes", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: grafana-scenes
GitHub stars: 282
Token cost: ~1.3k tokens
SKILL.md length: 226 words
Files: 1
Skills in repo: 51
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Build Grafana plugin pages using the @grafana/scenes framework.

Works in 3 steps: Create the scene file → Create the page → Register in SceneApp
Creating new scene pages
SKILL.md covers Core Concepts, Quick Start: New Scene Page, Key Patterns and Common Pitfalls, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Grafana Scenes is an agent skill from grafana/skills, published by the product's own GitHub organization. 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 Grafana plugins.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in DevOps & Cloud, covering Monitoring and alerting. It works with Grafana. The licence is Apache-2.0.

When your agent uses it

Creating new scene pages
Adding panels/visualizations
Setting up drilldown navigation
Defining variables

Example prompts

“/grafana-scenes”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

Create the scene file
Create the page
Register in SceneApp

What it can do on your machine

Read from SKILL.md and the folder at commit 1ccacf2. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- grafana.com
- npmjs.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Grafana Scenes loads about 1.3k tokens when it runs. Until then it costs about 131 tokens; SKILL.md has 226 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~131
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from grafana/skills at commit 1ccacf2, republished under its Apache-2.0 licence (© grafana). 226 words, ~1,267 tokens.

Download SKILL.mdSave it as .claude/skills/grafana-scenes/SKILL.md (or your agent's skills folder).

name: grafana-scenes
description: 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 Grafana plugins.
license: Apache-2.0

@grafana/scenes Framework

Build reactive, data-driven Grafana plugin pages with declarative scene objects.

Core Concepts

Scenes composes a tree of objects: SceneApp → SceneAppPage → EmbeddedScene → layouts → panels. Each node can own data ($data), variables ($variables), time ranges ($timeRange), and behaviors ($behaviors) that propagate down the tree.

Quick Start: New Scene Page

1. Create the scene file

typescript

// src/components/scenes/MyFeature/scene.tsx
import {
  EmbeddedScene, SceneFlexLayout, SceneFlexItem,
  SceneQueryRunner, SceneVariableSet, QueryVariable,
  PanelBuilders, VariableValueSelectors, SceneControlsSpacer,
} from '@grafana/scenes';

export function getMyFeatureScene(params: { datasource: DataSourceRef }) {
  const queryRunner = new SceneQueryRunner({
    datasource: params.datasource,
    queries: [{ refId: 'A', expr: 'up{cluster=~"$cluster"}', instant: true, format: 'table' }],
  });

  const panel = PanelBuilders.table()
    .setData(queryRunner)
    .setTitle('My Table')
    .build();

  return new EmbeddedScene({
    $variables: new SceneVariableSet({
      variables: [
        new QueryVariable({
          name: 'cluster',
          query: 'label_values(up, cluster)',
          datasource: params.datasource,
          isMulti: true, includeAll: true, defaultToAll: true,
        }),
      ],
    }),
    controls: [new VariableValueSelectors({}), new SceneControlsSpacer()],
    body: new SceneFlexLayout({
      direction: 'column',
      children: [new SceneFlexItem({ body: panel })],
    }),
  });
}

2. Create the page

typescript

// src/components/scenes/MyFeature/MyFeature.tsx
import { SceneAppPage, SceneTimeRange } from '@grafana/scenes';

export function getMyFeaturePage(params) {
  return new SceneAppPage({
    title: 'My Feature',
    url: '/a/my-plugin-id/my-feature',
    routePath: 'my-feature/*',
    $timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }),
    getScene: () => getMyFeatureScene(params),
    drilldowns: [],
  });
}

3. Register in SceneApp

Add the page to the SceneApp pages array in the root scene file.

Key Patterns

typescript

drilldowns: [{
  routePath: ':cluster/*',
  getPage: (match, parent) => new SceneAppPage({
    title: decodeURIComponent(match.params.cluster),
    url: `${parent.state.url}/${match.params.cluster}`,
    routePath: `${match.params.cluster}/*`,
    getScene: () => detailScene(decodeURIComponent(match.params.cluster)),
  }),
}]

Tabs (sub-pages within a detail view)

Pass tabs: [SceneAppPage, ...] instead of getScene on a SceneAppPage. Each tab is itself a SceneAppPage with its own scene.

Query with transformations

Wrap a SceneQueryRunner in SceneDataTransformer to apply Grafana transforms or custom RxJS operators:

typescript

new SceneDataTransformer({
  $data: queryRunner,
  transformations: [
    { id: 'organize', options: { renameByName: { 'Value #A': 'CPU' } } },
    (ctx) => (source) => source.pipe(map((frames) => /* custom transform */)),
  ],
})

Custom scene object

Extend SceneObjectBase with a static Component for custom interactive UI:

typescript

class MyWidget extends SceneObjectBase<MyWidgetState> {
  static Component = ({ model }: SceneComponentProps<MyWidget>) => {
    const state = model.useState();
    return <div>{state.value}</div>;
  };
}

Table column overrides

Build ConfigOverrideRule objects for drill-down links, filtering, units, widths, custom cells.

Panel types

PanelBuilders.table(), .timeseries(), .stat(), .gauge(), .barchart() — chain .setData(), .setTitle(), .setUnit(), .setOption(), .setOverrides(), then .build().

Common Pitfalls

Always use routePath: 'path/*' (with wildcard) on pages that have drilldowns or tabs
encodeURIComponent/decodeURIComponent URL params — K8s names can contain /
Variables referenced in queries as $varName must exist in an ancestor SceneVariableSet
getScene is called lazily; don't create side effects in the factory
For instant queries, set both instant: true and format: 'table'

Resources

Files

Just SKILL.md in skills/grafana-plugins/grafana-scenes of grafana/skills.

Open the folder on GitHubat commit 1ccacf2

Compare with similar skills

Grafana Scenes next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Grafana Scenes compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Grafana Scenes this skillgrafana/skills	282	—	~1.3k	Automated safety check: Pass	Apache-2.0	2 days ago
Mz Release SignoffMaterializeInc/materialize	6.4k	—	~7.2k	Automated safety check: Pass	Custom licence	today
Axiom Dashboard Builderopenclaw/clawhub	9.5k	—	~4.9k	Automated safety check: Pass	MIT	2 days ago
Happy Infra Metrics and Grafanaslopus/happy	24k	—	~2k	Automated safety check: Notes	MIT	today
Syncmetapawurb/hotpath-rs	1.9k	—	~1.2k	Automated safety check: Notes	MIT	yesterday
Optimize Slurm TopologyNVlabs/alpasim	1.3k	—	~1.6k	Automated safety check: Pass	Apache-2.0	23 days ago

Similar skills

Mz Release Signoff
MaterializeInc/materialize
Verify a release candidate on the Grafana dashboards and sign off in release.
6.4k GitHub stars~7.2k tokensUpdated today
DevOps & CloudAuto-check passed
Axiom Dashboard Builder
openclaw/clawhub
Designs and deploys Axiom dashboards through the API, choosing chart types and writing APL or metrics queries, with templates and migration notes for Splunk and Grafana.
9.5k GitHub stars~4.9k tokensUpdated 2 days ago
DevOps & CloudAuto-check passed
Happy Infra Metrics and Grafana
slopus/happy
Queries live Prometheus metrics and manages Grafana dashboards as code for Happy's infrastructure, using the grafanactl CLI and the Grafana datasource proxy API.
24k GitHub stars~2k tokensUpdated today
DevOps & CloudAuto-check: notes
Syncmeta
pawurb/hotpath-rs
Sync changes from the hotpath, hotpath-macros and hotpath-drain crates to their meta counterparts (hotpath-meta, hotpath-macros-meta and hotpath-drain-meta).
1.9k GitHub stars~1.2k tokensUpdated yesterday
DevOps & CloudAuto-check: notes
Optimize Slurm Topology
NVlabs/alpasim
Optimize AlpaSim Slurm topology throughput using persistent local Prometheus/Grafana telemetry and run artifacts.
1.3k GitHub stars~1.6k tokensUpdated 23 days ago
DevOps & CloudAuto-check passed
OpenTelemetry Pipeline Metrics Spec
comet-ml/opik
Specifies how to instrument an opik-backend pipeline with per-stage OpenTelemetry metrics for throughput, latency, errors and queue delay by workspace.
22k GitHub stars~3.2k tokensUpdated yesterday
DevOps & CloudAuto-check passed

Questions about Grafana Scenes

What does Grafana Scenes do?

Build Grafana plugin pages using the @grafana/scenes framework. Grafana Scenes is an agent skill from grafana/skills, published by the product's own GitHub organization. Build Grafana plugin pages using the @grafana/scenes framework.

When should I use Grafana Scenes?

Grafana Scenes fits situations like: creating new scene pages; adding panels/visualizations; setting up drilldown navigation; defining variables.

How do I install Grafana Scenes in Claude Code?

Run `npx skills add grafana/skills --skill grafana-scenes -a claude-code`. Or copy the skill folder (skills/grafana-plugins/grafana-scenes in grafana/skills) into .claude/skills/grafana-scenes in your project. Claude Code loads it when a task matches its description.

How do I install Grafana Scenes in Codex?

Run `npx skills add grafana/skills --skill grafana-scenes -a codex`. Or copy the skill folder (skills/grafana-plugins/grafana-scenes in grafana/skills) into .agents/skills/grafana-scenes in your project. Codex loads it when a task matches its description.

Can I use Grafana Scenes in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add grafana/skills --skill grafana-scenes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/grafana-scenes, .gemini/skills/grafana-scenes, .github/skills/grafana-scenes and .opencode/skills/grafana-scenes in your project.

What does Grafana Scenes need to run?

SKILL.md names no scripts, command-line tools or credentials: Grafana Scenes is instructions for the agent only.

Does Grafana Scenes access the network?

SKILL.md names 2 domains. As links in the text: grafana.com and npmjs.com. This is read from the text; nothing was executed.

Is Grafana Scenes safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Grafana Scenes use?

Grafana Scenes is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Grafana Scenes use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Grafana Scenes?

Skills that share tags, products or a category with Grafana Scenes: Mz Release Signoff (MaterializeInc/materialize, 6.4k stars), Axiom Dashboard Builder (openclaw/clawhub, 9.5k stars), Happy Infra Metrics and Grafana (slopus/happy, 24k stars) and Syncmeta (pawurb/hotpath-rs, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Grafana Scenes?

grafana (a GitHub organization, an official publisher) maintains it in grafana/skills, which has 282 GitHub stars. The repository holds 51 skills in this directory. The repository was last updated on October 8, 2026.

Source: grafana/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Grafana Scenes

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

@grafana/scenes Framework

Core Concepts

Quick Start: New Scene Page

1. Create the scene file

2. Create the page

3. Register in SceneApp

Key Patterns

Drilldowns (click-through navigation)

Tabs (sub-pages within a detail view)

Query with transformations

Custom scene object

Table column overrides

Panel types

Common Pitfalls

Resources

Files

Compare with similar skills

Similar skills

More from grafana/skills

Related

Questions about Grafana Scenes