Help us improve
Share bugs, ideas, or general feedback.
From cce-grafana
Scaffolds Grafana plugin projects (panel, data source, app, backend) using @grafana/create-plugin. Automates Docker dev environment setup with hot-reload and plugin configuration for v12.x+.
npx claudepluginhub nodnarbnitram/claude-code-extensions --plugin cce-grafanaHow this skill is triggered — by the user, by Claude, or both
Slash command
/cce-grafana:grafana-plugin-scaffoldingThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Automate Grafana plugin project creation using the official `@grafana/create-plugin` scaffolder. This skill handles project scaffolding, development environment setup, and initial configuration for all plugin types.
README.mdreferences/e2e-testing.mdreferences/plugin-types.mdreferences/sdk-patterns.mdreferences/signing-publishing.mdreferences/troubleshooting.mdscripts/create_plugin.shscripts/dev_server.shtemplates/app-plugin.jsontemplates/backend-plugin.jsontemplates/datasource-plugin.jsontemplates/docker-compose.yamltemplates/panel-plugin.jsonScaffolds new Go projects for Grafana resources-as-code using gcx dev scaffold. Generates repo structure with CI/CD, main.go, and dashboard examples. Triggers on 'new project', 'scaffold', 'get started with gcx'.
Builds production-ready Grafana dashboards with panels, template variables, annotations, and provisioning for Prometheus/Loki metrics. Use for SRE operational views, SLO reporting, or version-controlled deployments.
Builds operational monitoring dashboards for Grafana, SigNoz, and similar platforms, focusing on health, latency, throughput, and action-oriented panels from metrics.
Share bugs, ideas, or general feedback.
Automate Grafana plugin project creation using the official @grafana/create-plugin scaffolder. This skill handles project scaffolding, development environment setup, and initial configuration for all plugin types.
Supported Grafana Version: v12.x+ only
Before scaffolding, verify these tools are installed:
# Check Node.js (v18+ required)
node --version
# Check npm
npm --version
# Check Docker (optional, for local development)
docker --version
If prerequisites are missing, guide the user to install them:
Use the official @grafana/create-plugin tool:
# Interactive scaffolding (recommended)
npx @grafana/create-plugin@latest
# The tool will prompt for:
# - Plugin type (panel, datasource, app, scenesapp)
# - Organization name (e.g., "myorg")
# - Plugin name (e.g., "my-panel")
# - Include backend? (y/n)
# Navigate to the new plugin directory
cd <orgName>-<pluginName>-<pluginType>
# Install frontend dependencies
npm install
# Install backend dependencies (if backend plugin)
go mod tidy
Option A: Docker with Hot-Reload (Recommended)
The scaffolder generates a docker-compose.yaml. For enhanced development with file watching, use the template from templates/docker-compose.yaml which includes Docker Compose develop features.
# Start Grafana with file watching (Docker Compose v2.22.0+)
docker compose watch
# Or standard start without watching
docker compose up -d
# Access Grafana at http://localhost:3000
# Login: admin / admin
With docker compose watch:
dist/ sync automatically (no restart)gpx_*) trigger container restartOption B: Manual
# Build and watch frontend
npm run dev
# Build backend (if applicable)
mage -v
# Configure Grafana to load unsigned plugins
# Add to grafana.ini: plugins.allow_loading_unsigned_plugins = <plugin-id>
npx @grafana/create-plugin@latest
# Select: panel
# Enter: organization name
# Enter: plugin name
# Backend: No (panels don't need backend)
Post-scaffolding:
src/components/SimplePanel.tsx for visualization logicsrc/types.ts for panel options interfacesrc/module.ts for option configurationnpx @grafana/create-plugin@latest
# Select: datasource
# Enter: organization name
# Enter: plugin name
# Backend: No
Post-scaffolding:
src/datasource.ts for query logicsrc/ConfigEditor.tsx for connection settingssrc/QueryEditor.tsx for query builder UInpx @grafana/create-plugin@latest
# Select: datasource
# Enter: organization name
# Enter: plugin name
# Backend: Yes
Post-scaffolding:
pkg/plugin/datasource.go for Go query logicQueryData and CheckHealth methodsmage -vnpx @grafana/create-plugin@latest
# Select: app
# Enter: organization name
# Enter: plugin name
# Backend: Optional
Post-scaffolding:
src/pages/ for app pagesplugin.json includes for navigation# Frontend development (watch mode)
npm run dev
# Frontend production build
npm run build
# Backend build (Go plugins)
mage -v
# Run unit tests
npm test
# Run E2E tests (requires Grafana running)
npx playwright test
# Lint code
npm run lint
# Type check
npm run typecheck
The @grafana/create-plugin scaffolder includes E2E testing setup with @grafana/plugin-e2e and Playwright.
# Install Playwright browsers
npx playwright install --with-deps chromium
# Start Grafana
docker compose up -d
# Run E2E tests
npx playwright test
# Run with UI mode (debugging)
npx playwright test --ui
See references/e2e-testing.md for comprehensive testing patterns, fixtures, and CI/CD setup.
@grafana/data, @grafana/ui, @grafana/runtime versions alignedplugin.json has correct id fieldnpm run dev completed without errorsmage -v to rebuild Go codeplugin_start_linux_* or gpx_* binaries exist in dist/plugin.json has "backend": truedocker compose down && docker compose up -ddocker compose logs grafanaFor complex architectural decisions, plugin design patterns, or troubleshooting, delegate to the grafana-plugin-expert agent which has access to current SDK documentation via Context7.