dashboard-layout
Definitive guide for Better Stack dashboard layout — grid system, layout rules, row templates, planning process, coordinate math, section manipulation. Load when creating or modifying dashboard layouts.
Install
With your agent
Install OMGSkills skill "betterstackhq/claude-plugin:skills/dashboard-layout" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/BetterStackHQ/claude-plugin /tmp/claude-plugin && ln -s /tmp/claude-plugin/skills/dashboard-layout ~/.claude/skills/dashboard-layoutFrom README
Dashboard Layout Guide This is the single source of truth for all layout decisions. Referenced by the dashboard-builder and grafana-import skills. Grid System Better Stack dashboards use a 12-column grid. Charts have (x, y, w, h) coordinates: x: column position (0-11) y: row position (0-based) w: width in columns (must sum to 12 per row) h: height in rows (always 6 — see Height section) Section headers occupy exactly 1 row of height (h=1) in the y-coordinate space. Charts in a section start at sectiony + 1. Height ALL charts use height: 6. Always pass height: 6 explicitly — the default is 8, which is too tall.
More from this repo
chart-alerts
Guide for creating and managing Better Stack chart alerts.
chart-generation
Complete reference for chart types, units, and settings on Better Stack dashboards.
chart-styling
Better Stack chart styling and advanced settings reference - series colors and order, number chart coloring thresholds,...