How do I install the Page Layout skill?

Run npx skillmds@latest add hyperdxio/page-layout in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Page Layout safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Page Layout?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Page Layout free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Page Layout?

hyperdxio (@hyperdxio) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Page Layout by hyperdxio — Agent Skill

Name: Page Layout
Author: hyperdxio

File contents

Page layout and headers

Read agent_docs/page_layout.md before changing any page shell. It is the source of truth for API, examples, and migration steps.

Quick rules

Default for new pages: PageLayout with title, optional leading / actions, and content — only when the sticky bar is text-only (no inputs in that bar).
Sticky bar contains inputs (source pickers, SQL/search, sliders, time range, Run, etc.): do not use PageHeader / PageLayout title. The sticky row is for controls only. Put where you are in the breadcrumbs prop (renders inside the sticky PageHeader, above the toolbar) when the page lives under a hierarchy (e.g. Dashboards → Kubernetes); otherwise you may omit breadcrumbs and rely on <Head><title>, the sidebar active item, and the empty state copy.
Never duplicate location: do not set title="Kubernetes Dashboard" and breadcrumbs that repeat the same page name.
Never use <Text size="xl"> as the page title in the body.
Global controls (time range, Run, Save, sampling) go in actions, right-aligned. Context pickers go in leading (no title when those slots are used for inputs). Breadcrumbs use the breadcrumbs prop so they stay in the sticky header, not in content.
Full-height tools (maps, large charts): fillViewport on PageLayout.
Search / Chart Explorer: keep bespoke toolbars unless the task is explicitly to redesign them.

Workflow

Read agent_docs/page_layout.md.
Open a similar page already on PageHeader / PageLayout (e.g. AlertsPage.tsx, DBServiceMapPage.tsx, KubernetesDashboardPage.tsx).
Implement using @/components/PageLayout or @/components/PageHeader.
Preserve or add data-testid on the page root for E2E tests.
Run yarn lint:fix in the repo root when done.
If the page has E2E coverage, run the relevant spec under packages/app/tests/e2e/.

Imports

import { PageHeader } from '@/components/PageHeader';
import { PageLayout } from '@/components/PageLayout';

Reference implementations

Page	File	Pattern
List page	`AlertsPage.tsx`	`PageHeader` + `title` + `Container` (no inputs in header)
Tool page with inputs + hierarchy	`KubernetesDashboardPage.tsx`, `ClickhousePage.tsx`	`PageLayout` without `title`; `breadcrumbs` + `leading` + `actions` in one sticky header
Tool page (top-level)	`DBServiceMapPage.tsx`	`PageLayout` without `title`; `leading` / `actions` only; no duplicate breadcrumb unless you add a real hierarchy
Custom toolbar	`SessionsPage.tsx`	`PageLayout` + `header` = custom `PageHeader` `children` (single-row inputs, no `title`)
Custom title	`TeamPage.tsx`	`PageHeader` with `children` only

---name: page-layoutdescription: Add or update app page headers and layout using PageHeader and PageLayout. Use when creating a new page, fixing inconsistent headers, or migrating Service Map / Kubernetes / dashboard pages to the shared layout.---# Page layout and headersRead **`agent_docs/page_layout.md`** before changing any page shell. It is the source of truth for API, examples, and migration steps.## Quick rules1. **Default for new pages**: `PageLayout` with `title`, optional `leading` / `actions`, and `content` — only when the sticky bar is **text-only** (no inputs in that bar).2. **Sticky bar contains inputs** (source pickers, SQL/search, sliders, time range, Run, etc.): **do not** use `PageHeader` / `PageLayout` **`title`**. The sticky row is for controls only. Put **where you are** in the **`breadcrumbs` prop** (renders **inside the sticky `PageHeader`**, above the toolbar) when the page lives under a hierarchy (e.g. `Dashboards` → `Kubernetes`); otherwise you may omit `breadcrumbs` and rely on `<Head><title>`, the sidebar active item, and the empty state copy.3. **Never** duplicate location: do not set `title="Kubernetes Dashboard"` **and** breadcrumbs that repeat the same page name.4. **Never** use `<Text size="xl">` as the page title in the body.5. **Global controls** (time range, Run, Save, sampling) go in `actions`, right-aligned. **Context** pickers go in `leading` (no `title` when those slots are used for inputs). **Breadcrumbs** use the `breadcrumbs` prop so they stay in the sticky header, not in `content`.6. **Full-height tools** (maps, large charts): `fillViewport` on `PageLayout`.7. **Search / Chart Explorer**: keep bespoke toolbars unless the task is explicitly to redesign them.## Workflow1. Read `agent_docs/page_layout.md`.2. Open a similar page already on `PageHeader` / `PageLayout` (e.g. `AlertsPage.tsx`, `DBServiceMapPage.tsx`, `KubernetesDashboardPage.tsx`).3. Implement using `@/components/PageLayout` or `@/components/PageHeader`.4. Preserve or add `data-testid` on the page root for E2E tests.5. Run `yarn lint:fix` in the repo root when done.6. If the page has E2E coverage, run the relevant spec under `packages/app/tests/e2e/`.## Imports```tsximport { PageHeader } from '@/components/PageHeader';import { PageLayout } from '@/components/PageLayout';```## Reference implementations| Page | File | Pattern ||------|------|---------|| List page | `AlertsPage.tsx` | `PageHeader` + `title` + `Container` (no inputs in header) || Tool page with inputs + hierarchy | `KubernetesDashboardPage.tsx`, `ClickhousePage.tsx` | `PageLayout` **without** `title`; **`breadcrumbs`** + `leading` + `actions` in one sticky header || Tool page (top-level) | `DBServiceMapPage.tsx` | `PageLayout` **without** `title`; `leading` / `actions` only; no duplicate breadcrumb unless you add a real hierarchy || Custom toolbar | `SessionsPage.tsx` | `PageLayout` + `header` = custom `PageHeader` `children` (single-row inputs, no `title`) || Custom title | `TeamPage.tsx` | `PageHeader` with `children` only |

Frequently asked questions

Page Layout