# dashboard-layout

> Claude/Codex skill by [@betterstackhq](https://omgskills.com/library/betterstackhq/index.md) · 4 stars · Updated 2026-10-23

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

```sh
git clone https://github.com/BetterStackHQ/claude-plugin /tmp/claude-plugin && ln -s /tmp/claude-plugin/skills/dashboard-layout ~/.claude/skills/dashboard-layout
```

## From 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.

## Links

- HTML page: https://omgskills.com/library/betterstackhq/claude-plugin/skills/dashboard-layout/
- GitHub: https://github.com/BetterStackHQ/claude-plugin
- Author: [@betterstackhq](https://omgskills.com/library/betterstackhq/index.md)

## More from this repo

- [chart-alerts](https://omgskills.com/library/betterstackhq/claude-plugin/skills/chart-alerts/index.md) — Guide for creating and managing Better Stack chart alerts.
   - [@betterstackhq](https://omgskills.com/library/betterstackhq/index.md) · 4 stars
- [chart-generation](https://omgskills.com/library/betterstackhq/claude-plugin/skills/chart-generation/index.md) — Complete reference for chart types, units, and settings on Better Stack dashboards.
   - [@betterstackhq](https://omgskills.com/library/betterstackhq/index.md) · 4 stars
- [chart-styling](https://omgskills.com/library/betterstackhq/claude-plugin/skills/chart-styling/index.md) — Better Stack chart styling and advanced settings reference - series colors and order, number chart coloring thresholds,...
   - [@betterstackhq](https://omgskills.com/library/betterstackhq/index.md) · 4 stars